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

HarmonyOS

FengTianYa

2024-09-26 12:48:13

浏览

回答 2

按赞同

按时间

鱼弦CTO

在HarmonyOS中，通过自定义SubTabBarStyle，你可以设置选中Tab的字体大小和颜色。以下是一个示例，展示如何自定义SubTabBarStyle来实现这一需求。

### 示例代码

#### 1. 定义自定义样式首先，定义一个自定义样式文件（例如styles.ets），包括未选中和选中的字体样式。

// styles.ets
export const normalTabStyle = {
  fontSize: '16px', // 未选中时的字体大小
  color: '#666666', // 未选中时的字体颜色
};

export const selectedTabStyle = {
  fontSize: '18px', // 选中时的字体大小
  color: '#FF0000', // 选中时的字体颜色
};1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

#### 2. 创建SubTabBar组件然后，在你的ETS文件中使用这些样式。

import { normalTabStyle, selectedTabStyle } from './styles';

@Component
struct CustomSubTabBar {
  @State selectedIndex: number = 0;

  private tabs: string[] = ['Tab 1', 'Tab 2', 'Tab 3'];

  build() {
    Column() {
      SubTabBar({ indicatorType: SubTabBarIndicatorType.NONE }) {
        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)
          }
        })
      }
    }
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

### 解释

样式定义：

normalTabStyle 和selectedTabStyle 分别定义了未选中和选中状态下的字体大小和颜色。

CustomSubTabBar 组件：

使用@State selectedIndex来跟踪哪个Tab被选中。
ForEach循环生成每个Tab项。
在Text组件中，根据selectedIndex的值来应用不同的样式。

### 完整示例

以下是完整的代码，将上述片段组合到一个完整的ETS文件中：

import { normalTabStyle, selectedTabStyle } from './styles';

@Component
struct CustomSubTabBar {
  @State selectedIndex: number = 0;

  private tabs: string[] = ['Tab 1', 'Tab 2', 'Tab 3'];

  build() {
    Column() {
      SubTabBar({ indicatorType: SubTabBarIndicatorType.NONE }) {
        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)
          }
        })
      }
    }
  }
}

// styles.ets
export const normalTabStyle = {
  fontSize: '16px',
  color: '#666666',
};

export const selectedTabStyle = {
  fontSize: '18px',
  color: '#FF0000',
};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.

通过这种方式，你可以根据选中状态动态改变每个Tab的字体大小和颜色，实现自定义的视觉效果。如果有更多问题或特殊需求，请随时提问。

2024-09-26 19:21:32

Heiang

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

TabContent() {  
  Column().width('100%').height('100%').backgroundColor(Color.Yellow)  
}.tabBar(new SubTabBarStyle('Yellow1').labelStyle({ font: {weight:FontWeight.Bold,style:FontStyle.Italic} }))1.
2.
3.

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

参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-tabcontent-V5#%E7%A4%BA%E4%BE%8B2

2024-09-26 17:12:08

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

发布

51CTO

51CTO博客

51CTO学堂

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

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