HarmonyOS 5.0 应用开发——抽屉布局 SideBarContainer
作者：高心星
- 2024-10-31 江苏
本文字数：2336 字
阅读完需：约 8 分钟
【高心星出品】
抽屉布局 SideBarContainer
提供侧边栏可以显示和隐藏的侧边栏容器，通过子组件定义侧边栏和内容区，第一个子组件表示侧边栏，第二个子组件表示内容区。
并且侧边栏可以出现在左侧也可以出现在右侧，侧边栏可以并列跟内容区一起展示，也可以浮动在内容区展示。
常用属性
showSideBar(value: boolean)
复制代码
设置是否显示侧边栏。注意：必须使用 $$装饰，否则无效。
showControlButton(value: boolean)
复制代码
设置是否显示控制按钮。
controlButton(value: ButtonStyle)
复制代码
设置控制按钮样式。
sideBarWidth(value: number)
复制代码
设置侧边栏宽度，默认 240vp。
SideBarContainer( type?: SideBarContainerType )
复制代码
开发步骤：
构建侧边栏：
Column() { //侧边栏内容区默认宽度240vp ForEach(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].x if ((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: Color txt: string}
@Entry@Componentstruct SlideBarContainerPage { // 侧边栏数据源 @State datas: Data[] = [] // 点击item @State ckitem: number = 0 // 侧边栏显示控制器 @State isshowing: boolean = false // 手指按下x坐标 private downx: number = 0 // 手指移动x坐标 private movex: number = 0
aboutToAppear(): 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() { //侧边栏内容区默认宽度240vp ForEach(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].x if ((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) //双向绑定 控制抽屉的开和关 }}
复制代码
划线
评论
复制
发布于: 刚刚阅读数: 2
高心星
关注
天将降大任于斯人也，必先苦其心志。 2024-10-17 加入
华为开发者专家（HDE）。 10年教学经验，兼任多家科技公司技术顾问。先后从事JavaEE项目开发、Python爬虫、HarmonyOS移动应用开发等课程的教学工作。参与开发《鸿蒙应用开发基础》和《鸿蒙项目实战》等课程。
评论