鴻蒙開發：如何實現列表吸頂

前言

本文基于Api13

列表吸頂功能，在實際的開發中有著很大的作用，比如可以讓列表層級之間更加分明，減少一定程度上的視覺混亂，由于吸頂的標題會隨著滾動固定在頂部，可以讓用戶無需反復滑動回頂部確認分組位置，方便實時定位當前分組，可以說還是非常方便的；常見的場景有聯系人的頁面，電商軟件的購物車等。

鴻蒙當中實現一個列表吸頂，很是簡單，官方為我們提供了ListItemGroup組件，使用它，便可以輕松搞定，我們可以先來看一個簡單的案例：

interface CityData {name: string;address: string[];
}@Entry
@Component
struct Index {private cityData: CityData[] = [{name: '北京市',address: ['朝陽區', '東城區', '西城區']}, {name: '河北省',address: ['石家莊', '保定市', '唐山市']}, {name: '河南省',address: ['鄭州市', '商丘市', '洛陽市', '開封市']}, {name: '山西省',address: ['太原市', '晉城市', '大同市', '長治市']}]@BuilderitemHead(text: string) {Text(text).fontSize(18).height(40).fontColor(Color.White).backgroundColor(Color.Orange).width('100%')}//組件使用build() {Column() {List() {ForEach(this.cityData, (item: CityData) => {ListItemGroup({ header: this.itemHead(item.name) }) {ForEach(item.address, (address: string) => {ListItem() {Text(address).width("100%").height(80).fontSize(16).textAlign(TextAlign.Center)}}, (item: string) => item)}.divider({ strokeWidth: 1, color: Color.Gray })})}.width("100%").sticky(StickyStyle.Header).scrollBar(BarState.Off)}.width("100%").height("100%")}
}

運行之后，效果如下：

從以上的案例中我們可以看到，ListItemGroup組件是必須要結合List組件一起使用的，這一點一定要知曉，下面，針對ListItemGroup組件，我們就一起來探究一下吧。

ListItemGroup使用方式

通過源碼，我們可以看到，ListItemGroup組件接收了一個ListItemGroupOptions參數。

 /*** Called when interface is called.** @param { ListItemGroupOptions } options* @returns { ListItemGroupAttribute }* @syscap SystemCapability.ArkUI.ArkUI.Full* @crossplatform* @atomicservice* @since 11*/(options?: ListItemGroupOptions): ListItemGroupAttribute;

ListItemGroupOptions可選擇的屬性如下，一般最常用的就是header屬性，也就是吸頂時的標題欄組件。

名稱	類型	必填	說明
header	CustomBuilder	否	ListItemGroup頭部組件。
headerComponent13+	ComponentContent	否	使用ComponentContent類型參數設置ListItemGroup頭部組件。
footer	CustomBuilder	否	設置ListItemGroup尾部組件。
footerComponent13+	ComponentContent	否	使用ComponentContent類型參數設置ListItemGroup尾部組件。
space	number \| string	否	列表項間距。只作用于ListItem與ListItem之間，不作用于header與ListItem、footer與ListItem之間。默認值：0 單位：vp
style10+	ListItemGroupStyle	否	設置List組件卡片樣式。默認值：ListItemGroupStyle.NONE

我們可以把前言中的案例改造一下，加一個footer屬性：

ListItemGroup({header: this.itemHead(item.name),footer: this.itemFooter(item.address.length.toString())})

尾部組件視圖：

  @BuilderitemFooter(text: string) {Text("一共有" + text + "個地址").fontSize(18).height(20).fontColor(Color.White).backgroundColor(Color.Red).width('100%')}

運行之后，效果如下：

headerComponent和footerComponent參數，和header與footer功能一樣，都是用于頭或者尾組件，但是，他們的優先級高于后者，也就是如果你同時設置了他們，在實際的效果中會以前者為準。

headerComponent和footerComponent參數接收了一個ComponentContent參數，使用它，我們可以共用一個公共的視圖組件，因為它可以接受一個wrapBuilder參數。

比如上述的代碼，我們使用headerComponent代替header，運行之后可以發現，其實效果是一樣的。

 headerComponent: new ComponentContent(this.getUIContext(), wrapBuilder(buildHeader), item.name)

除此之外，還有一個style屬性，使用它，可以實現一個卡片樣式的效果：

 style: ListItemGroupStyle.CARD

設置后，會展示如下的卡片效果：

refresh庫實現

refresh庫是我開發的一個列表刷新加載庫，上架一年多來，已經有三萬多次的下載量，獲得了很多開發者的一致好評，如果您也感興趣，可以訪問如下的refresh庫地址，里面有詳細的使用方式：

https://ohpm.openharmony.cn/#/cn/detail/@abner%2Frefresh

使用刷新庫，實現一個列表吸頂也是非常的簡單，具體使用如下：

ListView({controller: this.controller, //刷新控制器itemGroupHeader: this.itemHead, //分組頭itemGroupData: this.cityData, //分組數據itemLayout: this.itemLayout, //內容視圖onRefresh: () => {setTimeout(() => {//模擬耗時this.controller.finishRefresh()}, 2000)},onLoadMore: () => {setTimeout(() => {//模擬耗時this.controller.finishLoadMore()}, 2000)}})

效果如下：