鸿蒙HarmonyOS开发 TabList+Fraction实现底部栏切换，尝试用鸿蒙实现自己项目的底部栏效果

先上效果， （暂时没找到合适的带图标的底部栏，要是带图标只能先写布局切换吧，来自萌新的小声bb）

、

fraction和android里面的fragment类似，具体实现看代码

FractionAbility完整代码

public class ButtomaTabFractionAbility extends FractionAbility {

    private  String[] str={"首页","发现","我的"};
    private TabList tabList;
    private StackLayout stackLayout;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setMainRoute(ButtomaTabFractionAbilitySlice.class.getName());
        setUIContent(ResourceTable.Layout_ability_buttoma_tab_fraction);
        initView();
    }


    private void initView(){
        tabList = (TabList) findComponentById(ResourceTable.Id_tab_list_bottom);
        stackLayout = (StackLayout) findComponentById(ResourceTable.Id_stack_layout);


        for (int i = 0; i < str.length; i++) {
            TabList.Tab tab = tabList.new Tab(getContext());
            tab.setText(str[i]);
            tabList.addTab(tab);
        }

        tabList.setFixedMode(true);
        //默认第一个被选中
        tabList.getTabAt(0).select();
        switchPage(0);
           /* tabList.setTabLength(100); // 设置Tab的宽度
            tabList.setTabMargin(20); // 设置两个Tab之间的间距*/
        tabList.addTabSelectedListener(new TabList.TabSelectedListener() {
            @Override
            public void onSelected(TabList.Tab tab) {
                // 当某个Tab从未选中状态变为选中状态时的回调
                switchPage(tab.getPosition());
            }
            @Override
            public void onUnselected(TabList.Tab tab) {
                // 当某个Tab从选中状态变为未选中状态时的回调

            }
            @Override
            public void onReselected(TabList.Tab tab) {
                // 当某个Tab已处于选中状态，再次被点击时的状态回调

            }
        });
    }

    //模块页面切换
    public  void  switchPage(int  position){
        switch (position){
            case 0:
                getFractionManager()
                        .startFractionScheduler()
                        .replace(ResourceTable.Id_stack_layout, new HomeFraction())
                        .submit();

                break;
            case 1:
                getFractionManager()
                        .startFractionScheduler()
                        .replace(ResourceTable.Id_stack_layout, new DiscoverFraction())
                        .submit();


                break;
            case 2:
                getFractionManager()
                        .startFractionScheduler()
                        .replace(ResourceTable.Id_stack_layout, new MyCenterFraction())
                        .submit();

                break;
        }
    }


}

ability_buttoma_tab_fraction.xml布局代码

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

    <TabList
        ohos:id="$+id:tab_list_bottom"
        ohos:height="60vp"
        ohos:width="match_parent"
        ohos:layout_alignment="center"
        ohos:orientation="horizontal"
        ohos:text_alignment="center"
        ohos:normal_text_color="#999999"
        ohos:selected_text_color="#afaafa"
        ohos:selected_tab_indicator_color="#afaafa"
        ohos:selected_tab_indicator_height="0vp"
        ohos:text_size="16vp"
        ohos:fixed_mode="true"
        ohos:align_parent_bottom="true"/>

    <StackLayout
        ohos:id="$+id:stack_layout"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:text_color="$color:grey"
        ohos:background_element="$color:pink"
        ohos:text_size="20vp"
        ohos:layout_alignment="center"
        ohos:text_alignment="center"
        ohos:above="$id:tab_list_bottom"/>

</DependentLayout>

首页HomeFraction代码

public class HomeFraction extends Fraction {
    @Override
    protected Component onComponentAttached(LayoutScatter scatter, ComponentContainer container, Intent intent) {
        Component component=scatter.parse(ResourceTable.Layout_homepage_layout,container,false);
        return  component;
    }

    @Override
    protected void onStart(Intent intent) {
        super.onStart(intent);
    }
}

homepage_layout.xml代码

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">
    <!--可加想要实现的布局内容-->
    <Text
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:text="首页详情页面"
        ohos:text_alignment="center"
        ohos:text_size="16vp"
        ohos:background_element="$color:pink"/>
</DirectionalLayout>

 DiscoverFraction和MyCenterFraction同理HomeFraction

如果各位大佬有更好的方案或者其他问题欢迎留言交流，共同学习

Fraction详细介绍及使用，华为官网地址：文档中心

源码下载地址：

MyFirstHsDemo.rar-其它文档类资源-CSDN下载