HarmonyOS Next应用开发——抽屉布局SideBarContainer

抽屉布局SideBarContainer

提供侧边栏可以显示和隐藏的侧边栏容器，通过子组件定义侧边栏和内容区，第一个子组件表示侧边栏，第二个子组件表示内容区。

并且侧边栏可以出现在左侧也可以出现在右侧，侧边栏可以并列跟内容区一起展示，也可以浮动在内容区展示。

在这里插入图片描述

常用属性

showSideBar(value: boolean)

设置是否显示侧边栏。注意：必须使用$$装饰，否则无效。

showControlButton(value: boolean)

设置是否显示控制按钮。

controlButton(value: ButtonStyle)

设置控制按钮样式。

sideBarWidth(value: number)

设置侧边栏宽度，默认240vp。

SideBarContainer( type?: SideBarContainerType )

名称	描述
Embed	侧边栏嵌入到组件内，和内容区并列显示。组件尺寸小于minContentWidth + minSideBarWidth,并且未设置showSideBar时，侧边栏自动隐藏。未设置minSideBarWidth或者minContentWidth采用未设置接口的默认值进行计算。组件在自动隐藏后，如果通过点击控制按钮唤出侧边栏，则侧边栏悬浮在内容区上显示。
Overlay	侧边栏浮在内容区上面。
AUTO10+	组件尺寸大于等于minSideBarWidth+minContentWidth时，采用Embed模式显示。组件尺寸小于minSideBarWidth+minContentWidth时，采用Overlay模式显示。未设置minSideBarWidth或minContentWidth时，会使用未设置接口的默认值进行计算，若计算的值小于600vp，则使用600vp做为模式切换的断点值。

开发步骤：

构建侧边栏：

Column() { //侧边栏内容区默认宽度240vpForEach(this.datas, (item: Data, index: number) => {ListItem() {Text(item.txt).fontSize(24).fontWeight(FontWeight.Bold).textAlign(TextAlign.Center).border({ width: 2, style: BorderStyle.Dotted }).width('100%').padding(20).onClick(() => { //点击列表项this.ckitem = index //更新点击下标 进而重新渲染内容区背景颜色animateTo({curve:curves.springMotion()},()=>{this.isshowing = false}) //动画关闭侧边栏})}}, (item: Data) => JSON.stringify(item))
}.width('100%')
.height('100%')
.backgroundColor(Color.Gray)
.borderRadius(10)

构建内容区：

Column() { //内容区Text(this.datas[this.ckitem].txt).fontSize(30).fontWeight(FontWeight.Bold)
}.width('100%')
.height('100%')
.backgroundColor(this.datas[this.ckitem].color)
.justifyContent(FlexAlign.Center)
.onTouch((event) => { //监听手指右边滑动和点击事件if (event.type == TouchType.Move) {this.movex = event.touches[0].xif ((this.movex - this.downx) > 50) { //产生了右侧滑动 打开抽屉animateTo({curve:curves.springMotion()},()=>{this.isshowing = true})}} else if (event.type == TouchType.Down) {this.downx = event.touches[0].x// 点击内容区就会关闭抽屉animateTo({curve:curves.springMotion()},()=>{this.isshowing = false})}
})

注意： 我们通过切换控制变量来控制侧边栏是否显示，为了显示出抽屉效果，我们给变量的变化都加入了动画。并且组件默认不支持手指滑动显示或关闭侧边栏，所以我们给内容区加入了手指右侧滑动的监听来自定义效果。

完整的代码：

import { curves } from '@kit.ArkUI';interface Data {color: Colortxt: string
}@Entry
@Component
struct SlideBarContainerPage {// 侧边栏数据源@State datas: Data[] = []// 点击item@State ckitem: number = 0// 侧边栏显示控制器@State isshowing: boolean = false// 手指按下x坐标private downx: number = 0// 手指移动x坐标private movex: number = 0aboutToAppear(): void {this.datas = [//数据源{txt: '白色',color: Color.White},{txt: '黑色',color: Color.Black},{txt: '红色',color: Color.Red},{txt: '绿色',color: Color.Green},{txt: '蓝色',color: Color.Blue},]}build() {SideBarContainer(SideBarContainerType.Overlay) {Column() { //侧边栏内容区默认宽度240vpForEach(this.datas, (item: Data, index: number) => {ListItem() {Text(item.txt).fontSize(24).fontWeight(FontWeight.Bold).textAlign(TextAlign.Center).border({ width: 2, style: BorderStyle.Dotted }).width('100%').padding(20).onClick(() => { //点击列表项this.ckitem = index //更新点击下标 进而重新渲染内容区背景颜色animateTo({curve:curves.springMotion()},()=>{this.isshowing = false}) //动画关闭侧边栏})}}, (item: Data) => JSON.stringify(item))}.width('100%').height('100%').backgroundColor(Color.Gray).borderRadius(10)Column() { //内容区Text(this.datas[this.ckitem].txt).fontSize(30).fontWeight(FontWeight.Bold)}.width('100%').height('100%').backgroundColor(this.datas[this.ckitem].color).justifyContent(FlexAlign.Center).onTouch((event) => { //监听手指右边滑动和点击事件if (event.type == TouchType.Move) {this.movex = event.touches[0].xif ((this.movex - this.downx) > 50) { //产生了右侧滑动 打开抽屉animateTo({curve:curves.springMotion()},()=>{this.isshowing = true})}} else if (event.type == TouchType.Down) {this.downx = event.touches[0].x// 点击内容区就会关闭抽屉animateTo({curve:curves.springMotion()},()=>{this.isshowing = false})}})}.height('100%').width('100%').showSideBar($$this.isshowing) //双向绑定 控制抽屉的开和关}
}