自定义dialog如何设置宽度铺满,实现底部弹出的一个效果

​自定义dialog如何设置宽度铺满,实现底部弹出的一个效果。

HarmonyOS
2024-06-04 23:39:06
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
xiaohur

使用模态转场实现当前效果。

示例代码:

@CustomDialog 
struct CustomDialogExample { 
  cancel: () => void = () => { 
    console.info('Callback when the first button is clicked') 
  } 
  confirm: () => void = () => { 
    console.info('Callback when the second button is clicked') 
  } 
  controller: CustomDialogController = new CustomDialogController({ 
    builder: CustomDialogExample({ 
      cancel: this.cancel, 
      confirm: this.confirm, 
    }), 
    autoCancel: true, 
    customStyle: true, 
 
  }) 
  @State showFlag: Visibility = Visibility.Visible; 
 
  build() { 
    Column() { 
      Text('我是内容') 
        .fontSize(20) 
        .margin({ top: 10, bottom: 10 }) 
        .backgroundColor('#FFFFFF') 
        .height(200) 
        .width('100%') 
        .margin({ top: 600 }) 
 
    } 
    .width('100%') 
    .height('100%') 
    .onClick(() => { 
      this.showFlag = Visibility.Hidden 
      setTimeout(() => { 
        this.controller.close() 
      }, 3000) 
    }) 
    .visibility(this.showFlag) 
    .transition( 
      TransitionEffect.asymmetric( 
        TransitionEffect.OPACITY.animation({ duration: 2000, curve: Curve.Ease }).combine( 
          TransitionEffect.translate({ y: 200 })) 
        , 
        TransitionEffect.OPACITY.animation({ duration: 5000, curve: Curve.Ease }).combine( 
          TransitionEffect.translate({ y: 200 })) 
      )) 
 
  } 
} 
 
@Entry 
@Component 
struct CustomDialogUser { 
  // @State showFlag :Visibility = Visibility.Visible 
  @State bud: Record<string, Function | void> = { 'cancel': this.onCancel(), 'confirm': this.onAccept() } 
  dialogController: CustomDialogController = new CustomDialogController({ 
    builder: CustomDialogExample(this.bud), 
    autoCancel: true, 
    customStyle: true, 
  }) 
 
  onCancel() { 
    console.info('Callback when the first button is clicked') 
  } 
 
  onAccept() { 
    console.info('Callback when the second button is clicked') 
  } 
 
  build() { 
    Column() { 
      Button('click me') 
        .onClick(() => { 
          this.dialogController.open() 
        }) 
 
    }.width('100%').height('100%').margin({ top: 5 }) 
 
  } 
}

文档链接:

模态转场

分享
微博
QQ
微信
回复
2024-06-05 20:05:47
相关问题
如何在全局实现一个自定义dialog弹窗
1230浏览 • 1回复 待解决
如何封装一个自定义Dialog对话框
972浏览 • 1回复 待解决
如何实现一个自定义样式toast提示
683浏览 • 1回复 待解决
鸿蒙怎么实现自定义布局Dialog
7838浏览 • 2回复 已解决
ArkTS如何实现一个底部弹窗?
72浏览 • 1回复 待解决
如何自定义函数中创建一个UI组件
719浏览 • 1回复 待解决
如何设置自定义弹窗位置
790浏览 • 1回复 待解决