前言:
List 组件的基本用法,可以用它来展示列表,并且实现列表滚动,日常开发的时候还可以用它来实现更为复杂的效果。
列表是一种复杂的容器,当列表项达到一定数量,超过List容器组件大小 时,可以自动提供滚动功能。它适合用于呈现同类数据类型或数据类型集,例如图片和文本。在列表中显示数据集合是许多应用程序中的常见要求(如通讯录、音乐列表、购物清单等)。List 表示列表容器,ListItem表示单个列表项,可以包含单个子组件。
基本用法:
js
@Entry
@Component
struct Index {
build() {
List(){
ListItem(){
Text('hello')
}
ListItem(){
Text('hello')
}
ListItem(){
Text('hello')
}
}
}
}
效果如下:
常用属性:
滚动条状态 属性:scrollBar()
参数:枚举 BarState
- Off: 不显示
- On:常驻显示
- Auto:按需显示(触摸时显示,2s 后消失)
js
List() {
listItem()
......
}
.scrollBar(BarState.Off)
分割线样式 列表默认没有分割线
属性:divider()
参数:{ strokeWidth: 数字, color?: 'color', startMargin?: 数字, endMargin?: 数字 }
js
@Entry
@Component
struct Index {
build() {
Column() {
List() {
ListItem() {
Text('hello')
}
ListItem() {
Text('hello')
}
ListItem() {
Text('hello')
}
ListItem() {
Text('hello')
}
}
.border({width:1})
.divider({
strokeWidth: 1, // 设置分割线的宽度为1
color: Color.Black, // 设置分割线的颜色为橙色
startMargin: 10, // 设置分割线起点的边距为10
endMargin: 10 // 设置分割线终点的边距为10
})
}
}
}