鸿蒙 - arkTs：自定义组件，自定义组件函数

自定义组件：

定义自定义组件：?

@Component
export struct Header {
  private title: ResourceStr

  build(){
    Row(){
      Image($r('app.media.icon'))
        .width(20)
      Text(this.title)
        .fontSize(22)
        .fontWeight(FontWeight.Bold)
      Blank()
      Image($r('app.media.icon'))
        .width(20)
    }
    .width('100%')
    .padding(10)
  }
}

使用自定义组件：?

import {Header} from '../components/Header'

@Entry
@Component
struct Index {
  build() {
    Column(){
      Header({title: '22'})
    }
  };
}

自定义组件函数：

定义和使用自定义组件函数：

import {Header} from '../components/Header'

// 自定义全局自定义组件函数
@Builder function ItemCard (item) {
  Text(`第${item}个元素`)
    .fontWeight(FontWeight.Bold)
    .height(50)
    .lineHeight(50)
};

@Entry
@Component
struct Index {
  build() {
    Column(){
      Header({title: '22'})
      List({space: 30}) {
       ForEach(
         [1,2,3,4,5,6,7,8,9],
         item=>{
           ListItem(){
            // 使用全局自定义组件函数
             ItemCard(item)
           }
           .width('100%')
           .backgroundColor("#FFF")
           .padding(20)
         }
       )
      }
      .width('100%')
      .height('100%')
       .backgroundColor("#999")
      .listDirection(Axis.Vertical)
    }
  };
}

定义和使用自定义组件函数：
?

import {Header} from '../components/Header'
@Entry
@Component
struct Index {

  @Builder ItemCard (item) {
    // 自定义组件函数
    Text(`第${item}个元素`)
      .fontWeight(FontWeight.Bold)
      .height(50)
      .lineHeight(50)
  };

  build() {
    Column(){
      Header({title: '22'})
      List({space: 30}) {
       ForEach(
         [1,2,3,4,5,6,7,8,9],
         item=>{
           ListItem(){
            // 使用自定义函数
             this.ItemCard(item)
           }
           .width('100%')
           .backgroundColor("#FFF")
           .padding(20)
         }
       )
      }
      .width('100%')
      .height('100%')
       .backgroundColor("#999")
      .listDirection(Axis.Vertical)
    }
  };
}