45.细解鸿蒙之元服务UX上架标准-底部导航栏

细解鸿蒙之元服务UX上架标准-底部导航栏

是否必须遵守：必须

标准项描述：

如开发者需使用底部导航栏，建议开发者直接调用元服务官方提供的底部页签 (AtomicServiceTabs) 控件。

若开发者选择自行设计开发导航样式，请确保导航简洁清晰，并遵循：

1）页签数量配置最多不超过 5 个，最少不少于 2 个。

2）系统导航条已预留安全边距，底部页签栏与导航条直接贴合对齐即可。开发过程中避免因间距过小造成页签信息与导航条重叠，因避让间距过大（避让间距超过 20vp）造成空间浪费。

测试方法：启动元服务，检查元服务底部导航栏。

判定标准：元服务底部导航栏显示高度、页签数量、与导航条避让间距满足元服务规范要求。 --javascripttypescriptshellbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

// Index.ets
import { AtomicServiceTabs, TabBarOptions, TabBarPosition, OnContentWillChangeCallback } from '@kit.ArkUI';

// 标记为入口组件
@Entry
// 声明为组件
@Component
struct Index {
  // 存储消息文本
  @State message: string = '首页';
  // 存储点击次数
  @State onClickNumber: number = 0;
  // 存储当前索引
  @State currentIndex: number = 0;
  // 存储即将进入的索引
  @State comingIndex: number = 0;
  // 内容即将改变的回调函数
  onContentWillChangeCallBack: OnContentWillChangeCallback = (currentIndex: number, comingIndex: number): boolean => {
    // 更新当前索引和即将进入的索引
    this.currentIndex = currentIndex;
    this.comingIndex = comingIndex;
    // 打印日志
    console.log('OnContentWillChangeCallback');
    return true;
  };
  // 点击标签的回调函数
  onTabClick: Callback<number> = (index: number) => {
    // 增加点击次数
    this.onClickNumber++;
    // 打印日志
    console.log('onTabClick');
  };

  // 使用 @Builder 装饰的函数，创建第一个标签页的内容
  @Builder
  tabContent1() {
    Column()
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
    .backgroundColor('#00CB87');
  }

  // 使用 @Builder 装饰的函数，创建第二个标签页的内容
  @Builder
  tabContent2() {
    Column()
    .width('100%')
    .height('100%')
    .backgroundColor('#007DFF');
  }

  // 使用 @Builder 装饰的函数，创建第三个标签页的内容
  @Builder
  tabContent3() {
    Column()
    .width('100%')
    .height('100%')
    .backgroundColor('#FFBF00');
  }

  build() {
    Stack() {
      AtomicServiceTabs({
        tabContents: [
          // 第一个标签页的内容
          () => {
            this.tabContent1();
          },
          // 第二个标签页的内容
          () => {
            this.tabContent2();
          },
          // 第三个标签页的内容
          () => {
            this.tabContent3();
          }
        ],
        tabBarOptionsArray: [
          // 第一个标签页的选项，包括图标、标题、颜色等
          new TabBarOptions($r('sys.media.ohos_ic_public_phone'), '绿色', Color.Black, Color.Blue),
          // 第二个标签页的选项，包括图标、标题、颜色等
          new TabBarOptions($r('sys.media.ohos_ic_public_location'), '蓝色', Color.Black, Color.Blue),
          // 第三个标签页的选项，包括图标、标题、颜色等
          new TabBarOptions($r('sys.media.ohos_ic_public_more'), '黄色', Color.Black, Color.Blue)
        ],
        // 标签栏的位置在底部
        tabBarPosition: TabBarPosition.BOTTOM,
        // 标签栏的背景颜色
        barBackgroundColor: $r('sys.color.ohos_id_color_bottom_tab_bg'),
        // 点击标签栏的回调函数
        onTabBarClick: this.onTabClick,
        // 内容即将改变的回调函数
        onContentWillChange: this.onContentWillChangeCallBack,
      });
      Column() {
        // 显示点击次数
        Text("onchange回调次数:" + this.onClickNumber);
        // 显示当前索引和即将进入的索引
        Text("comingIndex = " + this.comingIndex + ", currentIndex = " + this.currentIndex);
      }
     .margin({ top: 500 });
    }
    // 栈的高度为 100%
 .height('100%');
  }
}

PS：实际项目中如有出入，请告知博主，博主会第一时间修改得哇~