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

原理解析

UI 顯示部分如下圖所示，基礎布局采用 TabList+PageSlider 聯動，實現翻頁滑動效果，TabList 實現 page 頁 title 自定義顯示，PageSlider 通過加載不同的布局顯示對應滑動列表。

單個 page 頁面中采用 ListContainer+Text，header 頭部是使用懸停的 Text 控件來顯示的，根據需要顯示的頭部類型來加載 Text 控件數量。

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

滑動處理邏輯如下：

• 首先在滑動監聽接口中通過獲取觸摸點 Y 坐標值 point.getY() 來判斷上下滑動方向。

• 通過 Header 頭部類型判斷需要執行的代碼邏輯，僅在需要更新 herader 頭部顯示時添加移動動畫效果。

不同 header 頭部類型滑動事件的處理思路是一樣的，單頭部 StickyHeader 邏輯如下：

• 假設 herader 頭部高度為 Y，列表單個 Item 高度為 Y，當觸發列表向上滾動且當前列表顯示在屏幕中的第二個 Item 是新的 Header 數據時，開始對 Text 控件執行向上滑動的動畫效果。

• 當觸發列表向下滾動且當前列表顯示在屏幕中的第一個 Item 是新的 Header 數據時，開始對 Text 控件執行向下滑動的動畫效果。在滑動過程中，通過獲取指定 Item.getTop() 與 Header 頭部高度 Y 的差值。

• 確定 Text 控件每次需要移動的 Y 軸坐標 moveY，該區間值 moveY 是 0 到 -Y 之間。最后通過調用 setContentPositionY() 方法實現控件滑動動畫。

使用說明

Java 調用示例：

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

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

該三方庫目前已經在 gitee 上開源并且發布 lib 倉庫，可以在 moudle 級別下的 build.gradle 文件中添加依賴。

复制//添加maven倉庫
repositories{
maven{
url'https://s01.oss.sonatype.org/content/repositories/releases/'
}
}

//添加依賴庫
dependencies{
implementation'com.gitee.chinasoft_ohos1.0.0'
}

源碼下載

以上就是 Header-Decor 的介紹，代碼已經開源到header-decor，歡迎各位下載使用并提出寶貴意見！

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