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);
    }
  }

  @Styles
  listCard() {
    .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' },
      }
    })
  }
}