HarmonyOS 鸿蒙Next SubTabBarStyle如何自定义选中tab字体大小，颜色

SubTabBarStyle在tab选中时，无法找到定义字体大小，颜色的API

vueper 1楼•4 天前

目前SubTabBarStyle可以通过labelStyle属性定义字体大小

TabContent() {

Column().width('100%').height('100%').backgroundColor(Color.Yellow)

}.tabBar(new SubTabBarStyle('Yellow1').labelStyle({ font: {weight:FontWeight.Bold,style:FontStyle.Italic} }))

颜色目前是只可以使用默认颜色的，如果要自定义最好使用tabcontent

eggper 2楼•4 天前

在HarmonyOS鸿蒙Next中，自定义SubTabBarStyle以更改选中Tab的字体大小和颜色，可以通过以下步骤实现：

首先，在ETS文件中定义自定义样式，包括未选中和选中状态的字体大小和颜色。例如：

export const normalTabStyle = { fontSize: '16px', color: '#666666' };
export const selectedTabStyle = { fontSize: '18px', color: '#FF0000' };

然后，在组件中使用这些样式。通过@State变量跟踪选中的Tab，并在TabContent的Text组件中动态应用这些样式。例如：

@Component struct CustomSubTabBar {
    @State selectedIndex: number = 0;
    private tabs: string[] = ['Tab 1', 'Tab 2', 'Tab 3'];
    build() {
        Column() {
            SubTabBar() {
                ForEach(this.tabs, (tab, index) => {
                    TabContent(index: index) {
                        Text(tab)
                            .fontSize(this.selectedIndex === index ? selectedTabStyle.fontSize : normalTabStyle.fontSize)
                            .fontColor(this.selectedIndex === index ? selectedTabStyle.color : normalTabStyle.color)
                            .onClick(() => this.selectedIndex = index)
                    }
                })
            }
        }
    }
}

这样，你就可以根据Tab的选中状态动态更改字体大小和颜色了。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。