【鸿蒙实战开发】深度探索与打造个性化自定义组件

今天分享一下 什么是自定义组件？及其自定义组件的实战。

做过前端或者android开发的都知道自定义组件，鸿蒙中显示在界面上的UI都称为组件，小打一个按钮，再到一个列表。

鸿蒙提供的组件有 基础组件，容器组件，媒体组件，绘制组件，画布组件组件等，如Button、Text 是基础组件。

由开发者在基础组件基础上 添加一些封装和修饰 定义的组件称为自定义组件。自定义组件的实现大大提高代码的可复用性和可维护性，提高代码效率。

自定义组件：是由@Component装饰的UI单元，可以组合多个系统组件实现UI的复用，可以调用组件的生命周期。

自定义组件和页面的关系

1.自定义组件：@Component装饰的UI单元，可以组合多个系统组件实现UI的复用，可以调用组件的生命周期。

2.页面：即应用的UI页面。可以由一个或者多个自定义组件组成，@Entry装饰的自定义组件为页面的入口组件，即页面的根节点，一个页面有且仅能有一个@Entry。只有被@Entry装饰的组件才可以调用页面的生命周期。

自定义组件的创建和渲染流程

自定义组件的创建：自定义组件的实例由ArkUI框架创建。

初始化自定义组件的成员变量：通过本地默认值或者构造方法传递参数来初始化自定义组件的成员变量，初始化顺序为成员变量的定义顺序。

如果开发者定义了aboutToAppear，则执行aboutToAppear方法。

在首次渲染的时候，执行build方法渲染系统组件，如果子组件为自定义组件，则创建自定义组件的实例。在执行build()函数的过程中，框架会观察每个状态变量的读取状态，将保存两个map：

状态变量 -> UI组件（包括ForEach和if）。

UI组件 -> 此组件的更新函数，即一个lambda方法，作为build()函数的子集，创建对应的UI组件并执行其属性方法，示意如下。

build() {
...
this.observeComponentCreation(() => {
Button.create();
})
this.observeComponentCreation(() => {
Text.create();
})
...
}

上面了解了自定义组件的概念，或许很多不知道怎么去使用自定义组件，下面就用商城项目中的 我的列表来实现：

先通过最简单的方式来实现，每一个里面是竖直布局，并且是由一个图片和一个文本组成：

Column(){
    Image($r('app.media.app_icon')).width(28).height(28)
    Text('互动有礼').fontSize(15)
      .fontColor(Color.Black).margin({ top: 5 })
  }

这样就可以实现每一个功能块。

如果想要实现水平的几个模块功能，需要重复的代码复制几次来实现：

build() {
    Row() {
      Flex({justifyContent: FlexAlign.SpaceAround}){
        Column(){
          Image($r('app.media.app_icon')).width(28).height(28)
          Text('黄金会员').fontSize(15)
            .fontColor(Color.Black).margin({ top: 5 })
        }


        Column(){
          Image($r('app.media.app_icon')).width(28).height(28)
          Text('积分商城').fontSize(15)
            .fontColor(Color.Black).margin({ top: 5 })
        }


        Column(){
          Image($r('app.media.app_icon')).width(28).height(28)
          Text('互动有礼').fontSize(15)
            .fontColor(Color.Black).margin({ top: 5 })
        }


        Column(){
          Image($r('app.media.app_icon')).width(28).height(28)
          Text('红包卡卷').fontSize(15)
            .fontColor(Color.Black).margin({ top: 5 })
        }
      }
      .backgroundColor('#FFFFFF')
      .borderRadius(20)
      .padding(15)
      .margin(10)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#e1e1e1')
  }

为了实现上面的功能，同样的代码重复写了四遍，虽然看起来简单，只是复制修改一点文本就行，但是这样你代码要冗余很多，还能影响性能和效率。

而且可维护性更差。

这种也算是一种问题，很多公司都要求优化代码，优化的就是这种冗余，影响效率的功能代码。

解决这种优化得最好方式 就是自定义组件：

@Component
struct ConponentDev{
  @State title:string = ''


  build(){
    Flex({justifyContent: FlexAlign.SpaceAround}){
      Column(){
        Image($r('app.media.app_icon')).width(28).height(28)
        Text(this.title).fontSize(15)
          .fontColor(Color.Black).margin({ top: 5 })
      }
    }
    .padding(10)
    .layoutWeight(1)
    .backgroundColor('#FFFFFF')
  }
}

上面代码实现一个竖直布局，里面有一个图片一个文本。

代码定义了一个名为ConponentDev的组件，组件都使用@Component修饰，@Entry表示入口组件，一个文件中可以有多个@Component，而@Entry只能有一个。

我们在入口组件中调用自定义组件ConponentDev：

build() {
    Row(){
      ForEach(this.arrayCon,(content: string)=>{
        ConponentDev({title:content})
      })
    }
    .width('100%')
    .height('100%')
    .padding(10)
    .borderRadius(20)
    .backgroundColor('#e1e1e1')
  }

调用的时候可以使用 ：

ForEach(this.arrayCon,(content: string)=>{
  ConponentDev({title:content})
})

这种方式需要定义一个array数组：

@State arrayCon: string[] = ['黄金会员','积分商城','互动有礼','红包卡卷']

也可以使用重复添加多个 ConponentDev({title:content})

Row(){
      ConponentDev({title:content1})
      ConponentDev({title:content2})
      ConponentDev({title:content3})
      ConponentDev({title:content4})
    }
    .width('100%')
    .height('100%')
    .padding(10)
    .borderRadius(20)
    .backgroundColor('#e1e1e1')

写在最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）文档用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）文档包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习文档能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习文档

鸿蒙（HarmonyOS NEXT）5.0最新学习路线

有了路线图，怎么能没有学习文档呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习文档

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V3.0白皮书》

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

《鸿蒙开发基础》

●ArkTS语言
●安装DevEco Studio
●运用你的第一个ArkTS应用
●ArkUI声明式UI开发
.……

《鸿蒙开发进阶》

●Stage模型入门
●网络管理
●数据管理
●电话服务
●分布式应用开发
●通知与窗口管理
●多媒体技术
●安全技能
●任务管理
●WebGL
●国际化开发
●应用测试
●DFX面向未来设计
●鸿蒙系统移植和裁剪定制
……

《鸿蒙进阶实战》

●ArkTS实践
●UIAbility应用
●网络案例
……

获取以上完整鸿蒙HarmonyOS学习文档，请点击→纯血版全套鸿蒙HarmonyOS学习文档