案例1
@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
@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)
Radio({
value: "1",
group: "type"
})
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
}
.padding({
top: 15,
bottom: 15,
left: 5
})
ListItem() {
Row() {
Text('lucy')
.fontSize(20)
Radio({
value: "1",
group: "type"
})
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
}
.padding({
top: 15,
bottom: 15,
left: 5
})
}
.multiSelectable(true)
.width('90%')
.height('100%')
.divider({
//设置分割线
strokeWidth: 1,
color: '#333',
// startMargin: 10,
// endMargin: 10
})
.scrollBar(BarState.On) // 显示滚动条
}
.height('100%')
.width('100%')
}
}