第四篇【传奇开心果短博文系列】鸿蒙开发技术点案例示例：TabBar和Navbar实现页面切换

传奇开心果编程2024-01-30 5:01

传奇开心果短博文系列

  • 系列短博文目录
    • 鸿蒙开发技术点案例示例短博文系列
  • 短博文目录
    • 一、前言
    • 二、给Index.ets添加TabBar组件
    • 三、用TabBar组件实现页面切换
    • 四、给Index.ets添加Navbar组件
    • 五、使用Navbar独立实现页面切换
    • 六、Navbar和TabBar同时在Index.ets主页实现各自独立的页面切换

系列短博文目录

鸿蒙开发技术点案例示例短博文系列

短博文目录

一、前言

除了前面页面路由实现页面切换，使用组件TabBar和Navbar也能实现页面切换。搭配使用可以更加灵活多样的实现页面切换。

二、给Index.ets添加TabBar组件

以下是在给定代码中添加TabBar的示例：

arkts 复制代码 
//装饰器，指页面入口。
@Entry
//装饰器，指下面开始自定义组件
@Component
//自定义组件
struct Index {
  //装饰器，指状态变量，字符串类型，赋值:"Hello World'
  @State message: string = "Hello World";
  //装饰器，指状态变量，整数类型，赋值:0
  @State selectedIndex: number = 0;

  //构造函数，UI声明
  build() {
    //垂直布局组件
    Column() {
      //TabBar组件
      TabBar(
        //绑定选中索引
        selectedIndex: this.selectedIndex,
        //回调函数，处理选项卡切换事件
        onTabChanged: (index) {
          this.selectedIndex = index;
        },
      ) {
        //Tab项1
        TabItem(
          //设置图标
          icon: Icon(Icons.home),
          //设置文本
          text: 'Home',
        );
        //Tab项2
        TabItem(
          //设置图标
          icon: Icon(Icons.settings),
          //设置文本
          text: 'Settings',
        );
      }
      //根据选中索引渲染对应的内容
      if (this.selectedIndex == 0) {
        //横向布局组件
        Row() {
          //嵌套纵向布局组件
          Column() {
            //文本组件，参数
            Text(this.message)
              //设置字号
              .fontSize(50)
              //设置字体粗细
              .fontWeight(FontWeight.Bold);
          }
          //设置页面宽度占比百分比
          .width('100%');
        }
      } else if (this.selectedIndex == 1) {
        //横向布局组件
        Row() {
          //嵌套纵向布局组件
          Column() {
            //文本组件，参数
            Text('Settings')
              //设置字号
              .fontSize(50)
              //设置字体粗细
              .fontWeight(FontWeight.Bold);
          }
          //设置页面宽度占比百分比
          .width('100%');
        }
      }
    }
    //设置页面高度占比百分比
    .height('100%');
  }
}

在给定的代码中，我们添加了一个TabBar组件，用于切换不同的内容。首先，在构造函数中添加了一个selectedIndex状态变量，用于跟踪当前选中的Tab项。然后，在Column布局组件中添加了TabBar组件，并将selectedIndex绑定到选中索引上，并通过onTabChanged回调函数处理选项卡切换事件。接下来，在TabBar中添加了两个TabItem，分别代表"Home"和"Settings"两个选项卡。根据selectedIndex的值，我们在Column布局组件中渲染不同的内容。如果selectedIndex为0，则渲染显示"Home"的内容；如果selectedIndex为1，则渲染显示"Settings"的内容。

请注意，这只是一个简单示例，实际应用中您可以根据需要进行更复杂的布局和内容渲染。同时，您可能还需要根据具体框架或库的要求进行相应的调整和修改。

三、用TabBar组件实现页面切换

以下是一个示例代码，演示如何使用TabBar切换不同的页面：

arkts 复制代码 
//装饰器，指页面入口。
@Entry
//装饰器，指下面开始自定义组件
@Component
//自定义组件
struct Index {
  //装饰器，指状态变量，整数类型，赋值:0
  @State selectedIndex: number = 0;

  //构造函数，UI声明
  build() {
    //垂直布局组件
    Column() {
      //TabBar组件
      TabBar(
        //绑定选中索引
        selectedIndex: this.selectedIndex,
        //回调函数，处理选项卡切换事件
        onTabChanged: (index) {
          this.selectedIndex = index;
        },
      ) {
        //Tab项1
        TabItem(
          //设置文本
          text: 'Page 1',
        );
        //Tab项2
        TabItem(
          //设置文本
          text: 'Page 2',
        );
      }
      //根据选中索引渲染对应的页面
      if (this.selectedIndex == 0) {
        //页面1
        Page1();
      } else if (this.selectedIndex == 1) {
        //页面2
        Page2();
      }
    }
  }
}

