鸿蒙 - arkTs:自定义组件,自定义组件函数

2023-12-21 16:35:02

自定义组件:

定义自定义组件:?

@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)
    }
  };
}

文章来源:https://blog.csdn.net/weixin_45536484/article/details/135131940
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。