HarmonyOS 如何设定tabs组件的tabbar样式

如图,我想要修改tabbar的高度该如何修改

HarmonyOS 如何设定tabs组件的tabbar样式-鸿蒙开发者社区

HarmonyOS
2024-08-30 10:40:19
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zxjiu

您可以通过设置Tabs组件的barHeight属性来修改TabBar的高度。

@Entry 
@Component 
struct TabsExample { 
 private controller: TabsController = new TabsController(); 
 
 build() { 
  Column() { 
   Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { 
    TabContent() { 
     Column().width('100%').height('100%').backgroundColor(Color.Green) 
    } 
    .tabBar('green') 
 
    TabContent() { 
     Column().width('100%').height('100%').backgroundColor(Color.Blue) 
    } 
    .tabBar('blue') 
 
    TabContent() { 
     Column().width('100%').height('100%').backgroundColor(Color.Yellow) 
    } 
    .tabBar('yellow') 
 
    TabContent() { 
     Column().width('100%').height('100%').backgroundColor(Color.Pink) 
    } 
    .tabBar('pink') 
   } 
   .barWidth('100%') // 设置TabBar宽度 
   .barHeight(60) // 设置TabBar高度 
   .width('100%') // 设置Tabs组件宽度 
   .height('100%') // 设置Tabs组件高度 
   .backgroundColor(0xF5F5F5) // 设置Tabs组件背景颜色 
  } 
  .width('100%') 
  .height('100%') 
 } 
}
分享
微博
QQ
微信
回复
2024-08-30 17:49:01
相关问题
关于Tabs里面tabBar样式问题
284浏览 • 2回复 待解决
HarmonyOS Tabs组件tabBar宽度问题
493浏览 • 1回复 待解决
如何TabstabBar,添加其他组件
466浏览 • 1回复 待解决
HarmonyOS tabstabBar怎么居左
407浏览 • 1回复 待解决
如何设置TabBar和TabContent分割线样式
2152浏览 • 1回复 待解决
HarmonyOS Tabs组件Tabs如何左对齐?
251浏览 • 1回复 待解决
HarmonyOS Tabs组件嵌套Tabs组件问题
615浏览 • 1回复 待解决
@Extend样式如何组件共享?
2302浏览 • 1回复 待解决
Tab组件Tabbar中字体颜色如何修改
1121浏览 • 1回复 待解决
HarmonyOS Tabs组件切换
186浏览 • 1回复 待解决
HarmonyOS Tabs组件组件问题
271浏览 • 1回复 待解决