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

2024-01-26 08:04
文章标签 实现 页面 切换 系列 示例 案例 博文 tabbar 鸿蒙 传奇 开发技术 第四篇 开心果 navbar

本文主要是介绍第四篇【传奇开心果短博文系列】鸿蒙开发技术点案例示例：TabBar和Navbar实现页面切换，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

传奇开心果短博文系列

  • 系列短博文目录
    • 鸿蒙开发技术点案例示例短博文系列
  • 短博文目录
    • 一、前言
    • 二、给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项1TabItem(//设置图标icon: Icon(Icons.home),//设置文本text: 'Home',);//Tab项2TabItem(//设置图标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项1TabItem(//设置文本text: 'Page 1',);//Tab项2TabItem(//设置文本text: 'Page 2',);}//根据选中索引渲染对应的页面if (this.selectedIndex == 0) {//页面1Page1();} else if (this.selectedIndex == 1) {//页面2Page2();}}}
}//自定义组件，页面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项1TabItem(//设置文本text: 'Page 1',);//Tab项2TabItem(//设置文本text: 'Page 2',);}//根据选中索引渲染对应的页面if (this.selectedIndex == 0) {//页面1Page1();} else if (this.selectedIndex == 1) {//页面2Page2();}}}
}//自定义组件，页面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) {//页面1Page1();} else if (this.selectedIndex == 1) {//页面2Page2();}//底部导航栏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页面1NavbarPage1();} else if (this.navbarSelectedIndex == 1) {//Navbar页面2NavbarPage2();}//TabBar组件TabBar(//绑定选中索引selectedIndex: this.tabBarSelectedIndex,//回调函数，处理选项卡切换事件onTabChanged: (index) {this.tabBarSelectedIndex = index;},) {//Tab项1TabItem(//设置文本text: 'Tab 1',);//Tab项2TabItem(//设置文本text: 'Tab 2',);}//根据tabBarSelectedIndex渲染对应的TabBar页面if (this.tabBarSelectedIndex == 0) {//TabBar页面1TabBarPage1();} else if (this.tabBarSelectedIndex == 1) {//TabBar页面2TabBarPage2();}}}
}//自定义组件，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请注意，这只是一个简单示例，实际应用中您可以根据需要进行更复杂的布局和内容渲染。同时，您可能还需要根据具体框架或库的要求进行相应的调整和修改。

这篇关于第四篇【传奇开心果短博文系列】鸿蒙开发技术点案例示例：TabBar和Navbar实现页面切换的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/646143。

相关文章

Spring Security 从入门到进阶系列教程

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门（一）：登录与退出》 《Spring-Security-入门（二）：基于数据库验证》 《Spring-Security-入门（三）：密码加密》 《Spring-Security-入门（四）：自定义-Filter》 《Spring-Security-入门（五）：在 Sprin
阅读更多...
Hadoop企业开发案例调优场景

Hadoop企业开发案例调优场景

需求 （1）需求：从1G数据中，统计每个单词出现次数。服务器3台，每台配置4G内存，4核CPU，4线程。 （2）需求分析： 1G / 128m = 8个MapTask；1个ReduceTask；1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务（4    3    3） HDFS参数调优 （1）修改：hadoop-env.sh export HDFS_NAMENOD
阅读更多...
hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

利用康拓展开将一个排列映射成一个自然数，然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu
阅读更多...
性能分析之MySQL索引实战案例

性能分析之MySQL索引实战案例

文章目录 一、前言二、准备三、MySQL索引优化四、MySQL 索引知识回顾五、总结 一、前言 在上一讲性能工具之 JProfiler 简单登录案例分析实战中已经发现SQL没有建立索引问题，本文将一起从代码层去分析为什么没有建立索引？ 开源ERP项目地址：https://gitee.com/jishenghua/JSH_ERP 二、准备 打开IDEA找到登录请求资源路径位置
阅读更多...
深入探索协同过滤：从原理到推荐模块案例

深入探索协同过滤：从原理到推荐模块案例

文章目录 前言一、协同过滤1. 基于用户的协同过滤（UserCF）2. 基于物品的协同过滤（ItemCF）3. 相似度计算方法 二、相似度计算方法1. 欧氏距离2. 皮尔逊相关系数3. 杰卡德相似系数4. 余弦相似度 三、推荐模块案例1.基于文章的协同过滤推荐功能2.基于用户的协同过滤推荐功能 前言     在信息过载的时代，推荐系统成为连接用户与内容的桥梁。本文聚焦于
阅读更多...
OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

OpenHarmony鸿蒙开发（ Beta5.0）无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息，即可快速实现设备配网，是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递，利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力，实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后，即可发送相关配网数据。同时还支持与常规Sof
阅读更多...
【C++】_list常用方法解析及模拟实现

【C++】_list常用方法解析及模拟实现

相信自己的力量，只要对自己始终保持信心，尽自己最大努力去完成任何事，就算事情最终结果是失败了，努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一：什么是list？ •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二：list常用接口 •🌰1.默认成员函数 🔥构造函数（⭐） 🔥析构函数 •🌰2.list对象
阅读更多...
【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。 🏆《博客》：Python全栈，前后端开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi
阅读更多...
如何在页面调用utility bar并传递参数至lwc组件

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件： 2.调用utility bar api的方式有两种： 方法一，通过lwc调用： import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca
阅读更多...
让树莓派智能语音助手实现定时提醒功能

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现，因为rasa本身是带有remindschedule模块的。不过经过一番折腾后，忽然发现，chatbot上实现的定时，语音助手不一定会有响应。因为，我目前语音助手的代码设置了长时间无应答会结束对话，这样一来，chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢？ 我最后选择的方法是用threading.Time
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2