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

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

系列短博文目录

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

短博文目录

一、前言

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

二、给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组件实现页面切换

以下是一个示例代码，演示如何使用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组件

以下是在给定代码中添加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独立实现页面切换

以下是一个示例代码，使用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主页实现各自独立的页面切换

以下是一个示例代码，演示如何在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%');}}
}

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

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

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

---