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

发布于 2022-2-25 21:45
浏览
1收藏

前言

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

正文

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

      本次的知识分享以一个简单的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_木棉花

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
dialog.zip 458.92K 4次下载
已于2022-2-25 21:45:54修改
4
收藏 1
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