前言

本文基于Api13

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

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

interface CityData {
  name: string;
  address: string[];
}

@Entry
@Component
struct Index {
  private cityData: CityData[] = [
    {
      name: '北京市',
      address: ['朝陽區(qū)', '東城區(qū)', '西城區(qū)']
    }, {
    name: '河北省',
    address: ['石家莊', '保定市', '唐山市']
  }, {
    name: '河南省',
    address: ['鄭州市', '商丘市', '洛陽市', '開封市']
  }, {
    name: '山西省',
    address: ['太原市', '晉城市', '大同市', '長治市']
  }
  ]

  @Builder
  itemHead(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組件是必須要結(jié)合List組件一起使用的，這一點一定要知曉，下面，針對ListItemGroup組件，我們就一起來探究一下吧。

ListItemGroup使用方式

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

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

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

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

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

尾部組件視圖：

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

運行之后，效果如下：

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

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

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

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

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

 style: ListItemGroupStyle.CARD

設(shè)置后，會展示如下的卡片效果：

refresh庫實現(xiàn)

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

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

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

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

效果如下：

相關(guān)總結(jié)

ListItemGroup組件的使用，可以說是非常的簡單，如果僅僅是普通的吸頂，建議直接使用即可，如果您需要帶有下拉刷新和上拉加載效果的，可以使用refresh組提供的，在使用原生的時候，有一點需要注意，那就是需要設(shè)置List組件的sticky屬性，否則吸頂效果是不生效的。

.sticky(StickyStyle.Header|StickyStyle.Footer)

StickyStyle屬性介紹如下：

本文標(biāo)簽：HarmonyOS/ArkUI