HarmonyOS NEXT鸿蒙开发：List列表、ListItem 案例-马育民老师

# 案例1

[![](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%')
  }
}
```

# 案例2

每个 `ListItem` 有两个控件，一个是 `Text` ，另一个是 `Radio`，此时要再 `ListItem` 内加上 `Row`，然后再将两个控件添加到 `Row`

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

```
@Entry
@Component
struct ListAndListItemDemo2 {
  build() {
    Column() {
      // 人员列表
      List() {
        ListItem() {
          Row() {
            Text('李雷')
              .fontSize(20)

Radio({
              value: "1",
              group: "type"
            })
          }
          .width('100%')
          .justifyContent(FlexAlign.SpaceBetween)
        }
        .padding({
          top: 15,
          bottom: 15,
          left: 5
        })

ListItem() {
          Row() {
            Text('韩梅梅')
              .fontSize(20)

ListItem() {
          Row() {
            Text('lucy')
              .fontSize(20)

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

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