美文网首页
鸿蒙开发-BuilderParam使用

鸿蒙开发-BuilderParam使用

作者: 激扬飞雪 | 来源:发表于2024-05-20 21:24 被阅读0次
    @Entry
    @Component
    struct CardCase {
      @State message: string = 'Hello World'
      @State cardList: CardData[] = [
        {leftTitle: "员工姓名", rightTitle: "张三"},
        {leftTitle: "员工编号", rightTitle: "001"},
        {leftTitle: "员工权限", rightTitle: "读写权限"},
        {leftTitle: "员工组织", rightTitle: "开发部"},
        {leftTitle: "员工上级", rightTitle: "李四"},
      ]
      build() {
        Row() {
          Column() {
            CardInfo() {
              ForEach(this.cardList, (card, index) => {
                CardItem({card: card, showBottomLine: index != this.cardList.length - 1})
              })
    
            }
          }
          .width('100%')
        }
        .height('100%')
        .width('100%')
        .backgroundColor(Color.Gray)
      }
    }
    
    @Component
    struct CardInfo {
      @BuilderParam cardContent: () => void = () => {}
      build() {
        Column() {
          Column() {
            this.cardContent()
          }
          .backgroundColor(Color.White)
          .width('100%')
          .borderRadius(10)
        }
        .width('100%')
        .padding({
          left: 10,
          right: 10
        })
    
      }
    }
    
    @Component
    struct CardItem {
      card: Partial<CardData> = {}
      showBottomLine: boolean = true
      build() {
        Row() {
          Text(this.card.leftTitle)
          Text(this.card.rightTitle)
        }
          .width('100%')
        .justifyContent(FlexAlign.SpaceBetween)
        .padding({
          left: 10,
          right: 10,
          top: 15,
          bottom: 15
        })
        .border({
          color: Color.Gray,
          width: {
            bottom: this.showBottomLine ? 1 : 0
          }
        })
      }
    }
    class CardData {
      leftTitle: string
      rightTitle: string
    }
    
    image.png

    相关文章

      网友评论

          本文标题:鸿蒙开发-BuilderParam使用

          本文链接:https://www.haomeiwen.com/subject/ctpnfjtx.html