OpenCustomDialog(推荐)

生命周期函数

onWillAppear

弹出框显示动效前的事件回调

onWillDisappear

弹出框退出动效前的事件回调

onDidAppear

弹出框弹出的时候事件回调

onDidDisappear

弹出框退出的时候事件回调

注意

1. 在弹出框里面没办法改变自己的内容,只有在父元素外层能改变

流程

注意

1. 定义传进来的参数类型

2. 定义传进来的组件

3. 父组件里面实例化组件和传参

4. 挂载弹窗(调用生命周期)

代码

(1) 定义参数类型

// 定义参数data类型
interface dataType {
  name: string;
  age: number;
}

// 定义传进来的参数Params类型
class Params {
  text: string = "";
  data?: dataType;
  onConfirm: (value: string) => void;
  onCancel: () => void;

  constructor(
    text: string,
    onConfirm: (value: string) => void,
    onCancel: () => void,
    data?: dataType
  ) {
    this.text = text;
    this.onConfirm = onConfirm;
    this.onCancel = onCancel;
    this.data = data;
  }
}

(2) 定义传递过来的组件

// 定义传进来的组件
@Builder
function builderText(params: Params) {
    Column({ space: 20 }) {
        Row() {
            Text(params.text).fontSize(24).fontColor(Color.Red)
        }
        // 判断数据有就显示 没有 就不显示
        Row() {
            if (params.data) {
                Text(params.data.name).fontSize(24).fontColor(Color.Red)
                Text(params.data.age.toString()).fontSize(24).fontColor(Color.Red)
            }
        }
        Row({ space: 20 }) {
            // 弹出框 执行传进来的方法
            Button("确定").type(ButtonType.Normal).onClick(() => {
                params.onConfirm("改变的值")
            })
            // 弹出框 执行传进来的取消方法
            Button("取消").type(ButtonType.Normal).onClick(() => {
                params.onCancel()
            })
        }
    }
    .backgroundColor(Color.White)
    .width(300)
    .height(220)
}

(3) 父组件实例化组件和传参

    @State text: string = "初始化"
    @State data: dataType = {
        name: "初始化",
        age: 28
    }
    @State ParamsData: Params = new Params(this.text, this.onConfirm, this.onCancel, this.data)
    private ctx: UIContext = this.getUIContext()
    private contentNode: ComponentContent<Object> =
        new ComponentContent(this.ctx, wrapBuilder(builderText), this.ParamsData);

    // 弹出框里面的确认按钮执行的方法
    onConfirm(value: string) {
        console.log("点击了确定")
        PromptActionClass.closeDialog()

    }

    // 弹出框里面的取消按钮执行的方法
    onCancel() {
        let message = "取消改变的结果"
        console.info("点击了取消框" + message)
        PromptActionClass.closeDialog()
    }

(4) 挂载弹窗(调用生命周期)

 // 挂载弹窗
    setDialog(contentNode: ComponentContent<Object>) {
        PromptActionClass.setContext(this.ctx);
        PromptActionClass.setContentNode(contentNode);
        PromptActionClass.setOptions({
            alignment: DialogAlignment.Top,
            offset: { dx: 0, dy: 50 },
            onDidAppear: () => {
                console.log("初始化完成")
            },
            onDidDisappear: () => {
                console.log("消失了")
            },
            onWillAppear() {
                console.log("即将出现")
            },
            onWillDisappear() {
                console.log("即将消失")
            }
        });
    }

全部代码如下

import { ComponentContent } from '@kit.ArkUI'
import { PromptActionClass } from '../utils/PrompActionClass'

// 定义参数data类型
interface dataType {
    name: string
    age: number
}

// 定义传进来的参数Params类型
class Params {
    text: string = ""
    data?: dataType
    onConfirm: (value: string) => void
    onCancel: () => void

    constructor(text: string, onConfirm: (value: string) => void, onCancel: () => void, data?: dataType) {
        this.text = text;
        this.onConfirm = onConfirm;
        this.onCancel = onCancel
        this.data = data;
    }
}

// 定义传进来的组件
@Builder
function builderText(params: Params) {
    Column({ space: 20 }) {

        Row() {
            Text(params.text).fontSize(24).fontColor(Color.Red)
        }

        // 判断数据有就显示 没有 就不显示
        Row() {
            if (params.data) {
                Text(params.data.name).fontSize(24).fontColor(Color.Red)
                Text(params.data.age.toString()).fontSize(24).fontColor(Color.Red)
            }
        }

        Row({ space: 20 }) {
            // 弹出框 执行传进来的方法

            Button("确定").type(ButtonType.Normal).onClick(() => {
                params.onConfirm("改变的值")
            })

            // 弹出框 执行传进来的取消方法

            Button("取消").type(ButtonType.Normal).onClick(() => {
                params.onCancel()
            })
        }
    }
    .backgroundColor(Color.White)
    .width(300)
    .height(220)
}

@Entry
@Component
struct Index7 {
    @State text: string = "初始化"
    @State data: dataType = {
        name: "初始化",
        age: 28
    }
    @State ParamsData: Params = new Params(this.text, this.onConfirm, this.onCancel, this.data)
    private ctx: UIContext = this.getUIContext()
    private contentNode: ComponentContent<Object> =
        new ComponentContent(this.ctx, wrapBuilder(builderText), this.ParamsData);

    // 弹出框里面的确认按钮执行的方法
    onConfirm(value: string) {
        console.log("点击了确定")
        PromptActionClass.closeDialog()

    }

    // 弹出框里面的取消按钮执行的方法
    onCancel() {
        let message = "取消改变的结果"
        console.info("点击了取消框" + message)
        PromptActionClass.closeDialog()
    }

    build() {
        Stack({ alignContent: Alignment.Start }) {
            Column() {
                Row() {
                    Button("点击弹出来")
                        .type(ButtonType.Normal)
                        .onClick(() => {
                            this.Opendialog()
                        })
                    Button("更新内容")
                        .type(ButtonType.Normal)
                        .onClick(() => {
                            this.text = "哈哈哈"
                            this.ParamsData = new Params(this.text, this.onConfirm, this.onCancel, this.data)
                            this.contentNode.update(this.ParamsData)
                        })

                }
            }
        }

    }

    // 挂载弹窗
    setDialog(contentNode: ComponentContent<Object>) {
        PromptActionClass.setContext(this.ctx);
        PromptActionClass.setContentNode(contentNode);
        PromptActionClass.setOptions({
            alignment: DialogAlignment.Top,
            offset: { dx: 0, dy: 50 },
            onDidAppear: () => {
                console.log("初始化完成")
            },
            onDidDisappear: () => {
                console.log("消失了")
            },
            onWillAppear() {
                console.log("即将出现")
            },
            onWillDisappear() {
                console.log("即将消失")
            }
        });
    }

    // 打开弹出框
    private Opendialog() {
        console.log(this.contentNode.toString())
        // 执行挂载弹窗
        this.setDialog(this.contentNode)
        // 最后一步 打开
        PromptActionClass.openDialog()
        // 更新数据的话@Builder 弹窗里面 做不到
        // 只能外面做
        setTimeout(() => {
            this.text = "哈哈哈"
            // 更新内容
            this.contentNode.update(new Params(this.text, this.onConfirm, this.onCancel, this.data))
            // 更新位置
            PromptActionClass.updateDialog({ alignment: DialogAlignment.Bottom })
        }, 1500)
    }
}