HarmonyOS 需要一个Tabs使用SubTabBarStyle时的demo

需要一个Tabs使用SubTabBarStyle时的demo，需要使用SubTabBarStyle时能修改文字颜色，限制Tabbar最左侧和最右侧的滑动区域。

HarmonyOS

superinsect

2024-09-30 12:15:34

浏览

回答 2

待解决

回答 2

按赞同

按时间

鱼弦CTO

对于HarmonyOS，使用 Tabs 组件并应用 SubTabBarStyle 可以通过一些自定义样式来实现。下面是一个示例，它展示了如何创建一个带有子标签栏样式（SubTabBarStyle）的Tabs，并且修改文字颜色，同时限制Tabbar最左侧和最右侧的滑动区域。

### HarmonyOS Tabs with SubTabBarStyle

首先，我们需要确保已经安装了最新版本的 DevEco Studio 和相关的开发工具包。

#### Step 1: 创建一个新的HarmonyOS项目

#### Step 2: 修改布局文件 entry/src/main/resources/base/layout/your_layout_file.xml

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

    <Tabs
        ohos:id="$+id:tabs"
        ohos:width="match_parent"
        ohos:height="50vp"
        ohos:tab_mode="scrollable"
        ohos:text_color="#000000"
        ohos:sub_tab_bar_style="true"
        ohos:tab_indicator_color="#FF0000" />
    
    <TabList
        ohos:id="$+id:tab_list"
        ohos:width="match_parent"
        ohos:height="match_parent"/>
</DirectionalLayout>

#### Step 3: 在entry/src/main/java/your/package/path/MainAbilitySlice.java中初始化Tabs和TabList

package your.package.path;

import ohos.aafwk.ability.delegation.AbilityDelegatorRegistry;
import ohos.aafwk.content.Intent;
import ohos.agp.components.TabList;
import ohos.agp.components.TabList.Tab;
import ohos.agp.components.ComponentContainer.LayoutConfig;
import ohos.agp.utils.Color;
import ohos.app.Context;
import ohos.bundle.IBundleManager;
import ohos.security.SystemPermission;
import ohos.utils.zson.ZSONObject;

public class MainAbilitySlice extends AbilitySlice {

    private static final String[] TAB_NAMES = {"Tab 1", "Tab 2", "Tab 3"};

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_your_layout_file);

        TabList tabList = (TabList) findComponentById(ResourceTable.Id_tab_list);
        initTabs(tabList);

        // Set text color and style for each tab
        for (int i = 0; i < tabList.getTabCount(); i++) {
            Tab tab = tabList.getTabAt(i);
            tab.setTextColor(Color.BLACK);
        }
        
        // Limiting the swipe area
        tabList.setOnTabSelectedListener(new TabList.OnTabSelectedListener() {
            @Override
            public void onSelected(Tab tab) {
                if (tab.getPosition() == 0 || tab.getPosition() == TAB_NAMES.length - 1) {
                    tabList.setTouchable(false); // Disable touch when on first or last tab
                } else {
                    tabList.setTouchable(true); // Enable touch otherwise
                }
            }

            @Override
            public void onUnselected(Tab tab) {}

            @Override
            public void onReselected(Tab tab) {}
        });
    }

    private void initTabs(TabList tabList) {
        for (String tabName : TAB_NAMES) {
            Tab tab = tabList.new Tab(this).setText(tabName);
            tabList.addTab(tab);
        }
    }
}

在这个示例中：

我们定义了一个简单的UI布局，其中包含一个Tabs 组件和一个TabList 组件。
在MainAbilitySlice 中，我们初始化了TabList 并为每个标签设置了文本颜色。
使用setOnTabSelectedListener 方法来限制最左侧和最右侧标签的滑动区域。

这种方法可以根据你的实际需求进行更多定制和扩展。

2024-09-30 15:51:40

put_get

1、关于使用SubTabBarStyle时能修改文字颜色，可参考API：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-tabcontent-V5#labelstyle10对象说明

给SubTabBarStyle设置LabelStyle属性，然后可以调整选中和非选中状态下的文字颜色。

2、限制Tabbar最左侧和最右侧的滑动区域，使用了gesture手势方法处理，可参考手势操作API：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-gestures-pangesture-V5

参考demo：

@State currentIndex: number = 0  
      Tabs({ barPosition: BarPosition.End,  
        controller: this.controller,  
        index: $$this.currentIndex  
      }) {  
        TabContent() {  
          Column().width('100%').height('100%').backgroundColor(Color.Pink)  
        }.tabBar(  
          SubTabBarStyle.of("pink")  
        )  
        //todo 最左侧设置仅可向右拖动手势  
        .gesture(  
          PanGesture({direction:PanDirection.Right})  
        )  
        TabContent() {  
          Column().width('100%').height('100%').backgroundColor(Color.Yellow)  
        }.tabBar(SubTabBarStyle.of("Yellow"))  
        TabContent() {  
          Column().width('100%').height('100%').backgroundColor(Color.Blue)  
        }.tabBar(SubTabBarStyle.of("Blue"))  
        TabContent() {  
          Column().width('100%').height('100%').backgroundColor(Color.Green)  
        }.tabBar(SubTabBarStyle.of("Green"))  
        TabContent() {  
          Column().width('100%').height('100%').backgroundColor(Color.Pink)  
        }.tabBar(SubTabBarStyle.of("pink"))  
        TabContent() {  
          Column().width('100%').height('100%').backgroundColor(Color.Yellow)  
        }.tabBar(SubTabBarStyle.of("Yellow"))  
        TabContent() {  
          Column().width('100%').height('100%').backgroundColor(Color.Blue)  
        }.tabBar(SubTabBarStyle.of("Blue"))  
        TabContent() {  
          Column().width('100%').height('100%').backgroundColor(Color.Green)  
        }.tabBar(SubTabBarStyle.of("Green"))  
        TabContent() {  
          Column().width('100%').height('100%').backgroundColor(Color.Pink)  
        }.tabBar(SubTabBarStyle.of("Pink"))  
        TabContent() {  
          Column().width('100%').height('100%').backgroundColor(Color.Yellow)  
        }.tabBar(SubTabBarStyle.of("Yellow"))  
        TabContent() {  
          Column().width('100%').height('100%').backgroundColor(Color.Blue)  
        }.tabBar(SubTabBarStyle.of("Blue"))  
        TabContent() {  
          Column().width('100%').height('100%').backgroundColor(Color.Green)  
        }.tabBar(SubTabBarStyle.of("Green"))  
        .gesture(  
          PanGesture({direction:PanDirection.Right})  
        )  
        TabContent() {  
          Column().width('100%').height('100%').backgroundColor(Color.Pink)  
        }.tabBar('pink')  
        //todo 最右侧设置仅可向左拖动手势  
        .gesture(  
          PanGesture({direction:PanDirection.Right})  
        )  
      }

2024-09-30 17:46:47

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 需要一个Tabs使用SubTabBarStyle时的demo

订阅鸿蒙技术特刊，精选内容抢先看