色哟哟视频在线观看-色哟哟视频在线-色哟哟欧美15最新在线-色哟哟免费在线观看-国产l精品国产亚洲区在线观看-国产l精品国产亚洲区久久

0
  • 聊天消息
  • 系統消息
  • 評論與回復
登錄后你可以
  • 下載海量資料
  • 學習在線課程
  • 觀看技術視頻
  • 寫文章/發帖/加入社區
會員中心
創作中心

完善資料讓更多小伙伴認識你,還能領取20積分哦,立即完善>

3天內不再提示

鴻蒙ListContainer粘性頭部裝飾器組件

OpenHarmony技術社區 ? 來源:HarmonyOS技術社區 ? 作者:開鴻HarmonyOS ? 2021-10-19 09:06 ? 次閱讀

這是一個 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

責任編輯:haq
聲明:本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人,不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用,如有內容侵權或者其他違規問題,請聯系本站處理。 舉報投訴
  • 操作系統
    +關注

    關注

    37

    文章

    6808

    瀏覽量

    123291
  • 鴻蒙系統
    +關注

    關注

    183

    文章

    2634

    瀏覽量

    66308
  • HarmonyOS
    +關注

    關注

    79

    文章

    1974

    瀏覽量

    30148

原文標題:鴻蒙粘性頭部裝飾器組件,已開源!

文章出處:【微信號:gh_834c4b3d87fe,微信公眾號:OpenHarmony技術社區】歡迎添加關注!文章轉載請注明出處。

