【木棉花】知识分享——在页面跳转中附加对话框 原创 精华

前言

      之前在社区贴出的帖子中，我分享的内容以理论知识为主。而在今后的知识分享中，笔者将通过展示一些简单实用的Demo样例，以实践的形式与大家一起学习探讨HarmonyOS的相关技术知识。

正文

      Dialog组件（对话框组件），是UI设计中经常会用到的一种页面布局元素。Dialog可以与许多交互事件进行关联，当用户由于手误而造成错误的交互操作时，Dialog能及时起到缓冲的作用，为用户提供再次交互的机会。Dialog有三种类型，分别是ToastDialog，PopupDialog和CommonDialog。

      本次的知识分享以一个简单的Demo为例，向大家展示如何在页面跳转中恰当地穿插CommonDialog组件。话不多说，发车吧！

      首先，我们不妨创建一个名为“Dialog”的新工程，相关选项的勾选如下图所示；

      在实现页面跳转的逻辑之前，我们需要先创建新的AbilitySlice和xml文件来构建一个页面；

（1）打开entry>src>main>java>slice，右击sIice并新建一个Java类，将其命名为SecondAbilitySlice；

（2）打开entry>src>main>resources>base>layout，右击layout并新建一个Layout Resource File，将其命名为second；

（3）打开新创建的SecondAbilitySlice，在"public class SecondAbilitySlice{ }"的基础上加入如下代码（用于完成页面的基础布置，并将SecondAbilitySlice与second.xml文件进行绑定）；

public class SecondAbilitySlice extends AbilitySlice {
    @Override
    protected void onStart(Intent intent) {           //设置onStart()回调函数
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_second);   //将SecondAbilitySlice与second.xml文件绑定
}

     接着，我们通过xml布局的方式，为MainAbilitySlice和SecondAbilitySlice分别添加一个文本组件；

（4）打开entry>src>main>resources>base>layout>ability_main_xml，加入一个Text组件，示例代码如下；

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout                                  //将Directional布局改为Dependent布局
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:background_element="white"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

   <Text
       ohos:id="$+id:text"
       ohos:height="match_content"
       ohos:width="match_content"
       ohos:center_in_parent="true"                         //将Text组件摆放在页面最中心的位置
       ohos:text="AbilitySlice1"
       ohos:text_size="30vp"
       ohos:text_color="blue"/>



</DependentLayout>

（5）打开新创建的second.xml，加入一个Text组件，并将页面背景色改为黑色，示例代码如下：

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout                           //将Directional布局改为Dependent布局
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:background_element="black"            //将背景色调为黑色
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

    <Text
        ohos:id="$+id:Text"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:center_in_parent="true"            //将Text组件摆放在页面最中心的位置
        ohos:text="AbilitySlice2"
        ohos:text_size="30vp"
        ohos:text_color="white"/>

</DependentLayout>

     最后，我们在MainAbilitySlice与SecondAbilitySlice中分别新创建CommonDialog组件，并写入相关事件逻辑；

（6）打开MainAbilitySlice，在onStart()函数的"{ }"内加入如下代码；

 CommonDialog dialog=new CommonDialog(getContext());           // 新创建一个CommonDialog组件，命名为dialog
        dialog.setSize(800,400);                                                                 //设置CommonDialog的宽度和高度
        dialog.setTitleText("   提示");                                                           //设置CommonDialog的标题文本的内容
        dialog.setContentText("    确认切换页面？");                                   //设置CommonDialog的内容文本的内容
        dialog.setButton(IDialog.BUTTON1,"确认",(iDialog, i) -> dialog.destroy());          //设置CommonDialog的第一个按钮，用户触发此按钮后CommonDialog将销毁
        dialog.setButton(IDialog.BUTTON2,"取消",(iDialog, i) -> dialog.hide());        //设置CommonDialog的第二个按钮，用户触发此按钮后CommonDialog将隐藏
        dialog.setDestroyedListener(new CommonDialog.DestroyedListener() {           //设置CommonDialog的销毁监听器
            @Override
            public void onDestroy() {
                present(new SecondAbilitySlice(),new Intent());                   //设置present()，当CommonDialog被销毁后执行此方法，用户界面将从原来的MainAbilitySlice导航至系统新创建的SecondAbilitySlice实例中。
            }
        });
       dialog.hide();                //将CommonDialog的初始状态设置为隐藏状态（初始状态默认为隐藏状态）



        Text text1=(Text) findComponentById(ResourceTable.Id_text);          //定义已在ability_main_xml中创建的Text组件，命名为text1
        text1.setClickedListener(new Component.ClickedListener() {            //设置Text的点击监听器
            @Override
            public void onClick(Component component) {
                dialog.show();                                    //设置show()，当用户点击Text组件时执行此方法，CommonDialog将进入前台与用户交互
            }
        });

（7）打开SecondAbilitySlice，在onStart()函数的"{ }”内加入如下代码；

  CommonDialog Dialog=new CommonDialog(getContext());
        Dialog.setSize(800,400);
        Dialog.setTitleText("    提示");
        Dialog.setContentText("    确认切换页面？");
        Dialog.setButton(IDialog.BUTTON1,"确认",(iDialog, i) -> Dialog.destroy());
        Dialog.setButton(IDialog.BUTTON2,"取消",(iDialog, i) -> Dialog.hide());
        Dialog.setDestroyedListener(new CommonDialog.DestroyedListener() {
            @Override
            public void onDestroy() {
                terminate();             //设置terminate()，当CommonDialog被销毁时执行此方法，以结束SecondAbilitySlice的生命周期，用户界面返回原来的MainAbilitySlice实例中
            }
        });

        Text text1=(Text) findComponentById(ResourceTable.Id_Text);
        text1.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                Dialog.show();
            }
        });

   OK，大功告成！调用远程模拟器运行此Demo，便可查看相应的点击效果。

结语

本期的知识分享在这就告一段落了。鉴于笔者能力有限，文章如有错误和不足之处，望读者指正。

更多资料请关注我们的项目 : Awesome-Harmony_木棉花