鸿蒙HarmonyOS实战-ArkUI组件（List）_鸿蒙ats list选中，蚂蚁金服社招三面🦋3.2 设置交叉轴

🦋3.2 设置交叉轴布局

List组件的交叉轴布局可以通过lanes和alignListItem属性进行设置。lanes属性用于确定交叉轴排列的列表项数量，alignListItem用于设置子组件在交叉轴方向的对齐方式。一般情况下，List组件的lanes属性被用于在不同尺寸的设备上自适应构建不同行数或列数的列表。lanes属性的取值类型为"number | LengthConstrain"，即整数或者LengthConstrain类型。

List() { ... } .lanes(2)

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

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

lanes：设置列数
alignListItem：设置对齐方式

4.案例

🦋4.1 在列表中显示数据

@Entry @Component struct Index { build() { List() { ListItem() { Text('北京').fontSize(24) }

ListItem() { Text('杭州').fontSize(24) }

ListItem() { Text('上海').fontSize(24) } } .backgroundColor('#FFF1F3F5') .alignListItem(ListItemAlign.Center) } }

在这里插入图片描述

@Entry @Component struct Index { build() { List() { ListItem() { Row() { Image($r('app.media.app_icon')) .width(40) .height(40) .margin(10)

Text('小明') .fontSize(20) } }

ListItem() { Row() { Image($r('app.media.app_icon')) .width(40) .height(40) .margin(10)

Text('小红') .fontSize(20) } } } } }

在这里插入图片描述

🦋4.1 迭代列表内容

import util from '@ohos.util';

class Contact { key: string = util.generateRandomUUID(true); name: string; icon: Resource;

constructor(name: string, icon: Resource) { this.name = name; this.icon = icon; } } @Entry @Component struct Index { private contacts = [ new Contact('小明', $r("app.media.app_icon")), new Contact('小红',$ r("app.media.app_icon")), new Contact('张三', $r("app.media.app_icon")), new Contact('李四',$ r("app.media.app_icon")), ]

build() { List() { ForEach(this.contacts, (item: Contact) => { ListItem() { Row() { Image(item.icon) .width(40) .height(40) .margin(10) Text(item.name).fontSize(20) } .width('100%') .justifyContent(FlexAlign.Start) } }, item => item.key+item.name) } .width('100%') } }

在这里插入图片描述

🦋4.3 自定义列表样式

☀️4.3.1 内容间距

List({ space: 10 }) { ... }

在这里插入图片描述

☀️4.3.2 添加分隔线

List() { ... } .divider({ strokeWidth: 1, startMargin: 60, endMargin: 10, color: '#ffe9f0f0' })

在这里插入图片描述

☀️4.3.3 添加滚动条

List() { ... } .scrollBar(BarState.Auto)

在这里插入图片描述

☀️4.3.4 分组列表

1、直接手动分钟

@Component struct ContactsList { ...

@Builder itemHead(text: string) { // 列表分组的头部组件，对应联系人分组A、B等位置的组件 Text(text) .fontSize(20) .backgroundColor('#fff1f3f5') .width('100%') .padding(5) }

build() { List() { ListItemGroup({ header: this.itemHead('A') }) { // 循环渲染分组A的ListItem ... } ...

ListItemGroup({ header: this.itemHead('B') }) { // 循环渲染分组B的ListItem ... } ... } } }

2、遍历分组

contactsGroups: object[] = [ { title: 'A', contacts: [ new Contact('艾佳', $r('app.media.iconA')), new Contact('安安',$ r('app.media.iconB')), new Contact('Angela', $r('app.media.iconC')), ], }, { title: 'B', contacts: [ new Contact('白叶',$ r('app.media.iconD')), new Contact('伯明', $r('app.media.iconE')), ], }, ... ]

List() { // 循环渲染ListItemGroup，contactsGroups为多个分组联系人contacts和标题title的数据集合 ForEach(this.contactsGroups, item => { ListItemGroup({ header: this.itemHead(item.title) }) { // 循环渲染ListItem ForEach(item.contacts, contact => { ListItem() { ... } }, item => item.key) } ... }) }

在这里插入图片描述

☀️4.3.5 添加粘性标题（官方）

@Component struct ContactsList { // 定义分组联系人数据集合contactsGroups数组 ...

@Builder itemHead(text: string) { // 列表分组的头部组件，对应联系人分组A、B等位置的组件 Text(text) .fontSize(20) .backgroundColor('#fff1f3f5') .width('100%') .padding(5) }

build() { List() { // 循环渲染ListItemGroup，contactsGroups为多个分组联系人contacts和标题title的数据集合 ForEach(this.contactsGroups, item => { ListItemGroup({ header: this.itemHead(item.title) }) { // 循环渲染ListItem ForEach(item.contacts, contact => { ListItem() { ... } }, item => item.key) } ... }) } .sticky(StickyStyle.Header) // 设置吸顶，实现粘性标题效果 } }

在这里插入图片描述

☀️4.3.6 控制滚动位置（官方）

private listScroller: Scroller = new Scroller(); Stack({ alignContent: Alignment.BottomEnd }) { // 将listScroller用于初始化List组件的scroller参数，完成listScroller与列表的绑定。 List({ space: 20, scroller: this.listScroller }) { ... } ...

Button() { ... } .onClick(() => { // 点击按钮时，指定跳转位置，返回列表顶部 this.listScroller.scrollToIndex(0) }) ... }

在这里插入图片描述

☀️4.3.7 响应滚动位置（官方）

... const alphabets = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

@Entry @Component struct ContactsList { @State selectedIndex: number = 0; private listScroller: Scroller = new Scroller(); ...

build() { Stack({ alignContent: Alignment.End }) { List({ scroller: this.listScroller }) { ... } .onScrollIndex((firstIndex: number) => { this.selectedIndex = firstIndex // 根据列表滚动到的索引值，重新计算对应联系人索引栏的位置this.selectedIndex ... }) ... // 字母表索引组件 AlphabetIndexer({ arrayValue: alphabets, selected: 0 }) .selected(this.selectedIndex) ... } } }

在这里插入图片描述

☀️4.3.8 响应列表项侧滑（官方）

@Entry @Component struct MessageList { @State messages: object[] = [ // 初始化消息列表数据 ... ];

@Builder itemEnd(index: number) { // 侧滑后尾端出现的组件 Button({ type: ButtonType.Circle }) { Image($r('app.media.ic_public_delete_filled')) .width(20) .height(20) } .onClick(() => { this.messages.splice(index, 1); }) ... } build() { ... List() { ForEach(this.messages, (item, index) => { ListItem() { ... } .swipeAction({ end: this.itemEnd.bind(this, index) }) // 设置侧滑属性 }, item => item.id.toString()) } ... } }

在这里插入图片描述