鸿蒙侧边栏SideBarContainer

第八章

SideBarContainer

8.1基本用法

如图所示：

8.2基础结构

//SideBarContainer(必须包含两个子组件)
SideBarContainer(SideBarContainerType.Overlay) {
     Column() {
       // 子组件 1：侧边容器
     }
     .backgroundColor(Color.Orange)
     Column() {
       // 子组件 2：内容区域
     }
     .backgroundColor(Color.Pink)
   }

8.3常用属性

@Entry
@Component
struct Index {
  @State isShow: boolean = false

  build() {
    Column() {
      SideBarContainer(SideBarContainerType.Overlay) {
        Column() {
          Row() {
            Button('X')
              .fontColor(Color.Black)
              .fontSize(20)
              .backgroundColor(Color.White)
              .onClick(() => {
                this.isShow = false
              })
          }
          .justifyContent(FlexAlign.End)
          .padding(5)
          .width('100%')
        }
        .backgroundColor(Color.Green)

        Column() {

        }
        .height('100%')
        .width('100%')
        .backgroundColor(Color.Pink)
      }
      .controlButton({})
      .showSideBar($$this.isShow)
      .showControlButton(!this.isShow)
      .sideBarPosition(SideBarPosition.End)
      .autoHide(true)
      .minSideBarWidth(200)
      .sideBarWidth(250)
      .maxSideBarWidth(300)
    }
    .height('100%')
    .width('100%')
  }
}