HarmonyOS鸿蒙Next中Diaolog实现侧边栏效果

1、控件选型

UX需求侧边栏从右侧划出，上下撑满全屏。应用首页Tabs+content布局。

• 系统控件Sidebarcontainer

测试后Sidebarcontainer只能在content布局中展示，无法覆盖导航栏区域实现撑满全屏效果，故放弃使用

• 自定义Dialog

通过设置Dialog出场与退场动画来模拟侧边栏显示

2、实现代码

SideBarDialog

import { display } from '@kit.ArkUI';
import { SideBarViewModel } from './SideBarViewModel';

@CustomDialog
export struct SideBarDialog {
  controller: CustomDialogController;
  @Require viewModel?: SideBarViewModel;

  aboutToAppear(): void {
    setTimeout(()=>{
      if (this.viewModel) {
        this.viewModel.showFlag = Visibility.Visible;
      }
    }, 200)
  }

  build() {
    Column() {
      // 侧边栏布局
    }
    .width('80%')
    .height(this.getDisplayHeight())
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
    .transition(TransitionEffect.OPACITY.animation({ duration: 200, curve: Curve.EaseOut })
      .combine(TransitionEffect.translate({ x: 282 }))) // 出场退场动画
    .visibility(this.viewModel?.showFlag)
  }

  closeDialog() {
    if (this.viewModel) {
      this.viewModel.showFlag = Visibility.Hidden;
    }
    setTimeout(() => {
      this.controller.close();
    }, 200);
  }

  getDisplayHeight() {
    const displayWindow = display.getDefaultDisplaySync();
    return this.getUIContext().px2vp(displayWindow.height);
  }
}

SideBarViewModel

@ObservedV2
export class SideBarViewModel {
  @Trace showFlag: Visibility = Visibility.Visible;
}

@Local sideBarDialog?: CustomDialogController;
@Local viewModel:SideBarViewModel = new SideBarViewModel()

  showSideBarDialog() {
    this.sideBarDialog = new CustomDialogController({
      builder: SideBarDialog({
        viewModel: this.viewModel,
      }),
      autoCancel: true,
      customStyle: true,
      alignment: DialogAlignment.CenterEnd,
      onWillDismiss:()=>{
        // 点击空白处，执行退场动画消失
        this.viewModel.showFlag = Visibility.Hidden;
        setTimeout(()=>{
          this.sideBarDialog?.close();
        }, 200)
      }
    })
    this.sideBarDialog.open();
  }