@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
网友评论