当前位置：首页 > news >正文

鸿蒙：侧边栏显示与隐藏

news 2025/9/27 6:47:19

前言：

本篇博客侧边栏显示与隐藏是基于Stack、transition、animation实现应用侧边栏点击显示和左滑隐藏的效果。

我们还是老样子，跟着官方文档学习与实践，链接如下：

https://developer.huawei.com/consumer/cn/doc/architecture-guides/sidebar_slide-0000002308440974https://developer.huawei.com/consumer/cn/doc/architecture-guides/sidebar_slide-0000002308440974大致给大伙写一下实现流程：

1、定义变量【我使用的是V2装饰器，你使用V1也可以】：

  leftTitle: string = "这是左侧边栏"rightTitle: string = "这是右侧边栏"@Local isShowLeftBuilder: boolean = false // 左侧侧边栏是否显示@Local isShowRightBuilder: boolean = false // 右侧侧边栏是否显示@Local screenWidthPx: number = 0 // 屏幕宽度

2、UI初始化前获取屏幕宽度：
aboutToAppear(): void {this.screenWidthPx = display.getDefaultDisplaySync().width}

3、创建一个组件或自定义构建函数，用来装左侧或右侧的侧边栏组件：

@BuildertheBarBuilder(title: string) {Column() {Text(title).fontSize(30).fontWeight(FontWeight.Bold).padding(20)Text("点击阴影处关闭侧边栏")}.backgroundColor(Color.White).justifyContent(FlexAlign.Center).width("85%").height("100%").expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]).transition(TransitionEffect.opacity(0.8).animation({ duration: 300, curve: Curve.Smooth }).combine(TransitionEffect.translate({x: this.isShowLeftBuilder ? -this.screenWidthPx * 0.85 : this.screenWidthPx * 0.85})))}

4、整体页面布局：

 Stack() {// 主页面Column({ space: 20 }) {Text("👏案例页面👍").fontSize(30).fontWeight(FontWeight.Bold)Button("点击我开启左侧边栏").onClick(() => {this.isShowLeftBuilder = true})Text("1111111111111111111111111111111111111111111111111111111111111111111111111111111111")Button("点击我开启右侧边栏").onClick(() => {this.isShowRightBuilder = true})Text("1111111111111111111111111111111111111111111111111111111111111111111111111111111111")}.justifyContent(FlexAlign.Center).width("100%").height("100%")// 遮罩层if (this.isShowLeftBuilder || this.isShowRightBuilder) {Column().onClick(() => {this.isShowLeftBuilder = falsethis.isShowRightBuilder = false}).width("100%").height("100%").expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]).backgroundColor(Color.Black).opacity(0.5)}// 侧边栏if (this.isShowLeftBuilder) {this.theBarBuilder(this.leftTitle)} else if (this.isShowRightBuilder) {this.theBarBuilder(this.rightTitle)}}.width("100%").height("100%").alignContent(this.isShowLeftBuilder ? Alignment.Start : Alignment.End)

5、Index.ets 完整代码：

import { display } from '@kit.ArkUI'@Entry
@ComponentV2
struct Index {leftTitle: string = "这是左侧边栏"rightTitle: string = "这是右侧边栏"@Local isShowLeftBuilder: boolean = false // 左侧侧边栏是否显示@Local isShowRightBuilder: boolean = false // 右侧侧边栏是否显示@Local screenWidthPx: number = 0 // 屏幕宽度aboutToAppear(): void {this.screenWidthPx = display.getDefaultDisplaySync().width}build() {Stack() {// 主页面Column({ space: 20 }) {Text("👏案例页面👍").fontSize(30).fontWeight(FontWeight.Bold)Button("点击我开启左侧边栏").onClick(() => {this.isShowLeftBuilder = true})Text("1111111111111111111111111111111111111111111111111111111111111111111111111111111111")Button("点击我开启右侧边栏").onClick(() => {this.isShowRightBuilder = true})Text("1111111111111111111111111111111111111111111111111111111111111111111111111111111111")}.justifyContent(FlexAlign.Center).width("100%").height("100%")// 遮罩层if (this.isShowLeftBuilder || this.isShowRightBuilder) {Column().onClick(() => {this.isShowLeftBuilder = falsethis.isShowRightBuilder = false}).width("100%").height("100%").expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]).backgroundColor(Color.Black).opacity(0.5)}// 侧边栏if (this.isShowLeftBuilder) {this.theBarBuilder(this.leftTitle)} else if (this.isShowRightBuilder) {this.theBarBuilder(this.rightTitle)}}.width("100%").height("100%").alignContent(this.isShowLeftBuilder ? Alignment.Start : Alignment.End)}@BuildertheBarBuilder(title: string) {Column() {Text(title).fontSize(30).fontWeight(FontWeight.Bold).padding(20)Text("点击阴影处关闭侧边栏")}.backgroundColor(Color.White).justifyContent(FlexAlign.Center).width("85%").height("100%").expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]).transition(TransitionEffect.opacity(0.8).animation({ duration: 300, curve: Curve.Smooth }).combine(TransitionEffect.translate({x: this.isShowLeftBuilder ? -this.screenWidthPx * 0.85 : this.screenWidthPx * 0.85})))}
}

练手项目效果图：