HarmonyOS NEXT鸿蒙开发：ListItem-马育民老师

# 介绍

[官网API](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-listitem-V5 "官网API")

搭配 `List` 列表使用，是 `List` 的子控件

`ListItem` **只能放一个控件**，如果要放多个控件，可以添加 `Row` 控件，再向 `Row` 放入多个控件

# 接口

```
ListItem(value?: ListItemOptions)
```

##### 参数

- value：类型：ListItemOptions 对象

## ListItemOptions 对象

属性：

- style：类型：ListItemStyle，设置List组件卡片样式。

- ListItemStyle.NONE：默认值，表示无样式
 
 - ListItemStyle.CARD：卡片样式

#### ListItemStyle.CARD

建议配合ListItemGroup的ListItemGroupStyle.CARD同时使用，显示默认卡片样式。

卡片样式下，ListItem默认规格：高度48vp，宽度100%，左右内边距8vp。

如果需要实现ListItem高度自适应，可以把height设置为undefined。

卡片样式下, 为卡片内的列表选项提供了默认的focus、hover、press、selected和disable样式。

说明：

当前卡片模式下，使用默认 `Axis.Vertical` 排列方向，如果 `listDirection` 属性设置为 `Axis.Horizontal`，**会导致显示混乱**；List属性alignListItem默认为ListItemAlign.Center，居中对齐显示。

# 例子

上接 [HarmonyOS NEXT鸿蒙开发：List列表](https://www.malaoshi.top/show_1GW54yR1L0E.html "HarmonyOS NEXT鸿蒙开发：List列表") 例子

[![](https://www.malaoshi.top/upload/0/0/1GW54wKyg06.jpg)](https://www.malaoshi.top/upload/0/0/1GW54wKyg06.jpg)

```
@Entry
@Component
struct ListAndListItemDemo {

build() {
    Column() {
      // 人员列表
      List() {
        ListItem() {
          Text('李雷')
            .fontSize(20)
        }
        .padding({
          top:15,
          bottom:15,
          left:5
        })

ListItem() {
          Text('韩梅梅')
            .fontSize(20)
        }
        .padding({
          top:15,
          bottom:15,
          left:5
        })

ListItem() {
          Text('lucy')
            .fontSize(20)
        }
        .padding({
          top:15,
          bottom:15,
          left:5
        })

}

.width('90%')
      .height('100%')
      .divider({ //设置分割线
        strokeWidth: 1,
        color: '#333',
        // startMargin: 10,
        // endMargin: 10
      })
      .scrollBar(BarState.On) // 显示滚动条
    }
    .height('100%')
    .width('100%')
  }
}
```

原文出处：http://malaoshi.top/show_1GW55DElFof.html