设置embed模式的侧边栏

场景介绍

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

HdsSideBar提供可以显示和隐藏的侧边栏容器，通过子组件定义侧边栏和内容区，第一个子组件表示侧边栏，第二个子组件表示内容区，通过设置sideBarContainerType的值为SideBarContainerType.Embed，使得当前HdsSideBar为嵌入样式。

开发步骤

1. 导入相关模块。

   import { HdsSideBar } from '@kit.UIDesignKit';

2. 设置图片。

   将图片资源，放到entry/src/main/resources/base/media下。

   

3. 创建HdsSideBar侧边栏组件，设置展开模式为embed。

   @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.Embed,
         isShowSideBar: this.isShowSidebar,
         $isShowSideBar: (isShowSidebar: boolean) => {
           this.isShowSidebar = !isShowSidebar
         },
       })
     }
     @Builder
     build() {
       Stack() {
         this.HDSSideBarBuilder()
       }
     }
   }