HarmonyOS Next应用开发——自定义组件的使用

高心星

已于 2024-10-17 16:28:10 修改

阅读量1.3k

点赞数 25

CC 4.0 BY-SA版权

分类专栏：鸿蒙os移动应用开发文章标签： harmonyos 华为鸿蒙

于 2024-09-25 14:05:54 首次发布

本文链接：https://blog.csdn.net/gao_xin_xing/article/details/142521720

【高心星出品】

自定义组件的使用

在ArkUI中，UI显示的内容均为组件，由框架直接提供的称为系统组件，由开发者定义的称为自定义组件。在进行 UI 界面开发时，通常不是简单的将系统组件进行组合使用，而是需要考虑代码可复用性、业务逻辑与UI分离，后续版本演进等因素。因此，将UI和部分业务逻辑封装成自定义组件是不可或缺的能力。

创建自定义组件

自定义组件的基本结构

@Component
export struct hellocomponent{
   
   
  // 状态变量
  @State message:string ='hello component'
  // 私有变量
  private content
  // 构建函数 写法跟build类似
  @Builder
  genxx(aa){
   
   
   
  }
  // 构建UI界面 一个文本显示框
  build(){
   
   
     Text(this.message)
       .border({
   
   color:Color.Red,width:1,radius:5})
       .fontSize(22)
       .fontWeight(FontWeight.Bolder)
       .width('100%')
       .padding(5)
       .onClick(()=>{
   
   
         this.message=this.content
       }