自定义弹窗使用指南

基本概念

自定义弹窗组件通过@CustomDialog修饰，用于创建可自定义样式和内容的弹窗。使用时需注意以下要点：

1.必须用@CustomDialog修饰弹窗类
2.弹窗类必须包含Option<CustomDialogController>类型的属性
3.弹窗参数在构造时确定，不支持动态刷新

使用步骤

1. 创建自定义弹窗类

@CustomDialog
class MyDialog {
    var controller: Option<CustomDialogController> = Option.None
    
    func build() {
        // 自定义弹窗内容
        Column() {
            Text("这是一个自定义弹窗")
                .fontSize(30)
                .margin(20)
            
            Button("取消").onClick { evt =>
                controller?.close()
            }.margin(10)
            
            Button("确认").onClick { evt =>
                controller?.close()
            }.margin(10)
        }
        .width(400)
        .height(300)
        .backgroundColor(Color.White)
    }
}

2. 在主界面中使用弹窗

@Entry
@Component
struct MyView {
    // 创建弹窗控制器
    var dialogController: CustomDialogController = CustomDialogController(
        CustomDialogControllerOptions(
            builder: MyDialog() // 传入弹窗实例
        )
    )
    
    build() {
        Column() {
            Button("打开弹窗")
                .onClick(() => {
                    dialogController.open() // 打开弹窗
                })
                .margin(20)
        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
    }
}

参数配置

CustomDialogControllerOptions提供丰富的配置选项：

CustomDialogControllerOptions(
    builder: () -> Unit,      // 弹窗内容构建器
    cancel: () -> Unit = {},  // 关闭回调
    autoCancel: Bool = true,  // 是否允许点击遮罩关闭
    alignment: DialogAlignment = DialogAlignment.Default, // 对齐方式
    offset: Offset = Offset(0.vp, 0.vp), // 偏移量
    customStyle: Bool = false, // 是否自定义样式
    gridCount: Option<Int32> = Option.None, // 栅格宽度
    maskColor: Color = Color(0x33000000), // 遮罩颜色
    maskRect: Rectangle = Rectangle(), // 遮罩区域
    openAnimation: Option<AnimateParam> = Option.None, // 打开动画
    closeAnimation: Option<AnimateParam> = Option.None, // 关闭动画
    showInSubWindow: Bool = false, // 是否在子窗口显示
    backgroundColor: Option<Color> = Option.None, // 背景色
    cornerRadius: Length = 24.vp // 圆角半径
)

功能方法

1. ​打开弹窗​：

   dialogController.open()

2. ​关闭弹窗​：

   dialogController.close()

3. ​设置构建器​（通常不需要手动调用）：

   dialogController.setBuilder(() => { /* 构建内容 */ })

4. ​绑定视图​（通常不需要手动调用）：

   dialogController.bindView(customView)

注意事项

1. 弹窗内容构建器builder不能是变量，必须在初始化时直接传入
2. 混合页面场景下不支持设置动画属性
3. showInSubWindow为true的弹窗无法触发另一个showInSubWindow为true的弹窗
4. 自定义样式(customStyle=true)时，宽度跟随子节点，圆角为0，背景透明

完整示例

@CustomDialog
class CustomAlertDialog {
    var controller: Option<CustomDialogController> = Option.None
    
    func build() {
        Column() {
            Text("警告")
                .fontSize(32)
                .fontColor(Color.Red)
                .margin(20)
            
            Text("确定要删除该文件吗？")
                .fontSize(28)
                .margin(20)
            
            Row() {
                Button("取消")
                    .onClick(() => {
                        controller?.close()
                    })
                    .width(120)
                    .height(50)
                    .marginRight(20)
                
                Button("确定")
                    .onClick(() => {
                        // 执行删除操作
                        controller?.close()
                    })
                    .width(120)
                    .height(50)
            }
            .marginTop(30)
        }
        .width(400)
        .height(250)
        .justifyContent(FlexAlign.Center)
    }
}

@Entry
@Component
struct MainView {
    var alertDialogController: CustomDialogController = CustomDialogController(
        CustomDialogControllerOptions(
            builder: CustomAlertDialog(),
            alignment: DialogAlignment.Center,
            maskColor: Color(0x55000000),
            cornerRadius: 16.vp,
            openAnimation: {
                // 自定义打开动画
            },
            closeAnimation: {
                // 自定义关闭动画
            }
        )
    )
    
    build() {
        Column() {
            Button("显示警告弹窗")
                .onClick(() => {
                    alertDialogController.open()
                })
                .width('80%')
                .height(50)
                .margin(20)
                .backgroundColor(Color.Blue)
                .fontColor(Color.White)
        }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Center)
    }
}

通过以上方式，您可以灵活地创建和管理自定义样式的弹窗