HarmonyOS CustomDialog是否可以实现类似半模态的出场动画效果

HarmonyOS
2024-12-25 13:05:15
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

自定义弹窗实现动画可以通过组件内转场实现,参考链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-transition-animation-component-V5

目前暂不支持修改半模态bindSheet弹出视图的顶部圆角,可自定义实现参考链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-methods-custom-dialog-box-V5#customdialogcontrolleroptions对象说明

参考示例如下:

let anmDuration: number = 1000; // 弹窗交互

@CustomDialog
struct CustomDialogExample1 {
  controller: CustomDialogController;
  @Link showFlag: Visibility;
  // @State showFlag: Visibility = Visibility.Visible;
  @State isAutoCancel: boolean = false;
  textController: TextAreaController = new TextAreaController()

  build() {
    Column() {
      Row() {
        Text("自定义动画的弹窗")
      }
      .padding(8)
      .backgroundColor('#FFFFFF')
      .height(200)
      .margin({ bottom: 30 })
      .width('90%')
      .borderRadius({
        topLeft: 10,
        topRight: 10,
        bottomRight: 0,
        bottomLeft: 0
      })
    }
    .justifyContent(FlexAlign.End)
    .width('100%')
    .height("100%")
    .onClick(() => {
      console.log("dialogClick")
      if (this.isAutoCancel) {
        console.log("dialogClick2")
        this.cancel();
      }
    })
    .visibility(this.showFlag)
    .transition(TransitionEffect.OPACITY.animation({ duration: anmDuration })
      .combine(TransitionEffect.translate({ y: 100 })))
  }

  cancel() {
    this.showFlag = Visibility.Hidden
    console.log("closeDialog")
    setTimeout(() => {
      this.controller.close()
    }, anmDuration)
  }
}
@Entry
@Component
struct CustomDialogUser {
  @State isAutoCancel: boolean = true;
  @State showFlag: Visibility = Visibility.Visible
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample1({ isAutoCancel: this.isAutoCancel, showFlag: this.showFlag }),
    autoCancel: this.isAutoCancel,
    customStyle: true,
    onWillDismiss: (dismissDialogAction: DismissDialogAction) => {
      console.info("reason=" + JSON.stringify(dismissDialogAction.reason))
      console.log("dialog onWillDismiss")
      this.showFlag = Visibility.Hidden
      console.log("closeDialog")
      setTimeout(() => {
        this.dialogController.close()
      }, anmDuration)
      // dismissDialogAction.dismiss()
    }
  })

  build() {
    Column() {
      Button('click me').onClick(() => {
        this.showFlag = Visibility.Visible;
        this.dialogController.open()
      })
    }.width('100%').height('100%')
  }
}
分享
微博
QQ
微信
回复
2024-12-25 15:22:14
相关问题
CustomDialog如何实现模态详情页效果
1882浏览 • 1回复 待解决
应用怎么实现模态效果
2607浏览 • 1回复 待解决
二级浮层出场动画实现
1063浏览 • 1回复 待解决
HarmonyOS 模态转场
418浏览 • 1回复 待解决
HarmonyOS 模态相关使用
481浏览 • 1回复 待解决
HarmonyOS bindSheet模态弹窗
739浏览 • 1回复 待解决
HarmonyOS 如何转换模态
431浏览 • 1回复 待解决
模态转场来实现弹框样式页面
1199浏览 • 1回复 待解决
基于bindSheet模态弹窗
1424浏览 • 1回复 待解决
HarmonyOS 关于模态转场疑问
354浏览 • 1回复 待解决
listadd跟remove item入场、出场动画
1665浏览 • 1回复 待解决
HarmonyOS Grid和模态问题
395浏览 • 1回复 待解决
是否可以实现滚动锚定效果
967浏览 • 1回复 待解决
如何固定模态转场高度
904浏览 • 1回复 待解决