鸿蒙仓颉语言开发教程：自定义弹窗原创

幽蓝计划

发布于 2025-6-1 06:54

浏览

0收藏

假期第一天，祝大家端午节快乐。昨天观看了时代旗舰尊界S800的发布，不得不感慨这车真好啊～

放假闲来无事，继续跟大家分享仓颉语言的开发教程，今天介绍一下自定义弹窗。

仓颉语言中的自定义弹窗和ArkTs类似，但是还是有一些不同的地方。

在仓颉中通过CustomDialogController实现自定义弹窗，在弹窗中使用构造函数CustomDialogControllerOptions来传递弹窗的所有参数,为大家贴一段演示代码：

var dialogController: CustomDialogController = CustomDialogController(CustomDialogControllerOptions(
  builder: loadingdialog(),
  customStyle:true,
  autoCancel:false
  ))

然后为大家介绍自定义弹窗的各种常见属性和使用方式：

customStyle：表示弹窗样式是否自定义，设置为false时，弹窗高度最多占屏幕的90%。设置true时，弹窗可以占满整个屏幕。

autoCancel：点击空白区域是否自动消失

alignment：弹窗的对齐方式

offset：弹窗的位置偏移量

gridCount：弹窗宽度占格栅的个数，越大越宽

maskColor：自定义蒙层的颜色

cornerRadius：设置背板的圆角半径

以上就是自定义弹窗常用的一些属性，大家可以按需设置。

初始化完成后的弹窗可以使用open和close方法来打开和关闭：

dialogController.open()
dialogController.close()

在仓颉中一些参数的写法也和ArkTs不太相同，比如cancel回调方法，比如颜色的设置。还要注意的是，@CustomDialog实现的自定义弹窗的所有参数是不支持动态刷新的，这一点不太方便，幽蓝目前也正在寻找更加方便的弹窗方式。

下面为大家分享一段完整的半透明文字提示弹窗的实现代码，先看下效果：

鸿蒙仓颉语言开发教程：自定义弹窗-鸿蒙开发者社区

下面是实现代码：

var dialogController: CustomDialogController = CustomDialogController(CustomDialogControllerOptions(
  builder: loadingdialog(),
  gridCount:3,
  customStyle:true,
  autoCancel:false,
  maskColor:Color(0, 0, 0, alpha: 0.0),
  cancel:{ => AppLog.info('关闭回调') }
  ))


package ohos_app_cangjie_entry.components
import ohos.base.*
import ohos.component.*
import ohos.state_manage.*
import ohos.state_macro_manage.*
import cj_res_entry.app
@CustomDialog
public  class loadingdialog {
    var controller: Option<CustomDialogController> = Option.None
    func build() {
        Row() {
            Text('这是一个提示')
            .fontColor(Color.WHITE)
            .fontSize(15)
        }.height(200).width(200).alignItems(VerticalAlign.Center).justifyContent(FlexAlign.Center).backgroundColor(0x80000000).borderRadius(10)
    }
}

以上就是关于仓颉开发语言自定义弹窗的内容介绍，感谢阅读。#HarmonyOS语言##仓颉##购物#

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任

分类

HarmonyOS

标签

鸿蒙仓颉

已于2025-7-21 23:00:44修改