1. 涉及到的技术点
- SubTabBarStyle+indicator+labelStyle的使用
在上集代码实现过程中,Label文本字体未选中时的颜色默认值:#99182431,选中时的颜色
默认值:#FF007DFF,那如何修改默认的颜色呢?
2. 官方文档指南
- 修改下划线的样式:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-tabcontent-V5#indicatorstyle10%E5%AF%B9%E8%B1%A1%E8%AF%B4%E6%98%8E
- 修改(Labe)文本的颜色:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-tabcontent-V5#labelstyle10%E5%AF%B9%E8%B1%A1%E8%AF%B4%E6%98%8E
3. demo具体实现,修改默认样式(颜色+下划线)
@Entry
@Component
struct Index {
build() {
Column() {
Tabs() {
TabContent() {
Text('最新的内容').fontSize(30)
}
.tabBar(SubTabBarStyle.of('最新').indicator({
color: '#e22418', //下划线颜色
borderRadius: 4, //下划线圆角半径
height: 2, //下划线高度
})
.labelStyle({
selectedColor: '#e22418', //选中时的颜色
unselectedColor: '#999' //未选中时的颜
})
)
TabContent() {
Text('华语的内容').fontSize(30)
}
.tabBar(SubTabBarStyle.of('华语').indicator({
color: '#e22418', //下划线颜色
borderRadius: 4, //下划线圆角半径
height: 2, //下划线高度
}).labelStyle({
selectedColor: '#e22418', //选中时的颜色
unselectedColor: '#999' //未选中时的颜
}))
TabContent() {
Text('欧美的内容').fontSize(30)
}
.tabBar('欧美')
TabContent() {
Text('韩国的内容').fontSize(30)
}
.tabBar("韩国")
TabContent() {
Text('日本的内容').fontSize(30)
}
.tabBar("日本")
TabContent() {
Text('中国香港的内容').fontSize(30)
}
.tabBar("中国香港")
TabContent() {
Text('中国台湾的内容').fontSize(30)
}
.tabBar("中国台湾")
TabContent() {
Text('印度的内容').fontSize(30)
}
.tabBar("印度")
TabContent() {
Text('泰国的内容').fontSize(30)
}
.tabBar("泰国")
TabContent() {
Text('其他的内容').fontSize(30)
}
.tabBar("其他")
}
// 滚动导航栏可以用于顶部导航栏或者侧边导航栏的设置,内容分类较多,
// 屏幕宽度无法容纳所有分类页签的情况下,需要使用可滚动的导航栏
// 滚动导航栏需要设置Tabs组件的barMode属性,默认值为BarMode.Fixed表示为固定导航栏,
// BarMode.Scrollable表示可滚动导航栏
.barMode(BarMode.Scrollable)
//设置点击TabBar页签时切换TabContent的动画形式
.animationMode(AnimationMode.NO_ANIMATION)
}
.width('100%')
.height('100%')
}
}