美文网首页
鸿蒙开发-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