OpenHarmony弹窗交互设计技巧

在OpenHarmony中，弹窗是一种常见的用户交互组件，用于在应用界面上提供额外的信息或操作选项。以下是一些常见的弹窗类型及其使用技巧：

1. AlertDialog

AlertDialog 是系统预定义的警告弹窗，用于提示用户重要信息或操作。

alertDialog(context: context.uiabilitycontext) {
    alertdialog.show({
        // 通过message设置告警信息
        message: '当前数据未保存,是否确认离开?',
        // 通过alignment设置弹窗在界面垂直方向的对齐方式,此处设置为底部对齐
        alignment: dialogalignment.bottom,
        // 通过offset设置基于对齐位置的便宜量
        offset: {dx:0,dy:-20},
        // 弹窗中左起第一个按钮
        primarybutton: {
            value: '取消',
            action: () => {
                console.info('callback cancel button is clicked');
            }
        },
        // 弹窗中左起第二个按钮
        secondarybutton: {
            value: '确定',
            action: () => {
                exiting the app.context.terminateself();
                console.info('callback definite button is clicked');
            }
        }
    });
}

2. CustomDialog

CustomDialog 允许开发者自定义弹窗的布局和内容，适用于需要更复杂交互的场景。

@CustomDialog
@Preview
export struct CommonDialog {
    title: string | Resource = "温馨提示"
    msg: string | Resource = ""
    confirm: string | Resource = "确认"
    cancel: string | Resource = "取消"
    controller?: CustomDialogController
    onCancel: () => void = () => {}
    onConfirm: () => void = () => {}
}

@Entry
@Component
struct ToolTestPage {
    private dialogController: CustomDialogController = new CustomDialogController({
        builder: CommonDialog({
            onCancel: () => {
                toast.show("你点了取消")
            },
            onConfirm: () => {
                toast.showLong("你点了确认")
            }),
            title: "温馨提示",
            msg: "您确认要退出登录吗?",
            cancel: "取消",
            confirm: "确认"
        })
    })

    build() {
        ......
        Button('自定义弹窗').onClick(() => {
            this.dialogController.open()
        })
        ......
    }
}

3. bindPopup

bindPopup 方法用于创建并显示一个弹出窗口，可以设置弹窗的位置、样式等属性。

Column() {
    Button("点击").onClick(this.isShowPopup = !this.isShowPopup).bindPopup(this.isShowPopup, {
        message: "我是一个测试popup",
        onWillDismiss: this.isShowPopup = !this.isShowPopup
    })
}.width("100%").height("100%").justifyContent(FlexAlign.Center)

4. 全局弹窗

使用 promptAction 可以创建全局弹窗，这些弹窗不依赖于特定的UI组件，适用于需要在应用任何位置显示的弹窗。

@Entry
@Component
struct GlobalDialogExample {
    @State message: string = "显示提示"

    build() {
        Row() {
            Column() {
                Button("点击显示弹窗").onClick(() => {
                    let uiContext = this.getUIContext();
                    let promptAction = uiContext.getPromptAction();
                    let contentNode = new ComponentContent(uiContext, wrapBuilder(buildText), new Params(this.message));
                    try {
                        promptAction.openCustomDialog(contentNode);
                    } catch (error) {
                        let message = (error as BusinessError).message;
                        let code = (error as BusinessError).code;
                        console.error(`OpenCustomDialog args error code is ${code}, message is ${message}`);
                    }
                })
            }
        }
        .width('100%')
        .height('100%')
    }
}

5. 弹窗动画

通过设置弹窗的动画，可以提升用户体验。例如，使用转场动画来实现弹窗的平滑显示和隐藏。

@CustomDialog
struct CustomDialogExample01 {
    controller: CustomDialogController
    @State showFlag: Visibility = Visibility.Visible;

    build() {
        Column(
            Row(
                Image($r('app.media.huawei').height(60).width(60).margin(20).borderRadius(10))
                Text('提示信息').fontColor(Color.White).margin({ left: 5 }).borderRadius(25).width('40%').height(40).backgroundColor('#33FF66')
            )
        )
    }
}

通过这些技巧和方法，开发者可以在OpenHarmony应用中实现高效且用户友好的弹窗交互设计。