List–常见的布局容器

List是在app开发中最常见的一种布局方式，例如通讯录、新闻列表等。在鸿蒙应用中List布局使用也很普遍。

List 创建方式

创建方式一，通过Listitem

ListItem是List的子组件，List列表展示的内容需要通过ListItem承载才能展示。

      List({space: 10}){ // ListItem之间的间距ListItem(){Text('ListItem1').extendText()}ListItem(){Text('ListItem2').extendText()}ListItem(){Text('ListItem3').extendText()}ListItem(){Text('ListItem4').extendText()}ListItem(){Text('ListItem5').extendText()}ListItem(){Text('ListItem6').extendText()}}.margin(16)

这是最简单的创建方式，将需要展示的内容写在ListItem中。

创建方式二，通过ForEach和Listitem

在实际使用过程中，我们不会像 方式一 那样去创建列表；我们可以使用循环的方式去创建。

先声明一组数据

private arr = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14]

将声明的这组数据通过ForEach的方式，渲染到屏幕上。

  @Builder listForeach() {List({space: 20,initialIndex: 0}){ForEach(this.arr,(item,idx)=>{ListItem(){Text('ListItem:' + item + '   idx:'+idx).extendText()}},(item,idx)=>{return item + idx})}.listDirection(Axis.Vertical) // 排列方向.divider({strokeWidth: 10, color: Color.Green}) // 每行之间的分界线.edgeEffect(EdgeEffect.Spring) // 滑动到边缘的效果.onScrollIndex((firstIndex: number, lastIndex: number) => {console.info('first' + firstIndex)console.info('last' + lastIndex)})}

针对上面使用到的一些方法做下说明；

1. List({space: 20,initialIndex: 0}) space：表示两个Listitem之间的间距,initialIndex代表从第0个ListItem处开始展示
2. listDirection(Axis.Vertical) // 排列方向
3. divider({strokeWidth: 10, color: Color.Green}) // 每行之间的分界线
4. edgeEffect(EdgeEffect.Spring) // 滑动到边缘的效果
5. onScrollIndex((firstIndex: number, lastIndex: number)=> {})  滚动位置监听

创建方式三，通过ListItemGroup

ListItemGroup表述分组.

还是先准备数据

private groupArr = ['Group1','Group2','Group3','Group4']
private groupDict = {'Group1':[0,1,2,3],'Group2':[4,5,6],'Group3':[7,8,9,10],'Group4':[11,12,13]}

将数据渲染到页面

  @Builder listGroup() {List({space: 20,initialIndex: 0}){ForEach(this.groupArr,(item,idx)=>{ListItemGroup({space: 6,header: this.header(item)}){ForEach(this.groupDict[item],(itemChild,idxChild)=>{ListItem(){Text('ListItem:' + itemChild + '   idx:'+idxChild).extendText()}})}.backgroundColor(Color.Grey)})}.sticky(StickyStyle.Header|StickyStyle.Footer) }@Builder header(title: string) {Text(title).fontColor(Color.Black).fontSize(20).fontWeight(FontWeight.Bold).textAlign(TextAlign.Center)// .align(Alignment.Center).width('100%')}

展示效果：

分组效果通过上面图片可展示出来。

ListItemGroup({space: 6,header: this.header(item)}) 中使用了space和header

space: 表示分组内，每个子ListItem之间的间距
header：表示分组的头部，这个需要自定义。与之对应的还有一个footer。

还是用了一个sticky(StickyStyle.Header|StickyStyle.Footer) 表示滚动过程中ListItemGroup的顶部或者底部会被固定。