SideBarContainer

提供側(cè)邊欄可以顯示和隱藏的側(cè)邊欄容器，通過子組件定義側(cè)邊欄和內(nèi)容區(qū)，第一個(gè)子組件表示側(cè)邊欄，第二個(gè)子組件表示內(nèi)容區(qū)。

說明：
開發(fā)前請(qǐng)熟悉鴻蒙開發(fā)指導(dǎo)文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
該組件從API Version 8開始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

子組件

可以包含子組件。

說明：

• 子組件類型：系統(tǒng)組件和自定義組件，不支持渲染控制類型（[if/else]、[ForEach]和[LazyForEach]）。
• 子組件個(gè)數(shù)：必須且僅包含2個(gè)子組件。
• 子組件個(gè)數(shù)異常時(shí)：3個(gè)或以上子組件，顯示第一個(gè)和第二個(gè)。1個(gè)子組件，顯示側(cè)邊欄，內(nèi)容區(qū)為空白。

接口

SideBarContainer( type?: SideBarContainerType )

參數(shù)：

SideBarContainerType枚舉說明

屬性

除支持[通用屬性]外，還支持以下屬性：

ButtonStyle對(duì)象說明

SideBarPosition9+枚舉說明

DividerStyle10+對(duì)象說明

說明：

針對(duì)側(cè)邊欄子組件設(shè)置[通用屬性寬高]時(shí)，寬高都不生效。 針對(duì)側(cè)邊欄內(nèi)容區(qū)設(shè)置[通用屬性寬高]時(shí)，寬高都不生效，默認(rèn)占滿SideBarContainer的剩余空間。

當(dāng)showSideBar屬性未設(shè)置時(shí)，依據(jù)組件大小進(jìn)行自動(dòng)顯示：

• 小于minSideBarWidth + minContentWidth：默認(rèn)不顯示側(cè)邊欄。
• 大于等于minSideBarWidth + minContentWidth：默認(rèn)顯示側(cè)邊欄。

事件

除支持[通用事件]外，還支持以下事件：

示例

// xxx.ets
@Entry
@Component
struct SideBarContainerExample {
  normalIcon: Resource = $r("app.media.icon")
  selectedIcon: Resource = $r("app.media.icon")
  @State arr: number[] = [1, 2, 3]
  @State current: number = 1

  build() {
    SideBarContainer(SideBarContainerType.Embed) {
      Column() {
        ForEach(this.arr, (item: number) = > {
          Column({ space: 5 }) {
            Image(this.current === item ? this.selectedIcon : this.normalIcon).width(64).height(64)
            Text("Index0" + item)
              .fontSize(25)
              .fontColor(this.current === item ? '#0A59F7' : '#999')
              .fontFamily('source-sans-pro,cursive,sans-serif')
          }
          .onClick(() = > {
            this.current = item
          })
        }, (item: string) = > item)
      }.width('100%')
      .justifyContent(FlexAlign.SpaceEvenly)
      .backgroundColor('#19000000')


      Column() {
        Text('SideBarContainer content text1').fontSize(25)
        Text('SideBarContainer content text2').fontSize(25)
      }
      .margin({ top: 50, left: 20, right: 30 })
    }
    .controlButton({
      icons: {
        hidden: $r('app.media.drawer'),
        shown: $r('app.media.drawer'),
        switching: $r('app.media.drawer')
      }
    })
    .sideBarWidth(150)
    .minSideBarWidth(50)
    .maxSideBarWidth(300)
    .minContentWidth(0)
    .onChange((value: boolean) = > {
      console.info('status:' + value)
    })
    .divider({ strokeWidth: '1vp', color: Color.Gray, startMargin: '4vp', endMargin: '4vp' })
  }
}

審核編輯 黃宇