设置overlay模式的侧边栏
===============

#### 场景介绍

从6.0.0(20)版本开始，新增支持设置overlay模式的侧边栏。

[HdsSideBar](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ui-design-hdssidebar)提供可以显示和隐藏的侧边栏容器，通过子组件定义侧边栏和内容区，第一个子组件表示侧边栏，第二个子组件表示内容区，通过设置[sideBarContainerType](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-sidebarcontainer#sidebarcontainertype枚举说明)的值为SideBarContainerType.Overlay，使得当前HdsSideBar为悬浮样式。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/e5/v3/5TW9ntAmQmiBeaP2v0ptVw/zh-cn_image_0000002625108081.png?HW-CC-KV=V1&HW-CC-Date=20260612T073349Z&HW-CC-Expire=86400&HW-CC-Sign=F8DAC272B278729F87786B7BD6D796A51BAEE4D8C7E16F3E11B16686B61EB2FA)

#### 开发步骤

1.  导入相关模块。
    
    import { HdsSideBar } from '@kit.UIDesignKit';
    
2.  设置图片。
    
    将图片资源，放到entry/src/main/resources/base/media下。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/70/v3/g7gOiCFYTHOaUxQX3yw-Xw/zh-cn_image_0000002594668564.png?HW-CC-KV=V1&HW-CC-Date=20260612T073349Z&HW-CC-Expire=86400&HW-CC-Sign=5F42F61579C9B2439229EA4F8245EC995F730FDE8222D0D8C37092FEFA49272E)
    
3.  创建HdsSideBar侧边栏组件，设置展开模式为overlay。
    
    @Entry
    @ComponentV2
    struct Index {
      @Local isSideBarContainerMask: boolean = true;
      @Local blankHeight: number = 48;
      @Local isAutoHide: boolean = false;
      @Local isShowSidebar: boolean = true;
      @Local triggerValueReplace: number = 0;
      // 左侧侧边栏区
      @Builder
      SideBarPanelBuilder() {
        Column() {
          Blank().height(this.blankHeight)
          Text('HDSSideBar Menu 1')
            .fontSize(14)
          Text('HDSSideBar Menu 2')
            .fontSize(14)
        }
        .width('100%')
        .height('100%')
      }
      // 右侧内容区
      @Builder
      ContentPanelBuilder() {
        Column(){
          Blank().height(this.blankHeight)
          Image($r('app.media.view')) // view为自定义资源，开发者需替换本地资源
            .width('80%')
            .height('50%')
            .margin({ top: 8 })
            .padding({
              right: '16vp',
              left: '16vp',
              bottom: '16vp'
            })
            .borderRadius(8)
          Column() {
            Text('HDSSideBar content text1')
              .fontSize(14)
            Text('HDSSideBar content text2')
              .fontSize(14)
          }
          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)
          }
          .id('side\_bar\_button')
          .backgroundColor($r('sys.color.ohos\_id\_color\_button\_normal'))
          .height(24)
          .width(24)
          .animation({ curve: Curve.Sharp, duration: 100 })
          .onClick(() => {
            this.isShowSidebar = !this.isShowSidebar;
          })
        }
      }
      @BuilderParam contentBuilder: () => void = this.ContentPanelBuilder
      @BuilderParam sideBarBuilder: () => void = this.SideBarPanelBuilder
      @Builder
      HDSSideBarBuilder() {
        HdsSideBar({
          sideBarPanelBuilder: (): void => {
            this.sideBarBuilder()
          },
          contentPanelBuilder: (): void => {
            this.contentBuilder()
          },
          autoHide: this.isAutoHide,
          contentAreaMask: this.isSideBarContainerMask,
          sideBarContainerType: SideBarContainerType.Overlay,
          isShowSideBar: this.isShowSidebar,
          $isShowSideBar: (isShowSidebar: boolean) => {
            this.isShowSidebar = !isShowSidebar
          },
        })
      }
      @Builder
      build() {
        Stack() {
          this.HDSSideBarBuilder()
        }
      }
    }