在我們常用的手機(jī)應(yīng)用中，經(jīng)常會(huì)見到一些數(shù)據(jù)列表，如設(shè)置頁面、通訊錄、商品列表等。下圖中兩個(gè)頁面都包含列表，“首頁”頁面中包含兩個(gè)網(wǎng)格布局，“商城”頁面中包含一個(gè)商品列表。
上圖中的列表中都包含一系列相同寬度的列表項(xiàng)，連續(xù)、多行呈現(xiàn)同類數(shù)據(jù)，例如圖片和文本。常見的列表有線性列表（List列表）和網(wǎng)格布局（Grid列表）：
為了幫助開發(fā)者構(gòu)建包含列表的應(yīng)用，ArkUI提供了List組件和Grid組件，開發(fā)者使用List和Grid組件能夠很輕松的完成一些列表頁面。
List組件的使用
List組件簡介
List是很常用的滾動(dòng)類容器組件，一般和子組件ListItem一起使用，List列表中的每一個(gè)列表項(xiàng)對(duì)應(yīng)一個(gè)ListItem組件。
使用ForEach渲染列表
列表往往由多個(gè)列表項(xiàng)組成，所以我們需要在List組件中使用多個(gè)ListItem組件來構(gòu)建列表，這就會(huì)導(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è)置分割線，這時(shí)候您可以使用List組件的divider屬性。divider屬性包含四個(gè)參數(shù)：
- strokeWidth: 分割線的線寬。
- color: 分割線的顏色。
- startMargin：分割線距離列表側(cè)邊起始端的距離。
- endMargin: 分割線距離列表側(cè)邊結(jié)束端的距離。
List列表滾動(dòng)事件監(jiān)聽
List組件提供了一系列事件方法用來監(jiān)聽列表的滾動(dòng)，您可以根據(jù)需要，監(jiān)聽這些事件來做一些操作：
- onScroll：列表滑動(dòng)時(shí)觸發(fā)，返回值scrollOffset為滑動(dòng)偏移量，scrollState為當(dāng)前滑動(dòng)狀態(tài)。
- onScrollIndex：列表滑動(dòng)時(shí)觸發(fā)，返回值分別為滑動(dòng)起始位置索引值與滑動(dòng)結(jié)束位置索引值。
- onReachStart：列表到達(dá)起始位置時(shí)觸發(fā)。
- onReachEnd：列表到底末尾位置時(shí)觸發(fā)。
- onScrollStop：列表滑動(dòng)停止時(shí)觸發(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組件里面的列表項(xiàng)默認(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)格列表，由“行”和“列”分割的單元格所組成，通過指定“項(xiàng)目”所在的單元格做出各種各樣的布局。Grid組件一般和子組件GridItem一起使用，Grid列表中的每一個(gè)條目對(duì)應(yīng)一個(gè)GridItem組件。
使用ForEach渲染網(wǎng)格布局
和List組件一樣，Grid組件也可以使用ForEach來渲染多個(gè)列表項(xiàng)GridItem，我們通過下面的這段示例代碼來介紹Grid組件的使用。
@Entry
@Component
struct GridExample {
// 定義一個(gè)長度為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個(gè)GridItem列表項(xiàng)。同時(shí)設(shè)置columnsTemplate的值為’1fr 1fr 1fr 1fr’，表示這個(gè)網(wǎng)格為4列，將Grid允許的寬分為4等分，每列占1份；rowsTemplate的值為’1fr 1fr 1fr 1fr’，表示這個(gè)網(wǎng)格為4行，將Grid允許的高分為4等分，每行占1份。這樣就構(gòu)成了一個(gè)4行4列的網(wǎng)格列表，然后使用columnsGap設(shè)置列間距為10vp，使用rowsGap設(shè)置行間距也為10vp。示例代碼效果圖如下：
上面構(gòu)建的網(wǎng)格布局使用了固定的行數(shù)和列數(shù)，所以構(gòu)建出的網(wǎng)格是不可滾動(dòng)的。然而有時(shí)候因?yàn)閮?nèi)容較多，我們通過滾動(dòng)的方式來顯示更多的內(nèi)容，就需要一個(gè)可以滾動(dòng)的網(wǎng)格布局。我們只需要設(shè)置rowsTemplate和columnsTemplate中的一個(gè)即可。 將示例代碼中GridItem的高度設(shè)置為固定值，例如100；僅設(shè)置columnsTemplate屬性，不設(shè)置rowsTemplate屬性，就可以實(shí)現(xiàn)Grid列表的滾動(dòng)：
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)聽列表的滾動(dòng)。文章來源：http://www.zghlxwxcb.cn/news/detail-815120.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-815120.html
到了這里，關(guān)于鴻蒙開發(fā)實(shí)戰(zhàn)-（ArkUI）List組件和Grid組件的使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
