鸿蒙开发系列教程（二十二）--List 列表操作（1）

列表是容器，当列表项达到一定数量，内容超过屏幕大小时，可以自动提供滚动功能。

用于呈现同类数据类型或数据类型集，例如图片和文本

List、ListItemGroup、ListItem关系
在这里插入图片描述

列表方向

1、概念

列表的主轴方向是指子组件列的排列方向，也是列表的滚动方向。

垂直于主轴的轴称为交叉轴，其方向与主轴方向相互垂直。

在这里插入图片描述

2、设置主轴方向

List组件主轴默认是垂直方向，listDirection默认为Axis.Vertical

List的listDirection属性设置为Axis.Horizontal水平方向

List() {
…
}
.listDirection(Axis.Horizontal)

3、设置交叉轴布局

lanes属性用于确定交叉轴排列的列表项数量，在不同尺寸的设备自适应构建不同行数或列数的列表。

多列与多行
在这里插入图片描述
lanes属性的取值类型是number | [LengthConstrain]

垂直列表，lanes属性为2，构建一个两列的垂直列表，lanes的默认值为1，垂直列表的列数是1。

List() {

…

}.lanes(2)

当其取值为LengthConstrain类型时，表示会根据LengthConstrain与List组件的尺寸自适应决定行或列数。

List() {
…
}.lanes({ minLength: 200, maxLength: 300 })

当List组件宽度为300vp时，由于minLength为200vp，此时列表为一列。
当List组件宽度变化至400vp时，符合两倍的minLength，则此时列表自适应为两列。

alignListItem设置子组件在交叉轴方向的对齐方式。

垂直列表，当alignListItem属性设置为ListItemAlign.Center表示列表项在水平方向上居中对齐。

alignListItem的默认值是ListItemAlign.Start，即列表项在列表交叉轴方向上默认按首部对齐。

List() {  
...
}
.alignListItem(ListItemAlign.Center)

在这里插入图片描述

列表数据

1、简单数据**

 @Component
struct CityList {build() {List() {ListItem() {Text('哈尔滨').fontSize(24)}ListItem() {Text('海南').fontSize(24)}ListItem() {Text('北京').fontSize(24)}
}
.backgroundColor('#FFF1F3F5')
.alignListItem(ListItemAlign.Center)}
}

2、图标文本数据

@Entry
@Component
struct Test03 {build() {Column() {List() {ListItem() {Row() {Image($r('app.media.m1')).width(40).height(40).margin(10)Text('摩天轮').fontSize(20)}}ListItem() {Row() {Image($r('app.media.m2')).width(40).height(40).margin(10)Text('大城堡').fontSize(20)}}}}.height('100%').width('100%')}
}

在这里插入图片描述

3、迭代数据

class Contact {name: string;icon: Resource;constructor(name: string, icon: Resource) {this.name = name;this.icon = icon;}
}@Entry
@Component
struct SimpleContacts {private contacts:Array<Contact>= [new Contact('aa', $r("app.media.s1")),new Contact('bb', $r("app.media.s2")),new Contact('cc', $r("app.media.s3")),new Contact('dd', $r("app.media.s4")),]build() {List({ space: 20, initialIndex: 0 }) {ForEach(this.contacts, (item: Contact) => {ListItem() {Row() {Image(item.icon).width(100).height(100).margin(10)Text("k--"+item.name).fontSize(20)}.width('100%').justifyContent(FlexAlign.Start)}}, item => item.name)}.width('100%').height('100%').border({"width":"5","color":"red"})}
}

在这里插入图片描述