浅谈ArkTS/ArkUI组件开发

浅谈ArkTS/ArkUI组件开发

本篇文章将从一个移动开发思维的维度出发，浅谈ArkTS组件开发的基础问题，比如状态管理、装饰器、属性传递、自定义构建函数、插槽、条件渲染，模块引用和路由跳转等。

---

创建项目

这里使用截图简单过一下，不再赘述了

页面和组件

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  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 }
        })
    }
    .height('100%')
    .width('100%')
  }
}

看页面入口Index组件，装饰器

• @Entry装饰器修饰的组件，表示这是个入口组件。且表示是一个独立page页面，通过router进行跳转。
• @Component使用该装饰器修饰的组件，表示自定义组件，可进行页面渲染。
• build类似ReactNative中的render方法。生成节点树实例。

另外，鸿蒙ArkUI是一套构建分布式应用界面的声明式UI开发框架，使用声明式的写法。也就是只能使用表达式，与jsx语法对比来看

// 感受下ReactNative中的组件，响应式编程范式（特点：都有一个return，属性样式以插入标签方式实现）
// return 之后是如何写的~
 render() {
   
        const {
   errDisMsg, title='账**', backMsg='返回'} = this.state;
         //公共错误
         ...省略...
        return (
            <View style={
   {
    flex: 1 }}>
                <View style={
   styles.container}>
                    <View>
                        <ICBCWAPHeader {
   ...header} />
                        <View style={
   {
    backgroundColor: '#F5F7F9' }} />
                        {
   bodytext}
                    </View>
                </View>
            </View>
        );
    }
 }

  // 与上面使用ReactNative组件响应式开发对比，该ArkUI声明式开发如下
  // 方式与响应式相近，无return返回，有属性样式的链式调用
  build() {
   
    Stack({
    alignContent: Alignment.Top }) {
   
      Image($r('app.media.ic_app_logo'))
        .width(80)
        .height(80)
        .margin({
    top: 160 })
        .borderRadius(30)
        .sharedTransition('imgAppLogo', {
   
          duration: 300,
          curve: Curve.Linear
        })
      Column() {
   
        Text("剧影新视界")
          .fontSize(SizeConstant.TEXT_XXL)
          .fontColor('#CC333333')
          .fontWeight(FontWeight.Medium)
      }
      .width("100%")
      .height(100)
      .margin(260)
      .padding({
    top: SizeConstant.SPACE_XL, bottom: SizeConstant.SPACE_XL })
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.SpaceEvenly)
     ... 省略...
    }.width("100%").height("100%").backgroundColor('#F5F5F5')
  }

可以发现声明式的开发中的一个小特点，组件中不需要renturn。

自定义组件

上面组件的开发示例代码中，我们用到 @Entry装饰器。它装饰的组件，则是通过路由可跳转进入的页面组件。其实对于自定义组件，不需要@Entry装饰器的修饰使用（@Entry修饰的组件，属于入口组件，可通过router进行跳转），且不是页面组件，不可路由进入。使用开发中的一段代码介绍下

/**
 * @auther y**
 * @description 登陆页面
 * @date 今天
 */
@Entry  // 通过该装饰器装饰，可路由页面组件
@Component
struct LoginPage {
   
  @StorageLink(THEME_TYPE) themeType: ThemeType = ThemeType.DEFAULT
  @