今天我想著配合鴻蒙里面提供的頂部切換控件 tablist，來實現頂部 tab 切換，然后下面多個 fraction 的效果。廢話不多說，我們正式開始。

效果圖如下：

具體實現

定 tablist 布局：

java 代碼邏輯，頂部標簽數據：

privateString[]str={"關注","推薦","熱點","問答"};

初始化 tab 并且添加頂部標簽文字：

privatevoidinitview(){
TabListtabList=(TabList)findComponentById(ResourceTable.Id_tab_list);
if(tabList!=null){
for(inti=0;i

	

	我們初始化 tablist 控件后，for 循環設置我們 tablist 的 tab，并添加到 tablist 組件的 addTab 方法中。

	①多個 fraction 切換邏輯：

	
privatevoidaddHomeFraction(){
getFractionManager()
.startFractionScheduler()
.add(ResourceTable.Id_mainstack,newAttentionFraction())
.submit();
}


publicvoidlayoutShow(intcode){
switch(code){
case0:
getFractionManager()
.startFractionScheduler()
.replace(ResourceTable.Id_mainstack,newAttentionFraction())
.submit();

break;
case1:
getFractionManager()
.startFractionScheduler()
.replace(ResourceTable.Id_mainstack,newRecommendFraction())
.submit();


break;
case2:
getFractionManager()
.startFractionScheduler()
.replace(ResourceTable.Id_mainstack,newHotspotFraction())
.submit();

break;
case3:
getFractionManager()
.startFractionScheduler()
.replace(ResourceTable.Id_mainstack,newQuestionFraction())
.submit();

break;
default:
break;
}
}

 這邊我們提供了一個 addHomeFraction 方法和 layoutShow 方法。  我們在進入 MainAbility 的時候調用 addHomeFraction 來加載第一個默認的 fraction。

	

	然后我們在點擊頂部的 tablist 標簽的時候，我們在 onSelected 回調方法中調用 layoutShow方法。

	
publicvoidonSelected(TabList.Tabtab){
//當某個Tab從未選中狀態變為選中狀態時的回調
System.out.println("當某個Tab從未選中狀態變為選中狀態時的回調");
layoutShow(tab.getPosition());
}


	

	我們只需要傳入 tab.getPosition() 點擊頂部標簽的下標即可，這樣依賴我們的 tablist 配合多個 fraction 切換功能就實現了。具體的 fraction 的內部邏輯我們簡單說一下。

	②關注模塊

	布局文件：

	








	

	java 邏輯代碼：

	
packagecom.example.tablist.fraction;
importcom.example.tablist.ResourceTable;
importcom.example.tablist.bean.PositionInfo;
importcom.example.tablist.config.Api;
importcom.example.tablist.provider.PositionProvider;
importcom.google.gson.Gson;
importohos.aafwk.ability.fraction.Fraction;
importohos.aafwk.content.Intent;
importohos.agp.components.Component;
importohos.agp.components.ComponentContainer;
importohos.agp.components.LayoutScatter;
importohos.agp.components.ListContainer;
importjava.util.List;
/***
*
*創建人：xuqing
*創建2021年2月28日1703
*類說明：關注模塊
*
*/
publicclassAttentionFractionextendsFraction{
privatePositionProviderpositionProvider;
privateListContainerlistContainer;
@Override
protectedComponentonComponentAttached(LayoutScatterscatter,ComponentContainercontainer,
Intentintent){
Componentcomponent=scatter.parse(ResourceTable.Layout_fraction_attention,container,false);
returncomponent;
}
protectedvoidonStart(Intentintent){
super.onStart(intent);
listContainer=(ListContainer)
getFractionAbility().findComponentById(ResourceTable.Id_jop_page_list);
getPostition();
}
publicvoidgetPostition(){
Gsongson=newGson();
PositionInfopositionInfo=gson.fromJson(Api.getPositioninfo(),PositionInfo.class);
Listlist=positionInfo.getData();
positionProvider=newPositionProvider(list,getFractionAbility());
listContainer.setItemProvider(positionProvider);
}
}


	

	 幾個 fraction 其實比較簡單，都是加載本地死數據顯示在 listContainer 控件上面。

	其他幾個 fraction 因為邏輯都差不多我這邊就不展開一個一個講，有興趣的同學可以下載完整代碼去查閱，鴻蒙到此 TabList 配合 Fraction 實現頂部切換效果就講完了。

	總結

	   鴻蒙里面提供了比較好用的 tablist 組件，我們只需要簡單的基本就能實現頂部 tab 的切換了。  然后配合 fraction 跟 Ability 進行綁定，但是我們的 Ability 需要繼承 FractionAbility。這樣我們就能完成 fraction 和 ability 的綁定。  我們在 tablist 的回調方法去調用我們替換 fraction 的方法就能實現頂部 tablist 點擊切換的時候下面的 fraction 跟著一起切換。

	更多的 tablist 和 fraction 的聯動效果同學們有興趣可以私下研究，我這邊篇幅有限就不展開講了。

	最后希望我的文章能幫助到各位解決問題，以后我還會貢獻更多有用的代碼分享給大家。

	項目地址：

	
https://gitee.com/qiuyu123/tablistcut


	

	

	原文標題：在鴻蒙上實現“頂部切換”效果

	文章出處：【微信公眾號：HarmonyOS技術社區】歡迎添加關注！文章轉載請注明出處。

	審核編輯：彭菁