//自定义组件，页面1
struct Page1 {
  build() {
    //横向布局组件
    Row() {
      //嵌套纵向布局组件
      Column() {
        //文本组件，参数
        Text('This is Page 1')
          //设置字号
          .fontSize(50)
          //设置字体粗细
          .fontWeight(FontWeight.Bold);
      }
      //设置页面宽度占比百分比
      .width('100%');
    }
  }
}

//自定义组件，页面2
struct Page2 {
  build() {
    //横向布局组件
    Row() {
      //嵌套纵向布局组件
      Column() {
        //文本组件，参数
        Text('This is Page 2')
          //设置字号
          .fontSize(50)
          //设置字体粗细
          .fontWeight(FontWeight.Bold);
      }
      //设置页面宽度占比百分比
      .width('100%');
    }
  }
}

在给定的代码中，我们添加了两个自定义组件Page1和Page2，分别表示两个不同的页面。在Index组件的build方法中，根据selectedIndex的值来渲染不同的页面。当selectedIndex为0时，渲染Page1组件；当selectedIndex为1时，渲染Page2组件。同时，我们使用TabBar组件来切换不同的页面。通过onTabChanged回调函数，当选项卡切换时，更新selectedIndex的值，从而触发页面的重新渲染。

请注意，这只是一个简单示例，实际应用中您可以根据需要进行更复杂的布局和内容渲染。同时，您可能还需要根据具体框架或库的要求进行相应的调整和修改。

四、给Index.ets添加Navbar组件

以下是在给定代码中添加Navbar的示例：

arkts 复制代码 
//装饰器，指页面入口。
@Entry
//装饰器，指下面开始自定义组件
@Component
//自定义组件
struct Index {
  //装饰器，指状态变量，整数类型，赋值:0
  @State selectedIndex: number = 0;

  //构造函数，UI声明
  build() {
    //垂直布局组件
    Column() {
      //Navbar组件
      Navbar(
        //设置标题
        title: 'My App',
      );
      //TabBar组件
      TabBar(
        //绑定选中索引
        selectedIndex: this.selectedIndex,
        //回调函数，处理选项卡切换事件
        onTabChanged: (index) {
          this.selectedIndex = index;
        },
      ) {
        //Tab项1
        TabItem(
          //设置文本
          text: 'Page 1',
        );
        //Tab项2
        TabItem(
          //设置文本
          text: 'Page 2',
        );
      }
      //根据选中索引渲染对应的页面
      if (this.selectedIndex == 0) {
        //页面1
        Page1();
      } else if (this.selectedIndex == 1) {
        //页面2
        Page2();
      }
    }
  }
}

//自定义组件，页面1
struct Page1 {
  build() {
    //横向布局组件
    Row() {
      //嵌套纵向布局组件
      Column() {
        //文本组件，参数
        Text('This is Page 1')
          //设置字号
          .fontSize(50)
          //设置字体粗细
          .fontWeight(FontWeight.Bold);
      }
      //设置页面宽度占比百分比
      .width('100%');
    }
  }
}

//自定义组件，页面2
struct Page2 {
  build() {
    //横向布局组件
    Row() {
      //嵌套纵向布局组件
      Column() {
        //文本组件，参数
        Text('This is Page 2')
          //设置字号
          .fontSize(50)
          //设置字体粗细
          .fontWeight(FontWeight.Bold);
      }
      //设置页面宽度占比百分比
      .width('100%');
    }
  }
}

在给定的代码中，我们添加了一个Navbar组件，用于显示应用的标题。在Index组件的build方法中，首先添加了Navbar组件，并设置了标题为"My App"。然后，再添加了TabBar组件来切换不同的页面。通过onTabChanged回调函数，当选项卡切换时，更新selectedIndex的值，从而触发页面的重新渲染。根据selectedIndex的值，我们在Column布局组件中渲染不同的页面。如果selectedIndex为0，则渲染Page1组件；如果selectedIndex为1，则渲染Page2组件。

请注意，这只是一个简单示例，实际应用中您可以根据需要进行更复杂的布局和内容渲染。同时，您可能还需要根据具体框架或库的要求进行相应的调整和修改。

五、使用Navbar独立实现页面切换

以下是一个示例代码，使用Navbar独立实现切换不同的页面：

arkts 复制代码 
//装饰器，指页面入口。
@Entry
//装饰器，指下面开始自定义组件
@Component
//自定义组件
struct Index {
  //装饰器，指状态变量，整数类型，赋值:0
  @State selectedIndex: number = 0;

