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

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

HarmonyOS
2024-09-26 12:48:13
浏览
收藏 0
回答 2
待解决
回答 2
按赞同
/
按时间
鱼弦CTO
1

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

### 示例代码

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

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

export const selectedTabStyle = {
  fontSize: '18px', // 选中时的字体大小
  color: '#FF0000', // 选中时的字体颜色
};

#### 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. 样式定义
  • ​normalTabStyle​​ 和​​selectedTabStyle​​ 分别定义了未选中和选中状态下的字体大小和颜色。
  1. 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',
};

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

分享
微博
QQ
微信
回复
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} }))

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

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

分享
微博
QQ
微信
回复
2024-09-26 17:12:08
相关问题
HarmonyOS 字体大小如何设置?
448浏览 • 1回复 待解决
如果改变 SubTabBarStyle字体颜色
876浏览 • 1回复 待解决
HarmonyOS 怎么获取系统字体大小
493浏览 • 1回复 待解决
HarmonyOS 如何自定义tab
401浏览 • 2回复 待解决
HarmonyOS 如何设置自定义字体
815浏览 • 1回复 待解决
鸿蒙IndexBar如何设置字体大小
6860浏览 • 1回复 待解决
应用内字体大小设置调整
266浏览 • 1回复 待解决
HarmonyOS 字体大小适配方案
509浏览 • 1回复 待解决
HarmonyOS 使用自定义字体
227浏览 • 1回复 待解决
如何自定义字体替换系统字体
401浏览 • 1回复 待解决
全局设置字体大小方案咨询
407浏览 • 1回复 待解决
HarmonyOS 应用内字体大小调节
518浏览 • 1回复 待解决
ArkUI中如何使用自定义字体
733浏览 • 2回复 待解决
鸿蒙中如何自定义字体文件
19363浏览 • 1回复 待解决
如何使用和加载自定义字体
2149浏览 • 1回复 待解决