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

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

相关推荐
小白的孤独历险记7 小时前
华为eNSP:AAA认证（pap和chap）telnet/ssh
华为·智能路由器
鸿蒙自习室12 小时前
鸿蒙UI开发——小图标的使用
ui·华为·harmonyos
我爱学习_zwj12 小时前
ArkTS的进阶语法-3(内置对象,String字符串对象,数组的常用方法)
前端·华为·harmonyos
lqj_本人15 小时前
鸿蒙next版开发：ArkTS组件自定义事件拦截详解
华为·harmonyos
@逆风微笑代码狗16 小时前
133.鸿蒙基础01
华为·harmonyos
我爱学习_zwj20 小时前
ArkTS的进阶语法-1(泛型,工具类型,空安全)
前端·javascript·华为·harmonyos
雪芽蓝域zzs21 小时前
HarmonyOS 沉浸式状态实现的多种方式
华为·harmonyos
lqj_本人1 天前
Flutter&鸿蒙next 使用 BLoC 模式进行状态管理详解
flutter·华为·harmonyos
呆萌很1 天前
HCIP-HarmonyOS Application Developer 习题（二十一）
harmonyos
SoraLuna1 天前
「Mac畅玩鸿蒙与硬件32」UI互动应用篇9 - 番茄钟倒计时应用
macos·ui·harmonyos
热门推荐
01聊聊 Python 中的同步原语，为什么有了 GIL 还需要同步原语02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03Windows10安装PCL1.14.0及点云配准04C++——超强级病毒代码05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06组基轨迹建模 GBTM的介绍与实现（Stata 或 R）07硬件预取之空间预取08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09Coze扣子平台完整体验和实践（附国内和国际版对比）10【SCS-CN】SCS-CN模型中CN值的确定