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

在HarmonyOS中，ListItem可通过ListItemStyle枚举来设置为卡片样式，以下示例展示如何实现：

@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%')
  }
}

将ListItem的style设为ListItemStyle.CARD，可以使其具有卡片样式，结合ListItemGroup提供的样式，能呈现更丰富的视觉效果。