HarmonyOS鸿蒙Next中实现自定义弹窗示例代码

HarmonyOS鸿蒙Next中实现自定义弹窗示例代码介绍
本示例基于Navigation实现以下四种自定义弹窗。

用户隐私协议弹窗
切换页面弹窗不消失
半模态弹窗
动态半模态弹窗

实现自定义弹窗源码链接

效果预览

使用说明

点击“隐私协议”按钮，会从下往上弹出用户隐私协议。
点击“切换页面弹窗不消失”按钮，会弹出弹窗，点击弹窗上的“新页面”按钮，切换到新的页面。
点击“半模态弹窗”，跳到新页面，点击“打开弹窗”，弹出半屏弹窗。点击“新弹窗”按钮，弹出全屏弹窗。
点击“半模态弹窗”，跳到新页面，点击“打开弹窗”，弹出半屏弹窗，长按弹窗可进行拖动。

实现思路

基于Navigation.Dialog的透明页面特性，可以用于实现弹窗效果，而且Navigation.Dialog存在于路由栈中，天然可以实现切换页面弹窗不消失。

实现弹窗自定义动画

通过.transition属性分别实现背景和内容的转场动画，实现弹窗从下往上的抽屉式弹出以及关闭时从上往下收回。在弹窗内容的Column容器中传入WrappedBuilder来实现动态的自定义弹窗内容。核心代码如下。

.transition(
          TransitionEffect.scale({ x: 0, y: 0 }).animation({
            duration: 300,
            curve: Curve.Friction
          })
        )

自定义弹窗组件

先定义路由工具类AppRouter，并创建路由栈NavPathStack。在根页面中注册NavPathStack。定义弹窗选项类AppDialogOption，弹窗样式类AppDialogStyle，并创建自定义弹窗组件DefaultDialog。页面与弹窗，弹窗与弹窗之间主要通过路由跳转NavPathStack.pushPathByName传递参数。

点击不同按钮时，调用AppRouter.openDialog方法打开对应的自定义弹窗。核心代码如下，源码参考AppRouter.ets

public static openDialog(name: string, params?: RouterParams): void {
    AppRouter.instance.pathStack.pushPath({
      name: name, param: params, onPop: (data: PopInfo) => {
        if (params?.onPop) {
          params.onPop!(data);
        }
      }
    });
  }

更多关于HarmonyOS鸿蒙Next中实现自定义弹窗示例代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

h691938207 1楼•8 天前

在HarmonyOS鸿蒙Next中实现自定义弹窗，可以使用CustomDialogController类。以下是一个简单的示例代码：

class MyCustomDialog extends CustomDialogController {
    constructor() {
        super({
            builder: () => {
                return new View({
                    width: '80%',
                    height: '40%',
                    backgroundColor: '#FFFFFF',
                    padding: 20,
                    children: [
                        new Text({
                            text: '这是一个自定义弹窗',
                            fontSize: 20,
                            textAlign: TextAlign.Center
                        }),
                        new Button({
                            text: '关闭',
                            onClick: () => {
                                this.close();
                            }
                        })
                    ]
                });
            }
        });
    }
}

// 使用自定义弹窗
let dialogController = new MyCustomDialog();
dialogController.show();

在这个示例中，MyCustomDialog类继承自CustomDialogController，并在构造函数中定义了弹窗的UI布局。弹窗包含一个文本和一个按钮，点击按钮可以关闭弹窗。通过dialogController.show()方法可以显示该自定义弹窗。

更多关于HarmonyOS鸿蒙Next中实现自定义弹窗示例代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

vueper 2楼•8 天前

在HarmonyOS鸿蒙Next中，可以通过CommonDialog类实现自定义弹窗。以下是一个简单的示例代码：

public class MyCustomDialog extends CommonDialog {
    private Context context;

    public MyCustomDialog(Context context) {
        super(context);
        this.context = context;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(ResourceTable.Layout_custom_dialog_layout);
        // 绑定控件并设置事件
        Button closeButton = (Button) findViewById(ResourceTable.Id_close_button);
        closeButton.setClickedListener(component -> dismiss());
    }
}

使用方法：

MyCustomDialog dialog = new MyCustomDialog(context);
dialog.show();

确保在resources/base/layout目录下创建custom_dialog_layout.xml布局文件，并定义弹窗的UI。