HarmonyOS 鸿蒙Next 自定义组件

发布于 1周前 作者 sinazl 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 自定义组件

bindContentCover bindSheet 不支持自定义组件 都弹不出来 这个有啥解决方案吗

Harmonyos Next教程
4 回复

HarmonyOS 鸿蒙Next 自定义组件 可以参考如下demo:

@Component

struct CustomText {

build() {

Column() {

Text('这是一个自定义组件')

}

}

}

@Entry

@Component

struct Index {

@State message: string = 'Hello World';

@State showSheet:boolean = false

build() {

RelativeContainer() {

Text(this.message)

.id('HelloWorld')

.fontSize(50)

.fontWeight(FontWeight.Bold)

.alignRules({

center: { anchor: '__container__', align: VerticalAlign.Center },

middle: { anchor: '__container__', align: HorizontalAlign.Center }

})

.onClick(()=>{

this.showSheet = !this.showSheet

})

.bindSheet(this.showSheet, this.customContent())

}

.height('100%')

.width('100%')

}

@Builder

customContent() {

Row(){

CustomText()

}

}

}

在自定义组件外面套一个row组件或column组件即可正常显示弹窗

.bindSheet(
            $$this.showSku,
            this.skuContentBuilder(),
            {
              height: 自定义组件高度, // 适应内容
              backgroundColor: '#fff',
              showClose: false
            }
          )<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>
@Builder
  skuContentBuilder() {
    Column() {
     // 放自定义组件
     自定义组件()
    }

}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

肯定是你使用有误

HarmonyOS 鸿蒙Next 自定义组件是开发过程中的重要功能，它允许开发者封装和复用UI代码，提高开发效率。

自定义组件是基于struct实现的，并使用@Component装饰器来标识。每个自定义组件都必须实现build()方法，用于描述组件的UI结构。在创建自定义组件时，开发者可以考虑代码可复用性、业务逻辑与UI分离等因素，将UI和部分业务逻辑封装成自定义组件。

此外，自定义组件还支持丰富的生命周期接口，如aboutToAppear（组件即将出现时触发）和aboutToDisappear（组件即将销毁时触发）等，这些接口有助于开发者更好地管理组件的状态和行为。

值得注意的是，从API version 12开始，@ComponentV2装饰的自定义组件还支持冻结功能。当组件处于非激活状态时，状态变量将不响应更新，这有助于优化应用的性能和资源使用。

总之，HarmonyOS 鸿蒙Next 自定义组件是开发强大且灵活应用的关键功能之一。如果开发者在自定义组件使用过程中遇到问题，可以参考官方文档或相关教程进行解决。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部