簡介
在我們常用的手機(jī)應(yīng)用中盏袄，經(jīng)常會見到一些數(shù)據(jù)列表凭语，如設(shè)置頁面葱她、通訊錄、商品列表等似扔。下圖中兩個頁面都包含列表吨些，“首頁”頁面中包含兩個網(wǎng)格布局，“商城”頁面中包含一個商品列表炒辉。
上圖中的列表中都包含一系列相同寬度的列表項豪墅，連續(xù)、多行呈現(xiàn)同類數(shù)據(jù)黔寇，例如圖片和文本偶器。常見的列表有線性列表（List列表）和網(wǎng)格布局（Grid列表）：
為了幫助開發(fā)者構(gòu)建包含列表的應(yīng)用，ArkUI提供了List組件和Grid組件缝裤，開發(fā)者使用List和Grid組件能夠很輕松的完成一些列表頁面屏轰。
List組件的使用
List組件簡介
List是很常用的滾動類容器組件，一般和子組件ListItem一起使用憋飞，List列表中的每一個列表項對應(yīng)一個ListItem組件霎苗。
使用ForEeach渲染列表
列表往往由多個列表項組成，所以我們需要在List組件中使用多個ListItem組件來構(gòu)建列表榛做，這就會導(dǎo)致代碼的冗余唁盏。使用循環(huán)渲染（ForEach）遍歷數(shù)組的方式構(gòu)建列表，可以減少重復(fù)代碼检眯，示例代碼如下：
@Entry
@Component
struct ListDemo {
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
build() {
Column() {
List({ space: 10 }) {
ForEach(this.arr, (item: number) => {
ListItem() {
Text(`${item}`)
.width('100%')
.height(100)
.fontSize(20)
.fontColor(Color.White)
.textAlign(TextAlign.Center)
.borderRadius(10)
.backgroundColor(0x007DFF)
}
}, item => item)
}
}
.padding(12)
.height('100%')
.backgroundColor(0xF1F3F5)
}
}
效果圖如下：
設(shè)置列表分割線
List組件子組件ListItem之間默認(rèn)是沒有分割線的厘擂，部分場景子組件ListItem間需要設(shè)置分割線，這時候您可以使用List組件的divider屬性锰瘸。divider屬性包含四個參數(shù)：
- strokeWidth: 分割線的線寬刽严。
- color: 分割線的顏色。
- startMargin：分割線距離列表側(cè)邊起始端的距離获茬。
- endMargin: 分割線距離列表側(cè)邊結(jié)束端的距離港庄。
List列表滾動事件監(jiān)聽
List組件提供了一系列事件方法用來監(jiān)聽列表的滾動，您可以根據(jù)需要恕曲，監(jiān)聽這些事件來做一些操作：
- onScroll：列表滑動時觸發(fā)鹏氧，返回值scrollOffset為滑動偏移量，scrollState為當(dāng)前滑動狀態(tài)佩谣。
- onScrollIndex：列表滑動時觸發(fā)把还，返回值分別為滑動起始位置索引值與滑動結(jié)束位置索引值。
- onReachStart：列表到達(dá)起始位置時觸發(fā)茸俭。
- onReachEnd：列表到底末尾位置時觸發(fā)吊履。
- onScrollStop：列表滑動停止時觸發(fā)。
使用示例代碼如下：
List({ space: 10 }) {
ForEach(this.arr, (item) => {
ListItem() {
Text(`${item}`)
...
}
}, item => item)
}
.onScrollIndex((firstIndex: number, lastIndex: number) => {
console.info('first' + firstIndex)
console.info('last' + lastIndex)
})
.onScroll((scrollOffset: number, scrollState: ScrollState) => {
console.info('scrollOffset' + scrollOffset)
console.info('scrollState' + scrollState)
})
.onReachStart(() => {
console.info('onReachStart')
})
.onReachEnd(() => {
console.info('onReachEnd')
})
.onScrollStop(() => {
console.info('onScrollStop')
})
設(shè)置List排列方向
List組件里面的列表項默認(rèn)是按垂直方向排列的调鬓，如果您想讓列表沿水平方向排列艇炎，您可以將List組件的listDirection屬性設(shè)置為Axis.Horizontal。
listDirection參數(shù)類型是Axis腾窝，定義了以下兩種類型：
- Vertical（默認(rèn)值）：子組件ListItem在List容器組件中呈縱向排列缀踪。
- Horizontal：子組件ListItem在List容器組件中呈橫向排列。
Grid組件的使用
Grid組件簡介
Grid組件為網(wǎng)格容器虹脯，是一種網(wǎng)格列表驴娃，由“行”和“列”分割的單元格所組成，通過指定“項目”所在的單元格做出各種各樣的布局循集。Grid組件一般和子組件GridItem一起使用唇敞，Grid列表中的每一個條目對應(yīng)一個GridItem組件。
使用ForEach渲染網(wǎng)格布局
和List組件一樣咒彤，Grid組件也可以使用ForEach來渲染多個列表項GridItem疆柔，我們通過下面的這段示例代碼來介紹Grid組件的使用。
@Entry
@Component
struct GridExample {
// 定義一個長度為16的數(shù)組
private arr: string[] = new Array(16).fill('').map((_, index) => `item ${index}`);
build() {
Column() {
Grid() {
ForEach(this.arr, (item: string) => {
GridItem() {
Text(item)
.fontSize(16)
.fontColor(Color.White)
.backgroundColor(0x007DFF)
.width('100%')
.height('100%')
.textAlign(TextAlign.Center)
}
}, item => item)
}
.columnsTemplate('1fr 1fr 1fr 1fr')
.rowsTemplate('1fr 1fr 1fr 1fr')
.columnsGap(10)
.rowsGap(10)
.height(300)
}
.width('100%')
.padding(12)
.backgroundColor(0xF1F3F5)
}
}
示例代碼中創(chuàng)建了16個GridItem列表項镶柱。同時設(shè)置columnsTemplate的值為’1fr 1fr 1fr 1fr’婆硬，表示這個網(wǎng)格為4列，將Grid允許的寬分為4等分奸例，每列占1份彬犯；rowsTemplate的值為’1fr 1fr 1fr 1fr’，表示這個網(wǎng)格為4行查吊，將Grid允許的高分為4等分谐区，每行占1份。這樣就構(gòu)成了一個4行4列的網(wǎng)格列表逻卖，然后使用columnsGap設(shè)置列間距為10vp宋列，使用rowsGap設(shè)置行間距也為10vp。示例代碼效果圖如下：
上面構(gòu)建的網(wǎng)格布局使用了固定的行數(shù)和列數(shù)评也，所以構(gòu)建出的網(wǎng)格是不可滾動的炼杖。然而有時候因為內(nèi)容較多灭返，我們通過滾動的方式來顯示更多的內(nèi)容，就需要一個可以滾動的網(wǎng)格布局坤邪。我們只需要設(shè)置rowsTemplate和columnsTemplate中的一個即可熙含。
將示例代碼中GridItem的高度設(shè)置為固定值，例如100艇纺；僅設(shè)置columnsTemplate屬性怎静，不設(shè)置rowsTemplate屬性，就可以實(shí)現(xiàn)Grid列表的滾動：
Grid() {
ForEach(this.arr, (item: string) => {
GridItem() {
Text(item)
.height(100)
...
}
}, item => item)
}
.columnsTemplate('1fr 1fr 1fr 1fr')
.columnsGap(10)
.rowsGap(10)
.height(300)
此外黔衡，Grid像List一樣也可以使用onScrollIndex來監(jiān)聽列表的滾動蚓聘。
列表性能優(yōu)化
開發(fā)者在使用長列表時，如果直接采用循環(huán)渲染方式盟劫，會一次性加載所有的列表元素夜牡，從而導(dǎo)致頁面啟動時間過長，影響用戶體驗侣签，推薦通過以下方式來進(jìn)行列表性能優(yōu)化：
參考鏈接
List組件的相關(guān)API參考：List組件氯材。
Grid組件的相關(guān)API參考：Grid組件。
Grid組件的相關(guān)API參考：Grid組件硝岗。
循環(huán)渲染（ForEach）：循環(huán)渲染氢哮。
