這是一個(gè) ListContainer 的粘性頭部裝飾器組件，主要用于展示列表+粘性頭部的滑動(dòng)效果。

原理解析

單個(gè) page 頁(yè)面中采用 ListContainer+Text，header 頭部是使用懸停的 Text 控件來(lái)顯示的，根據(jù)需要顯示的頭部類(lèi)型來(lái)加載 Text 控件數(shù)量。

這里需要注意：HarmonyOS SDK 6 及之前版本仍不支持 PageSlider 添加 Fraction，故采用 PageSlider 添加 ComponentContainer 方式實(shí)現(xiàn)相似效果。

滑動(dòng)處理邏輯如下：

• 首先在滑動(dòng)監(jiān)聽(tīng)接口中通過(guò)獲取觸摸點(diǎn) Y 坐標(biāo)值 point.getY() 來(lái)判斷上下滑動(dòng)方向。

• 通過(guò) Header 頭部類(lèi)型判斷需要執(zhí)行的代碼邏輯，僅在需要更新 herader 頭部顯示時(shí)添加移動(dòng)動(dòng)畫(huà)效果。

不同 header 頭部類(lèi)型滑動(dòng)事件的處理思路是一樣的，單頭部 StickyHeader 邏輯如下：

• 假設(shè) herader 頭部高度為 Y，列表單個(gè) Item 高度為 Y，當(dāng)觸發(fā)列表向上滾動(dòng)且當(dāng)前列表顯示在屏幕中的第二個(gè) Item 是新的 Header 數(shù)據(jù)時(shí)，開(kāi)始對(duì) Text 控件執(zhí)行向上滑動(dòng)的動(dòng)畫(huà)效果。

• 當(dāng)觸發(fā)列表向下滾動(dòng)且當(dāng)前列表顯示在屏幕中的第一個(gè) Item 是新的 Header 數(shù)據(jù)時(shí)，開(kāi)始對(duì) Text 控件執(zhí)行向下滑動(dòng)的動(dòng)畫(huà)效果。在滑動(dòng)過(guò)程中，通過(guò)獲取指定 Item.getTop() 與 Header 頭部高度 Y 的差值。

• 確定 Text 控件每次需要移動(dòng)的 Y 軸坐標(biāo) moveY，該區(qū)間值 moveY 是 0 到 -Y 之間。最后通過(guò)調(diào)用 setContentPositionY() 方法實(shí)現(xiàn)控件滑動(dòng)動(dòng)畫(huà)。

使用說(shuō)明

Java 調(diào)用示例：

使用1:
//獲取ListContainer
ListContainerlistContainer=(ListContainer)rootView.findComponentById(ResourceTable.Id_list_double_inline);
//需要的數(shù)據(jù)
ListdataList=Utils.getDoubleInlineList();
listContainer.setItemProvider(newInlineDoubleHeaderTestAdapter(context,dataList));
//將TextListContainer列表與HeaderDecor進(jìn)行綁定
HeaderDecorheaderDecor=newHeaderDecor(listContainer,headerText,doubleText);
//headerDecor調(diào)用setDataList()方法即可
headerDecor.setDataList(dataList);

使用2:
Texttext=(Text)rootView.findComponentById(ResourceTable.Id_title_text);
//獲取ListContainer
ListContainerlistContainer=(ListContainer)rootView.findComponentById(ResourceTable.Id_list_sticky_inline);
//需要的數(shù)據(jù)
ListdataList=Utils.getStickyInlineList();
listContainer.setItemProvider(newInlineStickyTestAdapter(context,dataList));
//將TextListContainer列表與HeaderDecor進(jìn)行綁定
HeaderDecorheaderDecor=newHeaderDecor(listContainer,text);
//headerDecor調(diào)用setDataList()方法即可
headerDecor.setDataList(dataList);

該三方庫(kù)目前已經(jīng)在 gitee 上開(kāi)源并且發(fā)布 lib 倉(cāng)庫(kù)，可以在 moudle 級(jí)別下的 build.gradle 文件中添加依賴(lài)。

//添加maven倉(cāng)庫(kù)
repositories{
maven{
url'https://s01.oss.sonatype.org/content/repositories/releases/'
}
}

//添加依賴(lài)庫(kù)
dependencies{
implementation'com.gitee.chinasoft_ohos1.0.0'
}

源碼下載

以上就是 Header-Decor 的介紹，代碼已經(jīng)開(kāi)源到header-decor，歡迎各位下載使用并提出寶貴意見(jiàn)！

https://gitee.com/chinasoft2_ohos/header-decor