SideBarContainer
提供側邊欄可以顯示和隱藏的側邊欄容器,通過子組件定義側邊欄和內容區,第一個子組件表示側邊欄,第二個子組件表示內容區。
說明:
開發前請熟悉鴻蒙開發指導文檔 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md
]
該組件從API Version 8開始支持。后續版本如有新增內容,則采用上角標單獨標記該內容的起始版本。
子組件
可以包含子組件。
說明:
接口
SideBarContainer( type?: SideBarContainerType )
參數:
參數名 | 參數類型 | 必填 | 參數描述 |
---|---|---|---|
type | SideBarContainerType | 否 | 設置側邊欄的顯示類型。 默認值:SideBarContainerType.Embed |
SideBarContainerType枚舉說明
名稱 | 描述 |
---|---|
Embed | 側邊欄嵌入到組件內,和內容區并列顯示。 組件尺寸小于minContentWidth + minSideBarWidth,并且未設置showSideBar時,側邊欄自動隱藏。 未設置minSideBarWidth或者minContentWidth采用未設置接口的默認值進行計算。 組件在自動隱藏后,如果通過點擊控制按鈕喚出側邊欄,則側邊欄懸浮在內容區上顯示。 |
Overlay | 側邊欄浮在內容區上面。 |
AUTO | 組件尺寸大于等于minSideBarWidth+minContentWidth時,采用Embed模式顯示。 組件尺寸小于minSideBarWidth+minContentWidth時,采用Overlay模式顯示。 未設置minSideBarWidth或minContentWidth時,會使用未設置接口的默認值進行計算,若計算的值小于600vp,則使用600vp做為模式切換的斷點值。 |
屬性
除支持[通用屬性]外,還支持以下屬性:
名稱 | 參數類型 | 描述 |
---|---|---|
showSideBar | boolean | 設置是否顯示側邊欄。 默認值:true 從API version 10開始,該屬性支持[$$]雙向綁定變量。 |
controlButton | [ButtonStyle] | 設置側邊欄控制按鈕的屬性。 |
showControlButton | boolean | 設置是否顯示控制按鈕。 默認值:true |
sideBarWidth | number | [Length]9+ |
minSideBarWidth | number | [Length]9+ |
maxSideBarWidth | number | [Length]9+ |
autoHide9+ | boolean | 設置當側邊欄拖拽到小于最小寬度后,是否自動隱藏。 默認值:true**說明:**受minSideBarWidth屬性方法影響,minSideBarWidth屬性方法未設置值使用默認值。 拖拽過程中判斷是否要自動隱藏。小于最小寬度時需要阻尼效果觸發隱藏(越界一段距離) |
sideBarPosition9+ | [SideBarPosition] | 設置側邊欄顯示位置。 默認值:SideBarPosition.Start |
divider10+ | [DividerStyle] | null |
minContentWidth10+ | [Dimension] | SideBarContainer組件內容區可顯示的最小寬度。 默認值:360vp 單位:vp**說明:**設置為小于0,內容區顯示的最小寬度為360vp,未設置該屬性時,組件內容區的可縮小到0。 Embed場景下,增大組件尺寸時僅增大內容區的尺寸。 縮小組件尺寸時,先縮小內容區的尺寸至minContentWidth。繼續縮小組件尺寸時,保持內容區寬度minContentWidth不變,優先縮小側邊欄的尺寸。 當縮小側邊欄的尺寸至minSideBarWidth后,繼續縮小組件尺寸時, - 如果autoHide屬性為false,則會保持側邊欄寬度minSideBarWidth和內容區寬度minContentWidth不變,但內容區會被截斷顯示; - 如果autoHide屬性為true,則會優先隱藏側邊欄,然后繼續縮小至內容區寬度minContentWidth后,內容區寬度保持不變,但內容區會被截斷顯示。 minContentWidth優先于側邊欄的maxSideBarWidth與sideBarWidth屬性,minContentWidth未設置時默認值優先級低于設置的minSideBarWidth與maxSideBarWidth屬性。 |
ButtonStyle對象說明
名稱 | 參數類型 | 必填 | 描述 |
---|---|---|---|
left | number | 否 | 設置側邊欄控制按鈕距離容器左界限的間距。 默認值:16vp 單位:vp |
top | number | 否 | 設置側邊欄控制按鈕距離容器上界限的間距。 默認值:48vp 單位:vp |
width | number | 否 | 設置側邊欄控制按鈕的寬度。 默認值: API version 9及之前版本:32vp 從API version 10開始:24vp 單位:vp |
height | number | 否 | 設置側邊欄控制按鈕的高度。 默認值: API version 9及之前版本:32vp 從API version 10開始:24vp 單位:vp |
icons | { shown: string | PixelMap | [Resource] , hidden: string |
SideBarPosition9+枚舉說明
名稱 | 描述 |
---|---|
Start | 側邊欄位于容器左側。 |
End | 側邊欄位于容器右側。 |
DividerStyle10+對象說明
名稱 | 參數類型 | 必填 | 描述 |
---|---|---|---|
strokeWidth | [Length] | 是 | 分割線的線寬。 |
color | [ResourceColor] | 否 | 分割線的顏色。 默認值:#000000,3% |
startMargin | [Length] | 否 | 分割線與側邊欄頂端的距離。 默認值:0 |
endMargin | [Length] | 否 | 分割線與側邊欄底端的距離。 默認值:0 |
說明:
針對側邊欄子組件設置[通用屬性寬高]時,寬高都不生效。 針對側邊欄內容區設置[通用屬性寬高]時,寬高都不生效,默認占滿SideBarContainer的剩余空間。
當showSideBar屬性未設置時,依據組件大小進行自動顯示:
- 小于minSideBarWidth + minContentWidth:默認不顯示側邊欄。
- 大于等于minSideBarWidth + minContentWidth:默認顯示側邊欄。
事件
除支持[通用事件]外,還支持以下事件:
名稱HarmonyOS與OpenHarmony鴻蒙文檔籽料:mau123789是v直接拿 | 功能描述 |
---|---|
onChange(callback: (value: boolean) => void) | 當側邊欄的狀態在顯示和隱藏之間切換時觸發回調。true表示顯示,false表示隱藏。 觸發該事件的條件: 1、showSideBar屬性值變換時; 2、showSideBar屬性自適應行為變化時; 3、分割線拖拽觸發autoHide時。 |
示例
// 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' })
}
}
審核編輯 黃宇
聲明:本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人,不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用,如有內容侵權或者其他違規問題,請聯系本站處理。
舉報投訴
-
組件
+關注
關注
1文章
512瀏覽量
17813 -
鴻蒙
+關注
關注
57文章
2339瀏覽量
42812
發布評論請先 登錄
相關推薦
評論