介绍
搭配 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列表 例子
@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%')
}
}
