侧边栏菜单样式

场景介绍

从6.0.0(20) Beta1版本开始，新增支持设置侧边栏菜单样式。

HdsSideMenu提供一种菜单栏样式组件。设置侧边栏对应的一级菜单和二级菜单，并显示其新消息数量。

开发步骤

1. 导入相关模块。

   import { HdsSideMenu, HdsSideMenuMainItem, HdsSideMenuSubItem, HdsSideMenuBadgeParam, HdsSideBar } from '@kit.UIDesignKit';
   import { SymbolGlyphModifier } from '@kit.ArkUI';

2. 设置对应的一级菜单和二级菜单，并显示其新消息数量。

   @Entry
   @ComponentV2
   struct Index {
     @Local showControlButton: boolean = true;
     @Local sideBarMask: boolean = false;
     @Local autoHide: boolean = true;
     @Local barStateTypeText: string = "Select BarState";
     @Local widthIndex: number = 0;
     @Local badgeNumber: HdsSideMenuBadgeParam = { count: 50 };
     @Local useTheme: boolean = false;
     @Local selectedIndex: number = 2;
     @Local selectedTransparency: number = 0.6;
     @Local str: string = "短信";
     @Local isShowSidebar: boolean = true;
     listOptionsDefault?: HdsSideMenuMainItem[] = [
       new HdsSideMenuMainItem(
         {
           symbol: new SymbolGlyphModifier($r('sys.symbol.ohos_folder_badge_plus')).fontSize(14),
           label: $r('sys.string.TextView_engr_phone'),
         }),
       new HdsSideMenuMainItem({
         icon: $r('sys.symbol.person_wave_3'),
         label: 'Tuesday',
         hdsSideMenuSubItem: [
           new HdsSideMenuSubItem({ label: this.str, badge: this.badgeNumber })],
       }),
       new HdsSideMenuMainItem({
         symbol: new SymbolGlyphModifier($r('sys.symbol.person_crop_circle_fill_1')),
         label: 'Wednesday',
       }),
     ]
     @Builder
     SideBarPanelBuilder() {
       Column() {
         HdsSideMenu({
           items: this.listOptionsDefault,
           selectedIndex: this.selectedIndex,
           $selectedIndex: (selectedIndex: number) => {
             this.selectedIndex = selectedIndex;
           },
         })
       }
       .height('100%')
     }
     //右侧内容区
     @Builder
     ContentPanelBuilder() {
       Column() {
         Column() {
           Button() {
             SymbolGlyph(this.isShowSidebar ? $r('sys.symbol.open_sidebar') : $r('sys.symbol.close_sidebar'))
               .fontWeight(FontWeight.Normal)
               .fontSize($r('sys.float.ohos_id_text_size_headline7'))
               .fontColor([$r('sys.color.ohos_id_color_titlebar_icon')])
               .hitTestBehavior(HitTestMode.None)
           }
           .backgroundColor($r('sys.color.ohos_id_color_button_normal'))
           .height(24)
           .width(24)
           .animation({ curve: Curve.Sharp, duration: 100 })
           .onClick(() => {
             this.isShowSidebar = !this.isShowSidebar;
           })
         }
       }
       .height('100%')
       .width('100%')
     }
     @BuilderParam sideBarBuilder: () => void = this.SideBarPanelBuilder
     @BuilderParam contentBuilder: () => void = this.ContentPanelBuilder
     @Builder
     build() {
       Column() {
         HdsSideBar({
           sideBarPanelBuilder: (): void => {
             this.sideBarBuilder()
           },
           contentPanelBuilder: (): void => {
             this.contentBuilder()
           },
           isShowSideBar: this.isShowSidebar,
           $isShowSideBar: (isShowSidebar: boolean) => {
             this.isShowSidebar = !isShowSidebar
           },
         })
       }
     }
   }