鸿蒙 修改自定义弹窗CustomDialog圆角

2024-07-03  本文已影响0人  Accepted_

如图所示,自定义弹窗默认的圆角很大,不是UI设计师想要的效果。


官方自定义弹窗示例图

弹窗圆角修改方式如下:
① 需要先给CustomDialogControllercustomStyle属性设置为true (弹窗容器样式是否自定义)

dialogController: CustomDialogController = new CustomDialogController({
    builder: ConfirmDialog({
    alignment: DialogAlignment.Center,
    autoCancel: false, // 设置false 点击半透明遮罩弹窗不会关闭
    customStyle: true  //设置为true才可以修改圆角
  })

② 给@CustomDialog修饰的弹窗最外层容器【增加背景色】,并【添加圆角】

@CustomDialog
export default struct ConfirmDialog {
  controller: CustomDialogController
  build() {
    Column() {
        //...弹窗 UI 布局
    }.borderRadius(8).backgroundColor(Color.White).width("90%")
  }
}
就可以啦!修改后的效果图: 修改圆角生效
上一篇 下一篇

猜你喜欢

热点阅读