第四篇【传奇开心果短博文系列】鸿蒙开发技术点案例示例：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页面。

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

相关推荐
Andy醒26 分钟前
HarmonyOS . 沉浸状态栏使用
harmonyos·鸿蒙
yuwinter32 分钟前
鸿蒙HarmonyOS学习笔记（2）
笔记·学习·harmonyos
ZZZCY20031 小时前
华为ENSP--IP编址及静态路由配置
网络·华为
jikuaidi6yuan2 小时前
鸿蒙系统（HarmonyOS）分布式任务调度
分布式·华为·harmonyos
智慧化智能化数字化方案9 小时前
华为IPD流程管理体系L1至L5最佳实践-解读
大数据·华为
ZZZCY20039 小时前
华为VER系统及CLI命令熟悉
华为
SameX10 小时前
HarmonyOS Next 安全生态构建与展望
前端·harmonyos
SameX10 小时前
HarmonyOS Next 打造智能家居安全系统实战
harmonyos
Random_index18 小时前
#Uniapp篇：支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
鸿蒙自习室21 小时前
鸿蒙多线程开发——线程间数据通信对象02
ui·harmonyos·鸿蒙
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07怎样让音频速度变慢？请跟随以下方法进行操作08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10【目标跟踪】相机运动补偿