收藏 人收藏

    評論

    相關推薦

    基于鴻蒙Next模擬掃圖識物的一個過程

    :’, JSON.stringify(err) ?? ‘’) }); }復制復制 六、代碼結構及原理:1.整體結構: 使用了ArkTS的裝飾語法,如@Entry和@Component。2.狀態管理: 組件
    發表于 08-21 15:04

    鴻蒙基礎組件:AlphabetIndexer

    可以與容器組件聯動用于按邏輯結構快速定位容器顯示區域的組件
    的頭像 發表于 06-19 09:30 ?311次閱讀
    <b class='flag-5'>鴻蒙</b>基礎<b class='flag-5'>組件</b>:AlphabetIndexer

    HarmonyOS實戰開發-深度探索與打造個性化自定義組件

    今天分享一下 什么是自定義組件?及其自定義組件的實戰。 做過前端或者android開發的都知道自定義組件鴻蒙中顯示在界面上的UI都稱為組件
    發表于 05-08 16:30

    鴻蒙OS開發實例:【ArkTS類庫多線程@Concurrent裝飾校驗并發函數】

    在使用TaskPool時,執行的并發函數需要使用該裝飾修飾,否則無法通過相關校驗。從API version 9開始,該裝飾支持在ArkTS卡片中使用。
    的頭像 發表于 04-02 14:45 ?668次閱讀
    <b class='flag-5'>鴻蒙</b>OS開發實例:【ArkTS類庫多線程@Concurrent<b class='flag-5'>裝飾</b><b class='flag-5'>器</b>校驗并發函數】

    鴻蒙OS開發實例:【裝飾@Observed@ObjectLink】

    加深對@Observed@ObjectLink 裝飾器使用的理解,以小故事做注釋
    的頭像 發表于 03-28 17:05 ?1004次閱讀
    <b class='flag-5'>鴻蒙</b>OS開發實例:【<b class='flag-5'>裝飾</b><b class='flag-5'>器</b>@Observed@ObjectLink】

    鴻蒙原生應用開發-ArkTS語言基礎類庫多線程@Concurrent裝飾校驗并發函數

    在使用TaskPool時,執行的并發函數需要使用該裝飾修飾,否則無法通過相關校驗。從API version 9開始,該裝飾支持在ArkTS卡片中使用。
    發表于 03-18 10:30

    那些杠鴻蒙的現在怎么樣了?

    。去掉了傳統的Linux內核以及AOSP等代碼,減少了40%的冗余代碼。 2、200家頭部互聯網大廠參與原生開發合作,并給開發者提供了高效的全鏈路開發工具,進一步加速鴻蒙原生應用開發。 3、鴻蒙校園
    發表于 02-16 22:03

    OpenHarmony父子組件單項同步使用:@Prop裝飾

    @Prop裝飾的變量可以和父組件建立單向的同步關系。@Prop裝飾的變量是可變的,但是變化不會同步回其父組件。 說明: 從API version 9開始,該
    的頭像 發表于 02-03 10:57 ?410次閱讀
    OpenHarmony父子<b class='flag-5'>組件</b>單項同步使用:@Prop<b class='flag-5'>裝飾</b><b class='flag-5'>器</b>

    OpenHarmony 定義擴展組件樣式:@Extend 裝飾

    說明: 從 API version 9 開始,該裝飾支持在 ArkTS 卡片中使用。 裝飾器使用說明 語法 ? @Extend(UIComponentName) function
    的頭像 發表于 02-01 20:53 ?269次閱讀

    多家頭部企業宣布「啟動鴻蒙原生應用開發」,你看好鴻蒙系統走向「獨立」嗎?

    鴻蒙生態迎「關鍵一戰」,多家頭部企業宣布「啟動鴻蒙原生應用開發」,你看好鴻蒙系統走向「獨立」嗎?
    的頭像 發表于 01-24 11:47 ?560次閱讀
    多家<b class='flag-5'>頭部</b>企業宣布「啟動<b class='flag-5'>鴻蒙</b>原生應用開發」,你看好<b class='flag-5'>鴻蒙</b>系統走向「獨立」嗎?

    鴻蒙開發教程-管理組件狀態

    組件層級雙向同步狀態是指@Provide修飾的狀態變量自動對提供者組件的所有后代組件可用,后代組件通過使用@Consume裝飾的變量來獲得
    的頭像 發表于 01-22 21:46 ?1321次閱讀
    <b class='flag-5'>鴻蒙</b>開發教程-管理<b class='flag-5'>組件</b>狀態

    鴻蒙ArkUI開發-Tabs組件的使用

    鴻蒙ArkUI開發-Tabs組件的使用
    的頭像 發表于 01-19 16:01 ?1881次閱讀
    <b class='flag-5'>鴻蒙</b>ArkUI開發-Tabs<b class='flag-5'>組件</b>的使用

    鴻蒙開發-ArkUI 組件基礎

    1 組件介紹 組件(Component)是界面搭建與顯示的最小單位,HarmonyOS ArkUI聲明式開發范式為開發者提供了豐富多樣的UI組件,我們可以使用這些組件輕松的編寫出更加豐
    發表于 01-17 19:31

    鴻蒙開發OpenHarmony組件復用案例

    ,下面分享一張鴻蒙4.0的學習路線圖 :(略縮版) 高清完整版可以在主頁保存↓↓↓ (附文檔鴻蒙4.0) 注意事項 @Reusable之前的裝飾的名稱為@Recycle,舊名稱
    發表于 01-15 17:37

    鴻蒙開發基礎-Web組件之cookie操作

    : CookieOperation.VERIFY_COOKIE, isNeedDivider: false }) } ... } ... 自定義組件LinkButton由Text組件和Divider分隔
    發表于 01-14 21:31
    主站蜘蛛池模板: 美女脱得只剩皮肤| 草莓西瓜樱桃香蕉直播视频| 羞羞影院午夜男女爽爽影院网站| 男女久久久国产一区二区三区| 灰原哀被啪漫画禁漫| 国产1广场舞丰满老女偷| 边做边爱免费视频播放| www国产av偷拍在线播放| 99热6精品视频6| 99精品国产福利在线观看| 97se se| 97ganmeizi| MMM日本兽交| yellow日本动漫高清| NANANA在线观看高清影院| 被男按摩师添的好爽在线直播| 超碰免费碰免费视频| 大香交伊人| 国产高潮国产高潮久久久久久| 俄罗斯aaaaa一级毛片| 调教椅上的调教SM总裁被调教| 北原夏美 快播| 灌满内射HP1V1| 国产精品久久久亚洲偷窥女厕| 国产精品一国产精品免费| 国产又黄又硬又粗 | 午夜天堂AV久久久噜噜噜| 午夜性伦鲁啊鲁免费视频| 亚洲国产精品特色大片观看| 亚洲欧美国产旡码专区| 在线免费福利| 99视频在线观看免费| 大胆国模一区二区三区伊人 | 曰本熟妇乱妇色A片在线| 最近高清中文字幕无吗免费看| 99久久久久精品国产免费麻豆| 超碰97免费人妻| 国产亚洲精品成人AV久久| 久久受www免费人成_看片中文| 裸妇厨房风流在线观看| 秋霞电影网午夜鲁丝片|