本章内容概要

什么是自定义组件

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

自定义组件的特点

• 可组合：允许开发者组合使用系统组件、及其属性和方法。
• 可重用：自定义组件可以被其他组件重用，并作为不同的实例在不同的父组件或容器中使用。
• 数据驱动UI更新：通过状态变量的改变，来驱动UI的刷新。

自定义组件的基本使用

关键字

自定义组件需要通过 @Component 这个关键字来定义， 通过 struct 来声明自定义组件的名字 ， 如下面的代码所示

@Component
    struct MyComponent{
        @State dataList:string[]=[
            '李白乘舟将欲行,',
            '忽闻岸上踏歌声.',
            '桃花潭水深千尺',
            '不及汪伦送我情'
        ]

        build(){
            Column(){
                List(){
                    ForEach(this.dataList, (item)=>{
                        ListItem(){
                            Row(){
                                Text(item).fontSize(20)
                            }
                        }
                    })
                }
            }
        }
    }

• build()：这是自定义组件中必须实现的方法，用于构建组件的UI。在这个方法中，我们定义了组件的UI结构。
• Column()：这是一个容器组件，用于垂直排列子组件。
• List()：这是一个列表组件，用于显示列表项。
• ForEach(this.dataList, (item)=>{ ... })：这是一个循环构造器，用于遍历dataList数组。对于数组中的每个元素，都会创建一个ListItem。
• ListItem()：这是一个列表项组件，用于表示列表中的一个项目。
• Row()：这是一个容器组件，用于水平排列子组件。
• Text(item).fontSize(20)：这是一个文本组件，用于显示诗句。.fontSize(20)是一个链式调用的方法，用于设置文本的字体大小为20。
  总结： 这个自定义组件MyComponent定义了一个状态变量dataList，其中包含了四句诗句。在build方法中，组件构建了一个垂直的Column容器，其中包含了一个List组件。List组件使用ForEach循环来遍历dataList，并为每个诗句创建了一个ListItem，每个ListItem内部又包

组件的使用

将自定义的组件直接引入到页面中即可使用

@Entry
  @Component
  struct AutoComponentNote {

    build() {
      Row() {
        Column() {
          MyComponent()
        }
        .width('100%')
      }
      .height('100%')
    }
  }

代码中的 MyComponent() 就是我们自定义的组件

效果如下 ：

完整代码

@Entry
    @Component
    struct AutoComponentNote {

        build() {
            Row() {
                Column() {
                    MyComponent()
                }
                .width('100%')
            }
            .height('100%')
        }
    }


// 创建一个基本的自定义组件

@Component
    struct MyComponent{
        @State dataList:string[]=[
            '李白乘舟将欲行,',
            '忽闻岸上踏歌声.',
            '桃花潭水深千尺',
            '不及汪伦送我情'
        ]

        build(){
            Column(){
                List(){
                    ForEach(this.dataList, (item)=>{
                        ListItem(){
                            Row(){
                                Text(item).fontSize(20)
                            }
                        }
                    })
                }
            }
        }
    }

build()函数的相关规定

• @Entry 装饰的自定义组件，其build() 函数下的根节点唯一且必要，且必须为 容器组件，其中ForEach禁止作为根节点。
• @Component 装饰的自定义组件，其build()函数下的根节点唯一且必要，可以为非容器组件，其中ForEach禁止作为根节点。

@Entry
    @Component
    struct MyComponent {
        build() {
            // 根节点唯一且必要，必须为容器组件
            Row() {
                ChildComponent() 
            }
        }
    }

@Component
    struct ChildComponent {
        build() {
            // 根节点唯一且必要，可为非容器组件
            Image('test.jpg')
        }
    }

• build() 中不允许声明本地变量 例如：

build(){  //禁止这样使用
     let message:string = ‘hi Ruo Cheng’
}

• 不允许在UI描述里直接使用console.info，但允许在方法或者函数里使用

build(){  //禁止这样使用
      console.info('print debug log');
}

• 不允许创建本地的作用域

build(){  //禁止这样使用
{
    ......
}
}

• 不允许调用没有用@Builder装饰的方法，允许系统组件的参数是TS方法的返回值 ， @Builder 的使用方法在下一章节会讲哦！！

@Component
struct ParentComponent {
  doSomeCalculations() {
  }

  calcTextValue(): string {
    return 'Hello World';
  }

  @Builder doSomeRender() {
    Text(`Hello World`)
  }

  build() {
    Column() {
      // 反例：不能调用没有用@Builder装饰的方法
      this.doSomeCalculations();
      // 正例：可以调用
      this.doSomeRender();
      // 正例：参数可以为调用TS方法的返回值
      Text(this.calcTextValue())
    }
  }
}

• 不允许switch语法，如果需要使用条件判断，请使用if。

build() {
    Column() {
        // 反例：不允许使用switch语法
        switch (expression) {
            case 1:
                Text('...')
                break;
            case 2:
                Image('...')
                break;
            default:
                Text('...')
                break;
        }
    }
}

• 不允许使用表达式

build() {
  Column() {
    // 反例：不允许使用表达式
    (this.aVar > 10) ? Text('...') : Image('...')
  }
}

自定义组件如何设置样式

方法一

可以在自定义组件的内部自己设置即可

如下：

@Component
struct MyComponent{
  @State dataList:string[]=[
    '李白乘舟将欲行,',
    '忽闻岸上踏歌声.',
    '桃花潭水深千尺',
    '不及汪伦送我情'
  ]

  build(){
     Column(){
       List({space:20}){
         ForEach(this.dataList, (item)=>{
           ListItem(){
              Row(){
                Text(item).fontSize(20)
              }
           }
         })
       }
     }.width('100%')
    .height('100%')
    .padding(20)

  }
}

效果如下：

方法二

对于组件的整体样式设置也可以在引入的组件后面用链式的方式进行设置

@Entry
  @Component
  struct AutoComponentNote {

    build() {
      Row() {
        Column() {
          MyComponent()
            .width('100%')
            .height('100%')
            .backgroundColor('#ff0')
        }
        .width('100%')
      }
      .height('100%')
    }
  }

含了一个水平的Row容器，里面有一个Text组件用于显示诗句，并且设置了字体大小为20。当dataList数组的内容发生变化时，由于@State的响应式特性，组件将自动更新UI以反映这些变化。
效果如下：