ArkTS从下往上的弹窗

最新推荐文章于 2025-06-04 14:00:36 发布

十户

最新推荐文章于 2025-06-04 14:00:36 发布

阅读量272

点赞数 3

CC 4.0 BY-SA版权

文章标签：开发语言 harmonyos 华为

本文链接：https://blog.csdn.net/gjg___gg/article/details/143577322

import { promptAction } from '@kit.ArkUI'

@Entry
@Component
struct AlbumPopupDialog {
  private customDialogComponentId: number = 0

  @Builder
  customDialogComponent() {
    Column() {
      Text('弹窗').fontSize(30)
      Row({ space: 50 }) {
        Button("确认").onClick(() => {
          promptAction.closeCustomDialog(this.customDialogComponentId)
        })
        Button("取消").onClick(() => {
          promptAction.closeCustomDialog(this.customDialogComponentId)
        })
      }
    }.height(200).padding(5).justifyContent(FlexAlign.SpaceBetween)
  }

  build() {
    Row() {
      Column({ space: 20 }) {
        Text('组件内弹窗')
          .fontSize(30)
          .onClick(() => {
            promptAction.openCustomDialog({
              transition: TransitionEffect.asymmetric(
                TransitionEffect.OPACITY.animation({ duration: 1000 }).combine(
                  TransitionEffect.translate({ y: 1000 }).animation({ duration: 1000 }))
                ,
                TransitionEffect.OPACITY.animation({ delay: 1000, duration: 1000 }).combine(
                  TransitionEffect.translate({ y: 1000 }).animation({ duration: 1000 }))
              ),
              builder: () => {
                this.customDialogComponent()
              },
              //isModal: false,
              alignment: DialogAlignment.Bottom,
              onWillDismiss: (dismissDialogAction: DismissDialogAction) => {
                console.info("reason" + JSON.stringify(dismissDialogAction.reason))
                console.log("dialog onWillDismiss")
                if (dismissDialogAction.reason == DismissReason.PRESS_BACK) {
                  dismissDialogAction.dismiss()
                }
                if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) {
                  dismissDialogAction.dismiss()
                }
              }
            }).then((dialogId: number) => {
              this.customDialogComponentId = dialogId
            })
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}