44.细解鸿蒙之元服务UX上架标准-元服务胶囊

细解鸿蒙之元服务UX上架标准-元服务胶囊

是否必须遵守：必须

标准项描述：

元服务全部界面，导航栏右侧统一配置元服务胶囊（Menubar），开发者在界面设计中请注意合理避让该区域，避免功能冲突。

测试方法：元服务胶囊在静态或第一屏界面显示时，胶囊区域无文本信息或功能控件遮挡，无热区冲突。

判定标准：除全屏模态弹窗场景，其他静态或第一屏界面显示时，元服务胶囊需保证显示清晰且可操作，胶囊区域无文本信息或功能控件遮挡，无热区冲突。

元服务胶囊在当今数字化时代具有广阔的应用前景，它为企业和用户提供了创新、高效的服务模式，有助于推动各个领域的发展和进步。 --javascripttypescriptshellbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

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

// 标记为入口组件
@Entry
// 声明为组件
@Component
struct Index {
  // 存储消息文本
  @State message: string = '主题';
  // 存储导航路径栈
  childNavStack: NavPathStack = new NavPathStack();

  // 使用 @Builder 装饰的函数，创建第一个标签页的内容
  @Builder
  tabContent1() {
    Text('first page')
     .onClick(() => {
        // 点击时将 'page one' 推入导航路径栈
        this.childNavStack.pushPath({ name: 'page one' })
      })
  }

  // 使用 @Builder 装饰的函数，创建第二个标签页的内容
  @Builder
  tabContent2() {
    Text('second page')
  }

  // 使用 @Builder 装饰的函数，创建第三个标签页的内容
  @Builder
  tabContent3() {
    Text('third page')
  }

  // 使用 @Builder 装饰的函数，创建导航内容
  @Builder
  navigationContent() {
    AtomicServiceTabs({
      tabContents: [
        // 第一个标签页的内容
        () => {
          this.tabContent1()
        },
        // 第二个标签页的内容
        () => {
          this.tabContent2()
        },
        // 第三个标签页的内容
        () => {
          this.tabContent3()
        }
      ],
      tabBarOptionsArray: [
        // 第一个标签页的选项，包括图标、标题
        new TabBarOptions($r('sys.media.ohos_ic_public_phone'), '功能1'),
        // 第二个标签页的选项，包括图标、标题、颜色等
        new TabBarOptions($r('sys.media.ohos_ic_public_location'), '功能2', Color.Green, Color.Red),
        // 第三个标签页的选项，包括图标、标题
        new TabBarOptions($r('sys.media.ohos_ic_public_more'), '功能3')
      ],
      // 标签栏的位置在底部
      tabBarPosition: TabBarPosition.BOTTOM,
      // 标签栏的背景颜色
      barBackgroundColor: $r('sys.color.ohos_id_color_bottom_tab_bg'),
      // 点击标签栏的回调函数
      onTabBarClick: (index: Number) => {
        if (index == 0) {
          this.message = '功能1';
        } else if (index == 1) {
          this.message = '功能2';
        } else {
          this.message = '功能3';
        }
      }
    })
  }

  // 使用 @Builder 装饰的函数，根据名称映射页面
  @Builder
  pageMap(name: string) {
    if (name === 'page one') {
      PageOne()
    } else if (name === 'page two') {
      PageTwo()
    }
  }

  build() {
    Row() {
      Column() {
        AtomicServiceNavigation({
          navigationContent: () => {
            this.navigationContent()
          },
          // 导航的标题
          title: this.message,
          titleOptions: {
            // 标题的背景颜色
            backgroundColor: 'rgb(61, 157, 180)',
            // 是否启用模糊效果
            isBlurEnabled: false
          },
          // 导航目的地的构建器
          navDestinationBuilder: this.pageMap,
          // 导航路径栈
          navPathStack: this.childNavStack,
          // 导航模式为栈模式
          mode: NavigationMode.Stack
        })
      }
      // 列的宽度为 100%
  .width('100%')
    }
    // 行的高度为 100%
.height('100%')
  }
}

// 声明 PageOne 组件
@Component
export struct PageOne {
  // 存储页面的导航路径栈
  pageInfo: NavPathStack = new NavPathStack();

  build() {
    NavDestination() {
      Button('Next')
       .onClick(() => {
          // 点击时将 'page two' 推入页面的导航路径栈
          this.pageInfo.pushPath({ name: 'page two'})
      

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