  //构造函数，UI声明
  build() {
    //垂直布局组件
    Column() {
      //Navbar组件
      Navbar(
        //设置标题
        title: 'My App',
        //设置左侧按钮
        leading: Icon(Icons.menu),
        //设置右侧按钮
        trailing: Icon(Icons.search),
        //设置左侧按钮点击事件
        onLeadingTap: () {
          //处理左侧按钮点击事件
        },
        //设置右侧按钮点击事件
        onTrailingTap: () {
          //处理右侧按钮点击事件
        },
      );
      //根据选中索引渲染对应的页面
      if (this.selectedIndex == 0) {
        //页面1
        Page1();
      } else if (this.selectedIndex == 1) {
        //页面2
        Page2();
      }
      //底部导航栏
      BottomNavigationBar(
        //绑定选中索引
        currentIndex: this.selectedIndex,
        //回调函数，处理导航项切换事件
        onTap: (index) {
          this.selectedIndex = index;
        },
        //导航项列表
        items: [
          BottomNavigationBarItem(
            //设置图标
            icon: Icon(Icons.home),
            //设置文本
            label: 'Page 1',
          ),
          BottomNavigationBarItem(
            //设置图标
            icon: Icon(Icons.settings),
            //设置文本
            label: 'Page 2',
          ),
        ],
      );
    }
  }
}

//自定义组件，页面1
struct Page1 {
  build() {
    //横向布局组件
    Row() {
      //嵌套纵向布局组件
      Column() {
        //文本组件，参数
        Text('This is Page 1')
          //设置字号
          .fontSize(50)
          //设置字体粗细
          .fontWeight(FontWeight.Bold);
      }
      //设置页面宽度占比百分比
      .width('100%');
    }
  }
}

//自定义组件，页面2
struct Page2 {
  build() {
    //横向布局组件
    Row() {
      //嵌套纵向布局组件
      Column() {
        //文本组件，参数
        Text('This is Page 2')
          //设置字号
          .fontSize(50)
          //设置字体粗细
          .fontWeight(FontWeight.Bold);
      }
      //设置页面宽度占比百分比
      .width('100%');
    }
  }
}

在给定的代码中，我们使用Navbar组件实现了顶部导航栏，并使用BottomNavigationBar组件实现了底部导航栏。通过设置currentIndex来绑定选中索引，并通过onTap回调函数处理导航项切换事件。根据selectedIndex的值，我们在Column布局组件中渲染不同的页面。如果selectedIndex为0，则渲染Page1组件；如果selectedIndex为1，则渲染Page2组件。

请注意，这只是一个简单示例，实际应用中您可以根据需要进行更复杂的布局和内容渲染。同时，您可能还需要根据具体框架或库的要求进行相应的调整和修改。

六、Navbar和TabBar同时在Index.ets主页实现各自独立的页面切换

以下是一个示例代码，演示如何在Index主页上同时使用Navbar和TabBar实现各自独立页面切换：

arkts 复制代码 
//装饰器，指页面入口。
@Entry
//装饰器，指下面开始自定义组件
@Component
//自定义组件
struct Index {
  //装饰器，指状态变量，整数类型，赋值:0
  @State navbarSelectedIndex: number = 0;
  @State tabBarSelectedIndex: number = 0;

  //构造函数，UI声明
  build() {
    //垂直布局组件
    Column() {
      //Navbar组件
      Navbar(
        //设置标题
        title: 'My App',
        //设置左侧按钮
        leading: Icon(Icons.menu),
        //设置右侧按钮
        trailing: Icon(Icons.search),
        //设置左侧按钮点击事件
        onLeadingTap: () {
          //处理左侧按钮点击事件
        },
        //设置右侧按钮点击事件
        onTrailingTap: () {
          //处理右侧按钮点击事件
        },
      );

      //根据navbarSelectedIndex渲染对应的Navbar页面
      if (this.navbarSelectedIndex == 0) {
        //Navbar页面1
        NavbarPage1();
      } else if (this.navbarSelectedIndex == 1) {
        //Navbar页面2
        NavbarPage2();
      }

      //TabBar组件
      TabBar(
        //绑定选中索引
        selectedIndex: this.tabBarSelectedIndex,
        //回调函数，处理选项卡切换事件
        onTabChanged: (index) {
          this.tabBarSelectedIndex = index;
        },
      ) {
        //Tab项1
        TabItem(
          //设置文本
          text: 'Tab 1',
        );
        //Tab项2
        TabItem(
          //设置文本
          text: 'Tab 2',
        );
      }

      //根据tabBarSelectedIndex渲染对应的TabBar页面
      if (this.tabBarSelectedIndex == 0) {
        //TabBar页面1
        TabBarPage1();
      } else if (this.tabBarSelectedIndex == 1) {
        //TabBar页面2
        TabBarPage2();
      }
    }
  }
}

