纯血鸿蒙APP开发实战：如何添加TabBar

最新推荐文章于 2025-04-23 01:11:48 发布

原创

最新推荐文章于 2025-04-23 01:11:48 发布

· 554 阅读

8 ·

版权

文章标签：

#harmonyos #华为 #鸿蒙 #鸿蒙开发 #鸿蒙应用开发 #鸿蒙工程师 #HarmonyOS

1.tabbar组件

tabbar组件是移动端开发经常使用的一个组件，底部固定工具栏，顶部tab工具栏等。

2.示例

  @Entry
  @Component
  struct MainPage {
    @State private selectedIndex: number = 0;
    private controller: TabsController = new TabsController()

    build() {

      Column() {

        Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.White)
          }
          .tabBar({
            icon:$r('app.media.home'),
            text: '首页'
          })

          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.White)
          }
          .tabBar({
            icon: $r('app.media.plugin'),
            text: '插件'
          })

          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.Wh