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