#鸿蒙通关秘籍#如何在HarmonyOS中实现ListItem的卡片样式？

@Entry
@Component
struct CardStyleListItemExample {
  build() {
    Column() {
      List({ space: "6vp" }) {
        ListItemGroup({ style: ListItemGroupStyle.CARD }) {
          ForEach([ListItemStyle.CARD, ListItemStyle.NONE, ListItemStyle.CARD], (styleType, index) => {
            ListItem({ style: styleType }) {
              Text('项目 ' + index)
                .width('100%')
                .height(50)
                .textAlign(TextAlign.Center)
            }
          }, (styleType, index) => index)
        }
      }
      .width('100%')
      .backgroundColor(0xFFFFFF)
    }
    .padding(10)
    .width('100%')
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.