列表是一個復雜的容器，當列表項達到一定數量，使得列表內容超出其范圍的時候，就會自動變為可以滾動。列表適合用來展現同類數據類型。

List的基本使用方法

List組件的構建聲明是這個樣子的

List(value?: {space?:number | string, initiallIndex?: number, scroller?: Scroller})

參數詳解：

• space: 代表子項中挨著的間距。
• initiallIndex: 代表首次進列表的時候初始滑動的位置，單位按照索引來進行測算。自動滑動的位置為 置頂第一個。
• scroller: 可滾動組件控制器(所以不止一個組件歐)。 如果一個List有滑動控制的需求，例如點擊某一個按鈕就會向上移動多少，此時，沒有辦法直接拿到List的對象去滑動，而是通過滑動控制器綁定完進行控制。

initiallIndex使用案例：

@State list:string[] = ['1', '2', '3', '4', '5', '6', '7']
build() {...List({space: 8, initiallIndex: 3}){ForEach(this.list, (item: string) => {....}, (item: string) => item)}
}

可滾動組件控制器-Scroller

上方我們講了下List組件構建的時候所需要的參數，其余兩個，space， 和 initiallIndex都比較好理解，我們不做贅述。 下面講講第三個參數Scroller。

Scroller就是用來控制可滾動組件的滾動行為的。List也是一種可滾動組件，也支持了這個控制器。

Scroller初始化

非常簡單，new一下即可。

// 1 初始化對象
scroller: Scroller = new Scroller()// 2 使用對象
build() {...List({space: 8, initiallIndex: 3, scroller: this.scroller}){ForEach(this.list, (item: string) => {....}, (item: string) => item)}
}

Scroller功能

• scrollTo ：滑動到指定位置
• scrollEdge： 滑動到邊緣
• scrollBy：滑動指定距離

// 1 初始化對象
scroller: Scroller = new Scroller()// 2 使用對象
build() {...List({space: 8, initiallIndex: 3, scroller: this.scroller}){ForEach(this.list, (item: string) => {....}, (item: string) => item)}Button('scroll 50').onclick(()=>{this.scroller.scrollBy(0, 50)})Button('back top').onclick(()=>{this.scroller.scrollEdge(Edge.Top)})
}

List屬性

屬性	功能
listDirection	設置List組件排列方向
lanes	設置List組件行數或者列數
divider	設置ListItem分割線樣式
scrollBar	設置滾動條狀態

listDirection屬性-設置列表方向

用于設置List組件的內容排列方向。 其值為一個枚舉：

• Axis.Vertical 縱向
• Axis.Horizontal 橫向

// 1 初始化對象
scroller: Scroller = new Scroller()// 2 使用對象
build() {...List({space: 8, initiallIndex: 3, scroller: this.scroller}){ForEach(this.list, (item: string) => {....}, (item: string) => item)}.listDirection(Axis.Vertical)
}

lanes屬性-設置列數

lanes是車道，劃分區域的意思。這個屬性設置的時候參數比較復雜。我們看看原型。

lanes(value: number|LengthConstrain, gutter?: Dimension)

• value: 設置列表內容的列數或者行數
• gutter: 設置列間距。 此處的列間距，應該變通理解，如果一個表目前是橫向的，那么它只有一個橫向的”列“！

// 1 初始化對象
scroller: Scroller = new Scroller()// 2 使用對象
build() {...List({space: 8, initiallIndex: 3, scroller: this.scroller}){ForEach(this.list, (item: string) => {....}, (item: string) => item)}.listDirection(Axis.Vertical).lanes(2)
}

List是縱向的，出現了兩列

那還要Grid干嘛，天哪！

divider屬性-設置分割線樣式

// 1 初始化對象
scroller: Scroller = new Scroller()// 2 使用對象
build() {...List({space: 8, initiallIndex: 3, scroller: this.scroller}){ForEach(this.list, (item: string) => {....}, (item: string) => item)}.listDirection(Axis.Vertical).lanes(2).divider({strockWidth: 2,color: '#4472c4',startMargin: 20,endMargin: 20})
}

scrollBar屬性-設置滾動條狀態

這個比較好理解就不做代碼展示了。我們理解下參數的意義即可。

scrollBar(barState: BarState)

BarState枚舉說明

• Auto：按需展示，觸摸時展示，2秒后就消失。
• Off：不展示
• On：常駐展示、

List，ListItemGroup, ListItem 組件關系

ListItemGroup用于列表數據的分組展示，其組件也是ListItem。ListItem表示單個列表項，可以包含單個組件。

list(){listItemGroup(){listItem(){...}}listItemGroup(){listItem(){...}listItem(){...}}listItemGroup(){listItem(){...}listItem(){...}}
}