//自定义组件，Navbar页面1
struct NavbarPage1 {
  build() {
    //横向布局组件
    Row() {
      //嵌套纵向布局组件
      Column() {
        //文本组件，参数
        Text('This is Navbar Page 1')
          //设置字号
          .fontSize(50)
          //设置字体粗细
          .fontWeight(FontWeight.Bold);
      }
      //设置页面宽度占比百分比
      .width('100%');
    }
  }
}

//自定义组件，Navbar页面2
struct NavbarPage2 {
  build() {
    //横向布局组件
    Row() {
      //嵌套纵向布局组件
      Column() {
        //文本组件，参数
        Text('This is Navbar Page 2')
          //设置字号
          .fontSize(50)
          //设置字体粗细
          .fontWeight(FontWeight.Bold);
      }
      //设置页面宽度占比百分比
      .width('100%');
    }
  }
}

//自定义组件，TabBar页面1
struct TabBarPage1 {
  build() {
    //横向布局组件
    Row() {
      //嵌套纵向布局组件
      Column() {
        //文本组件，参数
        Text('This is TabBar Page 1')
          //设置字号
          .fontSize(50)
          //设置字体粗细
          .fontWeight(FontWeight.Bold);
      }
      //设置页面宽度占比百分比
      .width('100%');
    }
  }
}

//自定义组件，TabBar页面2
struct TabBarPage2 {
  build() {
    //横向布局组件
    Row() {
      //嵌套纵向布局组件
      Column() {
        //文本组件，参数
        Text('This is TabBar Page 2')
          //设置字号
          .fontSize(50)
          //设置字体粗细
          .fontWeight(FontWeight.Bold);
      }
      //设置页面宽度占比百分比
      .width('100%');
    }
  }
}

_在给定的代码中，我们在Index组件的build方法中同时使用了Navbar和TabBar组件。根据navbarSelectedIndex和tabBarSelectedIndex的值，分别渲染对应的Navbar页面和TabBar页面。

请注意，这只是一个简单示例，实际应用中您可以根据需要进行更复杂的布局和内容渲染。同时，您可能还需要根据具体框架或库的要求进行相应的调整和修改。

相关推荐
三声三视20 分钟前
ArkTS 自定义组件完全指南：@Builder、@Extend、@Styles 实战解析
华为·harmonyos
Utopia^2 小时前
Flutter 框架跨平台鸿蒙开发 - 旅行预算管家
flutter·华为·harmonyos
李李李勃谦3 小时前
Flutter 框架跨平台鸿蒙开发 - 星空识别助手
flutter·华为·harmonyos
李李李勃谦3 小时前
Flutter 框架跨平台鸿蒙开发 - 本地生活服务预约
flutter·华为·生活·harmonyos
我的世界洛天依3 小时前
胡桃讲编程：早期华为手机（比如畅享等）可以升级鸿蒙吗？
华为·harmonyos
2301_822703203 小时前
开源鸿蒙跨平台Flutter开发：幼儿疫苗全生命周期追踪系统：基于 Flutter 的免疫接种档案与状态机设计
算法·flutter·华为·开源·harmonyos·鸿蒙
2301_822703204 小时前
鸿蒙flutter三方库实战——教育与学习平台：Flutter Markdown
学习·算法·flutter·华为·harmonyos·鸿蒙
humors2214 小时前
各厂商工具包网址
java·数据库·python·华为·sdk·苹果·工具包
2301_822703206 小时前
开源鸿蒙跨平台Flutter开发：蛋白质序列特征提取：氨基酸组成与理化性质计算
flutter·华为·开源·harmonyos·鸿蒙
钛态7 小时前
Flutter 三方库 ethereum_addresses 的鸿蒙化适配指南 - 掌控区块链地址资产、精密校验治理实战、鸿蒙级 Web3 专家
flutter·harmonyos·鸿蒙·openharmony·ethereum_addresses
热门推荐
01GitHub 镜像站点02一周AI热点速览（2026.03.31-04.06）：GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛03基于 Docker 部署 Hermes Agent 并接入飞书机器人的完整指南04OpenClaw 请求超时 llm request timed out 怎么解决？3 种方案实测，附完整排查流程05VMware Workstation Pro 17 虚拟机完整安装教程（2026最新）06CodeBuddy与WorkBuddy深度对比：腾讯两款AI工具差异及实操指南07实测！Gemma 4 成功跑在安卓手机上：离线 AI 助手终于来了08Oh My Codex 快速使用指南09UV安装并设置国内源10开发者环境配置：用 Ollama 实现本地大模型部署(附下载慢的解决方案