设置列表卡片样式
========

#### 场景介绍

从6.0.0(20)版本开始，新增支持设置列表卡片样式。

应用使用[HdsListItemCard](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ui-design-hdslistitemcard)组件实现多设备上的系统列表样式。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/68/v3/zSCu17Y5TeKxiK9aNZ3x_A/zh-cn_image_0000002594828502.jpg?HW-CC-KV=V1&HW-CC-Date=20260612T073350Z&HW-CC-Expire=86400&HW-CC-Sign=410D0EA3899484146279D4DC6E70EA120DA26FF1DF3823FA39D2046574A56FF1)

#### 开发步骤

1.  导入相关模块。
    
    import { HdsListItemCard, PrefixImage, SuffixSwitch } from '@kit.UIDesignKit';
    
2.  创建HdsListItemCard组件，设置左边为Image，中间为Text，右边为Switch的场景。
    
    @Entry
    @Component
    struct Test {
      private scroller: ListScroller = new ListScroller();
    
      build() {
        Column() {
          List({ space: 10, scroller: this.scroller }) {
            ListItem() {
              HdsListItemCard({
                // A区图片
                prefixItem: new PrefixImage({
                  image: $r('app.media.background'),
                  onClick: () => {
                    console.info('left image');
                  }
                }),
                // B区文本
                textItem: {
                  primaryText: {
                    text: 'Primary Text'
                  },
                  secondaryText: {
                    text: 'Secondary Text'
                  },
                  description: {
                    text: 'Description Text'
                  }
                },
                // C区Switch
                suffixItem: new SuffixSwitch({
                  isCheck: false,
                  onChange: (num: boolean) => {
                    if (num) {
                      console.info('switch is true');
                    } else {
                      console.info('switch is false');
                    }
                  }
                }),
                onClick: () => {
                  console.info('hdslistitem');
                }
              })
            }
          }
          .width('100%')
          .height('100%')
          .margin(10)
        }.backgroundColor(0x1a0a59f7).height('100%')
      }
    }