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的頂部或者底部會被固定。