閱讀(413) 書簽贊(0) 我要糾錯(cuò)

側(cè)邊欄容器

2024-01-22 17:57 更新

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

說明

該組件從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ù)：

參數(shù)名	參數(shù)類型	必填	參數(shù)描述
type	SideBarContainerType	否	設(shè)置側(cè)邊欄的顯示類型。默認(rèn)值：SideBarContainerType.Embed

參數(shù)名

參數(shù)類型

必填

參數(shù)描述

type

SideBarContainerType

否

設(shè)置側(cè)邊欄的顯示類型。

默認(rèn)值：SideBarContainerType.Embed

SideBarContainerType枚舉說明

名稱	描述
Embed	側(cè)邊欄嵌入到組件內(nèi)，和內(nèi)容區(qū)并列顯示。
Overlay	側(cè)邊欄浮在內(nèi)容區(qū)上面。

屬性

名稱	參數(shù)類型	描述
showSideBar	boolean	設(shè)置是否顯示側(cè)邊欄。默認(rèn)值：true
controlButton	ButtonStyle	設(shè)置側(cè)邊欄控制按鈕的屬性。
showControlButton	boolean	設(shè)置是否顯示控制按鈕。默認(rèn)值：true
sideBarWidth	number \| Length9+	設(shè)置側(cè)邊欄的寬度。默認(rèn)值：200 單位：vp 說明：設(shè)置為小于0的值時(shí)按默認(rèn)值顯示。受最小寬度和最大寬度限制，不在限制區(qū)域內(nèi)取最近的點(diǎn)。 sideBarWidth優(yōu)先于側(cè)邊欄子組件width，sideBarWidth未設(shè)置時(shí)默認(rèn)值優(yōu)先級高于側(cè)邊欄子組件width。
minSideBarWidth	number \| Length9+	設(shè)置側(cè)邊欄最小寬度。默認(rèn)值：200，單位vp 說明：設(shè)置為小于0的值時(shí)按默認(rèn)值顯示。值不能超過側(cè)邊欄容器本身寬度，超過使用側(cè)邊欄容器本身寬度。 minSideBarWidth優(yōu)先于側(cè)邊欄子組件minWidth，minSideBarWidth未設(shè)置時(shí)默認(rèn)值優(yōu)先級高于側(cè)邊欄子組件minWidth。
maxSideBarWidth	number \| Length9+	設(shè)置側(cè)邊欄最大寬度。默認(rèn)值：280，單位vp 說明：設(shè)置為小于0的值時(shí)按默認(rèn)值顯示。值不能超過側(cè)邊欄容器本身寬度，超過使用側(cè)邊欄容器本身寬度。 maxSideBarWidth優(yōu)先于側(cè)邊欄子組件maxWidth，maxSideBarWidth未設(shè)置時(shí)默認(rèn)值優(yōu)先級高于側(cè)邊欄子組件maxWidth。
autoHide9+	boolean	設(shè)置當(dāng)側(cè)邊欄拖拽到小于最小寬度后，是否自動(dòng)隱藏。默認(rèn)值：true 說明：受minSideBarWidth屬性方法影響，minSideBarWidth屬性方法未設(shè)置值使用默認(rèn)值。拖拽過程中判斷是否要自動(dòng)隱藏。小于最小寬度時(shí)需要阻尼效果觸發(fā)隱藏（越界一段距離）
sideBarPosition9+	SideBarPosition	設(shè)置側(cè)邊欄顯示位置。默認(rèn)值：SideBarPosition.Start

ButtonStyle對象說明

名稱	參數(shù)類型	必填	描述
left	number	否	設(shè)置側(cè)邊欄控制按鈕距離容器左界限的間距。默認(rèn)值：16 單位：vp
top	number	否	設(shè)置側(cè)邊欄控制按鈕距離容器上界限的間距。默認(rèn)值：48 單位：vp
width	number	否	設(shè)置側(cè)邊欄控制按鈕的寬度。默認(rèn)值：32 單位：vp
height	number	否	設(shè)置側(cè)邊欄控制按鈕的高度。默認(rèn)值：32 單位：vp
icons	{ shown: string \| PixelMap \| Resource , hidden: string \| PixelMap \| Resource , switching?: string \| PixelMap \| Resource }	否	設(shè)置側(cè)邊欄控制按鈕的圖標(biāo)： - shown: 設(shè)置側(cè)邊欄顯示時(shí)控制按鈕的圖標(biāo)。說明：資源獲取錯(cuò)誤時(shí)，使用默認(rèn)圖標(biāo)。 - hidden: 設(shè)置側(cè)邊欄隱藏時(shí)控制按鈕的圖標(biāo)。 - switching:設(shè)置側(cè)邊欄顯示和隱藏狀態(tài)切換時(shí)控制按鈕的圖標(biāo)。

SideBarPosition9+枚舉說明

名稱	描述
Start	側(cè)邊欄位于容器左側(cè)。
End	側(cè)邊欄位于容器右側(cè)。

事件

名稱	功能描述
onChange(callback: (value: boolean) => void)	當(dāng)側(cè)邊欄的狀態(tài)在顯示和隱藏之間切換時(shí)觸發(fā)回調(diào)。true表示顯示，false表示隱藏。觸發(fā)該事件的條件： 1、showSideBar屬性值變換時(shí)； 2、showSideBar屬性自適應(yīng)行為變化時(shí)； 3、分割線拖拽觸發(fā)autoHide時(shí)。

名稱

功能描述

onChange(callback: (value: boolean) => void)

當(dāng)側(cè)邊欄的狀態(tài)在顯示和隱藏之間切換時(shí)觸發(fā)回調(diào)。true表示顯示，false表示隱藏。

觸發(fā)該事件的條件：

1、showSideBar屬性值變換時(shí)；

2、showSideBar屬性自適應(yīng)行為變化時(shí)；

3、分割線拖拽觸發(fā)autoHide時(shí)。

示例


// 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, index) => {
          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 => 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)
    .onChange((value: boolean) => {
      console.info('status:' + value)
    })
  }
}