HarmonyOS：通过组件导航设置信息提醒

一、场景介绍

从5.1.0(18)版本开始，导航组件新增支持菜单栏设置信息提醒能力。

当应用开发者需要在导航组件菜单项右上角附加消息提醒时，可以通过设置标题栏菜单中的badge配置，实现信息提醒能力。

二、开发示例

示例效果图

示例代码

import { HdsNavigation, HdsNavigationAttribute, ScrollEffectType } from '@kit.UIDesignKit';
import { LengthMetrics } from '@kit.ArkUI';@Entry
@Component
struct TestUIDesign2 {@State arr: number[] = [];// 创建一级导航组件，通过配置titleBar中menu的badge属性，设置信息提醒样式。aboutToAppear(): void {for (let index = 0; index < 40; index++) {this.arr.push(index);}}@StyleslistCard() {.backgroundColor(Color.White).height(72).width('calc(100% - 20vp)').borderRadius(12).margin({ left: 10, right: 10 })}build() {HdsNavigation() { // 创建HdsNavigation组件// HdsNavigation组件内容区Scroll(){Column({ space: 10 }) {Image($r('app.media.mount')).width('100%').height(300)List({ space: 10 }) {ForEach(this.arr, (item: number) => {ListItem() {Text("item " + item).fontSize(20).fontColor(Color.Black)}.listCard()}, (item: number) => item.toString())}.padding({ bottom: 30 }).edgeEffect(EdgeEffect.Spring)}.width('100%')}}.titleBar({style: { // 设置导航组件标题栏样式// 标题栏动态模糊样式，包括是否使能滚动动态模糊，动态模糊类型，动态模糊生效的滚动距离等scrollEffectOpts: {enableScrollEffect: true,scrollEffectType: ScrollEffectType.COMMON_BLUR,blurEffectiveStartOffset: LengthMetrics.vp(0),blurEffectiveEndOffset: LengthMetrics.vp(20)},originalStyle: { // 内容区滚动前初始样式设置backgroundStyle: { // 标题栏背板样式设置backgroundColor: $r('sys.color.ohos_id_color_background'),},contentStyle: { // 标题栏内容区样式设置，包括标题区域，菜单区域，返回按钮区域titleStyle: {mainTitleColor: $r('sys.color.font_primary'),subTitleColor: $r('sys.color.font_secondary')},menuStyle: {backgroundColor: $r('sys.color.comp_background_tertiary'),iconColor: $r('sys.color.icon_primary')},backIconStyle: {backgroundColor: $r('sys.color.comp_background_tertiary'),iconColor: $r('sys.color.icon_primary')}}},scrollEffectStyle: { // 内容区滚动超过blurEffectiveEndOffset后样式设置backgroundStyle: {backgroundColor: $r('sys.color.ohos_id_color_background_transparent'),},contentStyle: {titleStyle: {mainTitleColor: $r('sys.color.font_primary'),subTitleColor: $r('sys.color.font_secondary')},menuStyle: {backgroundColor: $r('sys.color.comp_background_tertiary'),iconColor: $r('sys.color.icon_primary')},backIconStyle: {backgroundColor: $r('sys.color.comp_background_tertiary'),iconColor: $r('sys.color.icon_primary')}}}},content: { // 标题栏内容设置menu:{// HdsNavigation标题栏菜单区域内容设置value:[{content: { // 第一个菜单项内容设置label: 'menu1',icon: 'resources/base/media/startIcon.png',isEnabled: true,},badge: { // 第一个菜单项信息提醒设置count: 1,}},{content: { // 第二个菜单项内容设置label: 'menu2',icon: 'resources/base/media/startIcon.png',isEnabled: true,},badge: { // 第二个菜单项信息提醒设置count: 100,}}]},title: { mainTitle: 'Main', subTitle: 'Sub' },}})}
}