侧边栏菜单样式
=======

#### 场景介绍

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

[HdsSideMenu](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ui-design-hdssidemenu)提供一种菜单栏样式组件。设置侧边栏对应的一级菜单和二级菜单，并显示其新消息数量。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/37/v3/zbQb7bgbS7-YFnos5eioqw/zh-cn_image_0000002625108083.png?HW-CC-KV=V1&HW-CC-Date=20260612T073349Z&HW-CC-Expire=86400&HW-CC-Sign=AB9E1B235626ECCF530012644FE223142504CF974F1A1B3812B0424A12528571)

#### 开发步骤

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