细解鸿蒙之元服务UX上架标准-头部导航栏
是否必须遵守：必须
标准项描述：
如开发者需使用头部导航栏，建议开发者直接调用元服务官方提供的导航栏 (AtomicServiceNavigation) 控件。
若开发者选择自行设计开发导航样式，请确保导航简洁清晰，并遵循：
1）标题栏范围内不允许出现除标题、元服务胶囊、系统返回/关闭外的其他功能操作或信息。
2）标题栏高度请勿设置过高或过低，避免出现信息遮挡，高度不低于 44vp 、不高于 64vp （建议 56vp ）。
3）为确保标题栏左右信息对称，全部标题按左对齐设置，与元服务胶囊中心对齐，不允许使用双行标题。其中字号和对齐边距需满足规范要求：
- 一级标题建议加粗，默认字号不小于 20fp（建议 24/26fp ），非一级标题默认字号不小于 18fp （建议 20fp ）。
- 手机一级标题距离左侧屏幕边缘不超过 16vp（建议 16vp），折叠屏一级标题距离左侧屏幕边缘不超过 24vp（建议 24vp），平板一级标题距离左侧屏幕边缘不超过 32vp（建议 32vp）。
- 手机非一级标题距离左侧屏幕边缘不超过 64vp，折叠屏非一级标题距离左侧屏幕边缘不超过 72vp，平板非一级标题距离左侧屏幕边缘不超过 80vp。
4）为适应头部 banner 运营需求，一级标题栏标题文本非强制显示。
5）非一级标题栏必须提供返回或关闭按钮。
上图为错误资源示例：标题设置副文本，且未与胶囊中心对齐
测试方法：启动元服务，检查界面各级页面头部导航栏。
判定标准：元服务所有头部导航栏信息构成、显示高度、标题字号、标题显示位置满足元服务规范要求--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'})
})
}
// 页面的标题为 'PageOne'
.title('PageOne')
.onReady((context: NavDestinationContext) => {
// 当页面准备好时，更新页面的导航路径栈
this.pageInfo = context.pathStack;
})
}
}
// 声明 PageTwo 组件
@Component
export struct PageTwo {
// 存储页面的导航路径栈
pageInfo: NavPathStack = new NavPathStack();
build() {
NavDestination() {
Button('End')
}
// 页面的标题为 'PageTwo'
.title('PageTwo')
.onReady((context: NavDestinationContext) => {
// 当页面准备好时，更新页面的导航路径栈
this.pageInfo = context.pathStack;
})
}
}。
PS：实际项目中如有出入，请告知博主，博主会第一时间修改得哇~
