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

🕗 发布于 2024-01-26 07:58 harmonyos 华为

传奇开心果短博文系列

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

系列短博文目录

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

短博文目录

一、前言

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

二、给Index.ets添加TabBar组件

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

//装饰器，指页面入口。
@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组件实现页面切换

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

//装饰器，指页面入口。
@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组件

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

//装饰器，指页面入口。
@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独立实现页面切换

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

//装饰器，指页面入口。
@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主页实现各自独立的页面切换

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

//装饰器，指页面入口。
@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%');
    }
  }
}

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

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

原文地址：https://blog.csdn.net/jackchuanqi/article/details/135855779

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：el-table 设置内容超出宽度后省略，并添加tooltip
下一篇：C++-gdb调试常用功能

【matlab版】如何估算波形信号的幅值、频率与相位
频率的估算是通过查找信号中的峰值并计算相邻峰值之间的平均时间差来实现的。幅值的估算是通过信号的最大值和最小值来计算的。相位的估算是通过第一个峰值的值和幅值来实现的。
阅读更多2024-11-07
A15基于Spring Boot的宠物爱心组织管理系统的设计与实现
宠物爱心组织管理系统管理系统按照操作主体分为管理员和用户。管理员的功能包括备忘录管理、宠物管理、宠物收藏管理、宠物评价管理、宠物订单管理、字典管理、公告管理、捐赠管理、流浪管理、流浪收藏管理、流浪评价
阅读更多2024-11-07
随着FAB的发布，在FAB中使用Megascans的简单方法（适用于Unreal Engine 5）
在2024年12月31号前获取在FAB中使用Megascans的简单方法（适用于Unreal Engine 5）
阅读更多2024-11-07
Ubuntu22.04 安装图形界面以及XRDP教程
本文主要解决ubuntu服务器远程图形化界面的问题，可以照做，步骤简单
阅读更多2024-11-07
【Linux系列】Linux 和 Unix 系统中的`set`命令与错误处理
💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。非常期待和您一起在这个小小的网络世界里共同
阅读更多2024-11-07
基于vue框架的的楼盘销售管理系统6n60a（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
此外，该系统还有助于企业实现房源信息的集中管理和高效利用，减少信息孤岛现象，提高数据的准确性和可靠性。传统的销售管理方式依赖于人工记录和纸质文档，效率低下且容易出错，无法满足现代房地产企业对数据精准性
阅读更多2024-11-07
[Mysql] 介绍一下PROCEDURE、TRIGGERS和EVENTS
PROCEDURE、TRIGGERS和EVENTS分别指什么？以及分别在声明场景下使用
阅读更多2024-11-07
linux终端控制进程的前后台执行
这样，命令会立即返回终端提示符，同时脚本在后台继续执行。你可以继续在终端中执行其他命令。在执行命令时，在命令后面加上“&”，该进程就会在后台运行。例如，运行一个长时间运行的脚本。表示作业号为1
阅读更多2024-11-07
k8s Sidecar代理
Sidecar 代理是一种灵活而强大的设计模式，广泛用于微服务和 Kubernetes 集群中，用来提升网络管理、监控、日志记录和安全性的能力。虽然它增加了一定的复杂性和资源消耗，但为应用隔离职责、提
阅读更多2024-11-07
【Rust中的迭代器】
迭代是指，在一个过程中反复重复，不断推进。在计算机领域，迭代是重复执行某一个过程的方法，每一次执行都基于上一次执行的结果。迭代器用于接入和迭代数据结构中的元素,通过"指向"他们，在
阅读更多2024-11-07