ArkUI实现类似于iOS应用底部标签栏（TabBar）

在现代的移动应用开发中，底部标签栏（TabBar）是提升用户体验的重要组成部分之一。它通常位于屏幕底部，为用户提供快速导航至不同功能或页面的能力。这里使用ArkUITabs和TabContent实现一个底部标签栏（TabBar）。 学习demo代码点这里。

@Entry
@Component
export default struct Tabbars {
  // 定义四个状态变量，用于存储每个Tab的图标样式
  @State symbolModifier1: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.home_button'));
  @State symbolModifier2: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.envelope'));
  @State symbolModifier3: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.envelope_open'));
  @State symbolModifier4: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.my_plans'));

  // 构建UI的方法
  build() {
    // 创建一个垂直布局容器
    Column({ space: 5 }) {
      // 在此容器中添加另一个Column，用于容纳Tabs组件
      Column() {
        // 初始化Tabs组件，并设置其属性
        Tabs({ barPosition: BarPosition.End }) {
          // 定义四个Tab页，每个Tab页关联一个页面组件
          TabContent() { HomePage(); }
            .tabBar(new BottomTabBarStyle({ normal: this.symbolModifier1 }, '首页'))
            .onWillShow(() => console.info("首页 will show"))
            .onWillHide(() => console.info("首页 will hide"));

          TabContent() { FindPage(); }
            .tabBar(new BottomTabBarStyle({ normal: this.symbolModifier2 }, '发现'))
            .onWillShow(() => console.info("发现 will show"))
            .onWillHide(() => console.info("发现 will hide"));

          TabContent() { CirClePage(); }
            .tabBar(new BottomTabBarStyle({ normal: this.symbolModifier3 }, '圈子'))
            .onWillShow(() => console.info("圈子 will show"))
            .onWillHide(() => console.info("圈子 will hide"));

          TabContent() { MinePage(); }
            .tabBar(new BottomTabBarStyle({ normal: this.symbolModifier4 }, '我的'))
            .onWillShow(() => console.info("我的 will show"))
            .onWillHide(() => console.info("我的 will hide"));
        }
        // 设置Tabs组件的其他属性
        .vertical(false)
        .scrollable(true)
        .barMode(BarMode.Fixed)
        .onChange((index: number) => console.info(index.toString()))
        .width('100%')
        .height('100%')
        .backgroundColor(0xF1F3F5);
      }.width('100%');
    }
  }
}

一、代码说明

1. 状态变量：定义了四个 SymbolGlyphModifier 类型的状态变量，用于存储每个 Tab 的图标样式。
2. UI 构建方法：在 build 方法中，使用 Column 容器来布局 Tabs 组件。
3. Tabs 组件：初始化 Tabs 组件，并设置其属性，包括 barPosition、vertical、scrollable、barMode、onChange、width 和 height。
4. TabContent：定义四个 TabContent，每个 TabContent 关联一个页面组件（HomePage、FindPage、CirClePage、MinePage），并设置其 tabBar 样式和 onWillShow、onWillHide 事件。

二、代码解析

1.导入模块

javascript
深色版本
@Entry
@Component

• @Entry: 标记该组件为入口组件。
• @Component: 声明这是一个ArkUI组件。

2.组件定义

javascript
深色版本
export default struct Tabbars {
  @State symbolModifier1: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.home_button'));
  @State symbolModifier2: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.envelope'));
  @State symbolModifier3: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.envelope_open'));
  @State symbolModifier4: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.my_plans'));

• 定义了一个名为Tabbars的结构体组件，并导出为默认组件。
• 使用@State装饰器定义了四个状态变量，分别对应底部标签栏中每个选项的图标。这些图标通过SymbolGlyphModifier类从系统资源中加载。

3.构建UI

javascript
深色版本
build() {
  Column({space: 5}) {
    Column(){
      Tabs({barPosition: BarPosition.End}) {
        TabContent() {
          HomePage();
        }.tabBar(new BottomTabBarStyle({
          normal: this.symbolModifier1,
        }, '首页'))
        .onWillShow(() => {
          console.info("首页 will show")
        })
        .onWillHide(() => {
          console.info("首页 will hide")
        })

        // 其他标签页类似...

      }
      .vertical(false)
      .scrollable(true)
      .barMode(BarMode.Fixed)
      .onChange((index:number)=>{
        console.info(index.toString())
      })
      .width('100%')
      .height('100%')
      .backgroundColor(0xF1F3F5)
    }.width('100%')
  }
}

• 在build方法中构建UI结构。

• 外层嵌套两个Column容器，内部放置一个Tabs组件用于管理底部标签栏。

• 每个TabContent代表一个标签页的内容区域：

  • HomePage()、FindPage()、CirClePage()和MinePage()分别是各个标签页对应的页面组件。
  • .tabBar方法设置了标签栏的样式，包括正常状态下显示的图标和文本标签。
  • .onWillShow和.onWillHide方法分别在标签页即将显示和隐藏时执行回调函数，打印日志信息。

• Tabs组件的属性配置：

  • barPosition: BarPosition.End：将标签栏固定在屏幕底部。
  • vertical(false)：设置标签栏水平排列。
  • scrollable(true)：允许标签栏滚动（当标签过多时）。
  • barMode(BarMode.Fixed)：设置标签栏模式为固定模式。
  • onChange：监听标签切换事件，回调函数接收当前选中的标签索引并打印出来。
  • width、height和backgroundColor属性分别设置了组件的宽度、高度和背景颜色。

三、总结

这段代码展示了如何在ArkUI框架下创建一个带有底部导航栏的应用程序界面。通过使用Tabs组件及其相关API，可以轻松地管理和切换不同的页面内容。同时，利用@State装饰器定义的状态变量实现了动态更新UI的效果。这种设计不仅提高了用户体验，还简化了代码逻辑，便于维护和扩展。