鸿蒙：侧边栏显示与隐藏

前言：

本篇博客侧边栏显示与隐藏是基于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、创建一个组件或自定义构建函数，用来装左侧或右侧的侧边栏组件：

  @Builder
  theBarBuilder(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 = false
            this.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 = false
            this.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)
  }

  @Builder
  theBarBuilder(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
      })))
  }
}

练手项目效果图：

如果觉得有帮助，欢迎点赞、收藏或关注