鸿蒙HarmonyOS开发底部导航栏TabList+Fraction_harmony开发 js 配置底部导航

先给大家看看效果：

• 这次要做的是失物招领的项目，鸿蒙开发现在都还算摸索阶段，希望大家能把自己的想法都发出来相互交流。

上代码

MainAbility.java

public class MainAbility extends FractionAbility {
    private  String[] str={"失物","拾物","发现","我的"};
    private TabList tabList;
    private StackLayout stackLayout;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setMainRoute(MainAbilitySlice.class.getName());
        setUIContent(ResourceTable.Layout_ability_main);
        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 FoundFraction())
                        .submit();


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

                break;
            case 3:
                getFractionManager()
                        .startFractionScheduler()
                        .replace(ResourceTable.Id_stack_layout, new MeFraction())
                        .submit();

                break;
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

ability_admin_main

<?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"
    ohos:scrollbar_background_color="#b5c8c6">

    <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="#f4f0ef"
        ohos:selected_text_color="#d2887b"
        ohos:selected_tab_indicator_color="#f4f0ef"
        ohos:selected_tab_indicator_height="0vp"
        ohos:text_size="16vp"
        ohos:fixed_mode="true"
        ohos:align_parent_bottom="true"
        ohos:background_element="#afb1b0"/>

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

</DependentLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

• 在我的个人理解中Fraction是依赖于Ability的，接下来创建Fraction。
  

MeFraction.java

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

    @Override
    protected void onStart(Intent intent) {
        super.onStart(intent);
        Button btn_me_login=(Button)getFractionAbility().findComponentById(ResourceTable.Id_btn_me_login);
        }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

• 这里主要是要继承Fraction，其他的页面也是一样创建。

最后这里我有一个小问题，就是不知道如何从Ability有参跳转到Fraction页面，如果有想法的小伙伴可以在评论区留言。

参考链接