HarmonyOS实战—CommonDialog组件的基本使用

系统 OpenHarmony
在HarmonyOS当中,常用的弹框主要有两种:第一种是普通弹框(CommonDialog),第二种消息提示弹框(ToastDialog)。

[[422102]]

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

Table of Contents

弹框组件

1. CommonDialog 组成和使用

2. CommonDialog 自定义布局使用

3. 优化代码——抽取弹框工具类

弹框组件

在HarmonyOS当中,常用的弹框主要有两种:

1.第一种是普通弹框(CommonDialog),提示用户并让用户进行对应的操作的,比如使用打车软件的时候,如果手机没有开定位,就会有弹框提示,让你在手机中开启定位,这就是一个普通弹框,给你作为一个信息的提示,并且做一些操作。

HarmonyOS实战——CommonDialog组件的基本使用-鸿蒙HarmonyOS技术社区
HarmonyOS实战——CommonDialog组件的基本使用-鸿蒙HarmonyOS技术社区

2. 第二种消息提示弹框(ToastDialog),如:在每次打开“小破站”APP的时候,都会弹出提示,这些也是弹框。这些弹框不需要用户选择的,只是告诉用户一些消息而已

HarmonyOS实战——CommonDialog组件的基本使用-鸿蒙HarmonyOS技术社区

1. CommonDialog 组成和使用

  • 在鸿蒙当中,这种普通和弹框其实是有默认布局的
  • 下面的选择按钮最多只有三个
HarmonyOS实战——CommonDialog组件的基本使用-鸿蒙HarmonyOS技术社区
  • 弹框并不是APP启动时立马弹出来的,一般会有两种情况:

1.点击按钮的时候会弹出来

2.当程序满足一定要求的时候也会弹出来

项目案例:

  • 新建项目:DialogApplication

ability_main

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <DirectionalLayout 
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  4.     ohos:height="match_parent" 
  5.     ohos:width="match_parent" 
  6.     ohos:alignment="center" 
  7.     ohos:orientation="vertical"
  8.  
  9.     <Button 
  10.         ohos:id="$+id:but1" 
  11.         ohos:height="match_content" 
  12.         ohos:width="match_content" 
  13.         ohos:text="点我" 
  14.         ohos:text_size="40vp" 
  15.         ohos:background_element="red"/> 
  16.  
  17. </DirectionalLayout> 

 MainAbilitySlice

  1. package com.xdr630.dialogapplication.slice; 
  2.  
  3. import com.xdr630.dialogapplication.ResourceTable; 
  4. import ohos.aafwk.ability.AbilitySlice; 
  5. import ohos.aafwk.content.Intent; 
  6. import ohos.agp.components.Button; 
  7. import ohos.agp.components.Component; 
  8. import ohos.agp.window.dialog.CommonDialog; 
  9. import ohos.agp.window.dialog.IDialog; 
  10.  
  11. public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener { 
  12.     @Override 
  13.     public void onStart(Intent intent) { 
  14.         super.onStart(intent); 
  15.         super.setUIContent(ResourceTable.Layout_ability_main); 
  16.  
  17.         //1.找到按钮 
  18.         Button but1 = (Button) findComponentById(ResourceTable.Id_but1); 
  19.  
  20.         //2.给按钮添加点击事件 
  21.         but1.setClickedListener(this); 
  22.  
  23.     } 
  24.  
  25.     @Override 
  26.     public void onActive() { 
  27.         super.onActive(); 
  28.     } 
  29.  
  30.     @Override 
  31.     public void onForeground(Intent intent) { 
  32.         super.onForeground(intent); 
  33.     } 
  34.  
  35.     @Override 
  36.     public void onClick(Component component) { 
  37.         //把普通弹框弹出来就可以了 
  38.         //1.创建弹框对象 
  39.         // this:当前弹框展示在当前界面中 
  40.         CommonDialog cd = new CommonDialog(this); 
  41.         //2.因为弹框里面是有默认布局的 
  42.         //设置标题 
  43.         cd.setTitleText("系统定位服务已关闭"); 
  44.         //设置内容 
  45.         cd.setContentText("请打开定位服务,以便司机师傅能够准确接您上车"); 
  46.         //设置按钮 
  47.         //参数1:按钮的索引 0 1 2 
  48.         //参数2:按钮上的文字 
  49.         //参数3:点击了按钮之后能做什么 
  50.         cd.setButton(0, "设置", new IDialog.ClickedListener() { 
  51.             @Override 
  52.             public void onClick(IDialog iDialog, int i) { 
  53.                 //写上点击了之后设置,要做的事情 
  54.                 //如果点击了之后不需要做任何事情,在第三个参数中传递 null 就可以了 
  55.  
  56.                 //因为这里点击了设置还无法跳转到设置定位的那个界面,所以先不写,等以后学习了再补在这里 
  57.             } 
  58.         }); 
  59.  
  60.         //设置取消按钮 
  61.         cd.setButton(1,"取消",null); 
  62.  
  63.         //把弹框显示出来 
  64.         cd.show(); 
  65.     } 
  • 运行:
HarmonyOS实战——CommonDialog组件的基本使用-鸿蒙HarmonyOS技术社区
  • 点击后:
HarmonyOS实战——CommonDialog组件的基本使用-鸿蒙HarmonyOS技术社区
  • 当再次点击灰色区域也没有反应
  • 点击或 取消 按钮时没有任何反应,因为在上面的那里设置了 null

一般点击弹框的两种情况:

  1. 点击灰色区域也不能取消,必须点击取消按钮才能取消弹框
  2. 点击灰色区域或取消按钮都能达到取消弹框的效果

下面就实现上面这两种情况:

1.点击灰色区域也能取消按钮的情况,在上面的代码基础上补充如下

HarmonyOS实战——CommonDialog组件的基本使用-鸿蒙HarmonyOS技术社区

2.当鼠标点击取消按钮的时候也能让弹框消失,把上面设置取消按钮的 null 设置为:

  • 运行,点击后:

  • 实现了上面的两种情况

2. CommonDialog 自定义布局使用

  • CommonDialog 里面有默认的布局,布局由如下三部分组成:

 

  • 所以只要直接调用方法给里面设置一些文本内容就可以了
  • 下面就介绍下自定义弹框里的内容

案例如下:在主界面上有一个按钮,点击了一个按钮后会出现弹框

  • 弹框里面有三个东西:一行文本和两个按钮
HarmonyOS实战——CommonDialog组件的基本使用-鸿蒙HarmonyOS技术社区
  • 当点击了 确定 按钮后,上面的文本就会变成“点击了确定按钮”,当点击了 取消 按钮后弹框就会消失
HarmonyOS实战——CommonDialog组件的基本使用-鸿蒙HarmonyOS技术社区

下面就实现下:

  • 新建项目:DialogLayoutApplication
  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <DirectionalLayout 
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  4.     ohos:height="match_parent" 
  5.     ohos:width="match_parent" 
  6.     ohos:alignment="center" 
  7.     ohos:orientation="vertical"
  8.  
  9.     <Button 
  10.         ohos:id="$+id:but" 
  11.         ohos:height="match_content" 
  12.         ohos:width="match_content" 
  13.         ohos:text="点我" 
  14.         ohos:text_size="40fp" 
  15.         ohos:background_element="red"/> 
  16.  
  17.  
  18. </DirectionalLayout> 
  • 弹框里面的内容也可以用 xml 来写,新建一个布局文件
HarmonyOS实战——CommonDialog组件的基本使用-鸿蒙HarmonyOS技术社区
  • 文件名不能是大写的
HarmonyOS实战——CommonDialog组件的基本使用-鸿蒙HarmonyOS技术社区
  • 上面的弹框组成:一个Text文本+两个Button
  • 生成弹框的布局文件后,首先改下布局文件的大小,默认的就是充满整个屏幕的,改为包裹内容的就行了
HarmonyOS实战——CommonDialog组件的基本使用-鸿蒙HarmonyOS技术社区
  • 文本的内容因为是变化的,所以在java代码那里进行设置
HarmonyOS实战——CommonDialog组件的基本使用-鸿蒙HarmonyOS技术社区
  • 两个按钮如果不设置外边距的话就会挤在一起,所以要加个上往外边距

messagedialog

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <DirectionalLayout 
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  4.     ohos:height="match_content" 
  5.     ohos:width="match_content" 
  6.     ohos:orientation="vertical"
  7.  
  8.     <Text 
  9.         ohos:id="$+id:message" 
  10.         ohos:height="match_content" 
  11.         ohos:width="match_content" 
  12.         ohos:text_size="40fp"/> 
  13.      
  14.     <Button 
  15.         ohos:id="$+id:submit" 
  16.         ohos:height="match_content" 
  17.         ohos:width="match_content" 
  18.         ohos:text="确定" 
  19.         ohos:text_size="40fp" 
  20.         ohos:background_element="red"/> 
  21.  
  22.     <Button 
  23.         ohos:id="$+id:cancel" 
  24.         ohos:height="match_content" 
  25.         ohos:width="match_content" 
  26.         ohos:text="取消" 
  27.         ohos:text_size="40fp" 
  28.         ohos:background_element="blue" 
  29.         ohos:top_margin="10vp" 
  30.         /> 
  31.  
  32.  
  33. </DirectionalLayout> 

MainAbilitySlice

  1. package com.xdr630.dialoglayoutapplication.slice; 
  2.  
  3. import com.xdr630.dialoglayoutapplication.ResourceTable; 
  4. import ohos.aafwk.ability.AbilitySlice; 
  5. import ohos.aafwk.content.Intent; 
  6. import ohos.agp.components.*; 
  7. import ohos.agp.window.dialog.CommonDialog; 
  8.  
  9. public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener { 
  10.     @Override 
  11.     public void onStart(Intent intent) { 
  12.         super.onStart(intent); 
  13.         super.setUIContent(ResourceTable.Layout_ability_main); 
  14.  
  15.         //1.找到布局中的按钮 
  16.         Button but = (Button) findComponentById(ResourceTable.Id_but); 
  17.  
  18.         //2.添加一个点击事件 
  19.         but.setClickedListener(this); 
  20.     } 
  21.  
  22.     @Override 
  23.     public void onActive() { 
  24.         super.onActive(); 
  25.     } 
  26.  
  27.     @Override 
  28.     public void onForeground(Intent intent) { 
  29.         super.onForeground(intent); 
  30.     } 
  31.  
  32.     @Override 
  33.     public void onClick(Component component) { 
  34.         //把弹框展示出来 
  35.         //创建一个弹框对象 
  36.         CommonDialog cd = new CommonDialog(this); 
  37.         //大小是默认包裹内容的 
  38.         //弹框默认是居中设置的 
  39.         //弹框默认是透明的 
  40.         //弹框默认是直角的,可以把直角设置为圆角 
  41.         cd.setCornerRadius(15); 
  42.  
  43.  
  44.         //把 messagedialog 的 xml 文件加载到内存当中,交给弹框并且展示出来 
  45.  
  46.         //加载 xml 文件并获得一个布局对象 
  47.         //parse方法:加载一个 xml 文件,返回一个布局对象 
  48.         //参数一:要加载的 xml 文件 
  49.         //参数二:该 xml 文件是否跟其他 xml 文件有关。如果无关是独立的,就写 null 就行了 
  50.         //参数三:如果文件是独立的,那么直接写 false 
  51.         DirectionalLayout dl = (DirectionalLayout) LayoutScatter.getInstance(this).parse(ResourceTable.Layout_messagedialog, nullfalse); 
  52.  
  53.         //要给布局里的文本和按钮设置事件或者修改内容 
  54.         //此时需要用 dl 去调用,表示获取的是 dl 这个布局里面的组件 
  55.         Text title = (Text) dl.findComponentById(ResourceTable.Id_message); 
  56.         Button submit = (Button) dl.findComponentById(ResourceTable.Id_submit); 
  57.         Button cancel = (Button) dl.findComponentById(ResourceTable.Id_cancel); 
  58.  
  59.         //给title标题设置内容 
  60.         title.setText("请选择下面的按钮并点击"); 
  61.  
  62.         //还需要给两个按钮添加单击事件 
  63.         submit.setClickedListener(new Component.ClickedListener() { 
  64.             @Override 
  65.             public void onClick(Component component) { 
  66.                 title.setText("点击了确定按钮"); 
  67.             } 
  68.         }); 
  69.  
  70.         //取消按钮也要添加点击事件 
  71.         cancel.setClickedListener(new Component.ClickedListener() { 
  72.             @Override 
  73.             public void onClick(Component component) { 
  74.                 //当点击取消按钮之后,把弹框关闭 
  75.                 cd.destroy(); 
  76.             } 
  77.         }); 
  78.  
  79.         //此时布局对象和弹框还没有任何关系 
  80.         //还需要把布局对象交给弹框 
  81.         cd.setContentCustomComponent(dl); 
  82.  
  83.         //让弹框展示出来 
  84.         cd.show(); 
  85.  
  86.     } 
  • 运行:

  • 点击后,就会弹出弹框
HarmonyOS实战——CommonDialog组件的基本使用-鸿蒙HarmonyOS技术社区
  • 点击弹框中的确定按钮后,文本内容发生改变
HarmonyOS实战——CommonDialog组件的基本使用-鸿蒙HarmonyOS技术社区
  • 点击取消按钮后,弹框消失,恢复到原界面
HarmonyOS实战——CommonDialog组件的基本使用-鸿蒙HarmonyOS技术社区

3. 优化代码——抽取弹框工具类

  • 在工作当中,如果需要用多个弹框,而每次都和上面一样写的话,就会造成代码冗余,不方便管理
  • 下面就把弹框抽取成一个工具类,当用到一个弹框的时候,直接调用工具类中的方法就可以了
  • 创建一个工具类
HarmonyOS实战——CommonDialog组件的基本使用-鸿蒙HarmonyOS技术社区
  • 创建一个弹框的工具类:MyDialog

  • 当外界调用了这个方法之后,就会出现一个弹框

  • 把上面的 OnClick 方法中的代码剪切到上面的 showDialog 方法中

  • 粘贴过来后,MyDialog类中部分代码修改如下

  • MainAbilitySlice类中修改如下,直接调用MyDialog中的方法,传递参数就行了

  • 运行:

  • 点击确定按钮后,发现Text文本内容是刚刚方法中传递过来

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

 

责任编辑:jianghua 来源: 鸿蒙社区
相关推荐

2021-09-13 15:17:28

鸿蒙HarmonyOS应用

2021-07-05 14:29:28

鸿蒙HarmonyOS应用

2021-09-27 10:43:18

鸿蒙HarmonyOS应用

2021-09-27 14:44:48

鸿蒙HarmonyOS应用

2021-08-25 09:38:16

鸿蒙HarmonyOS应用

2021-12-24 15:46:23

鸿蒙HarmonyOS应用

2010-03-04 10:01:01

Android基本组件

2022-02-14 08:58:00

架构

2024-05-23 08:05:04

2012-01-17 13:16:34

JavaSwing

2020-11-16 09:50:43

hpm-cli

2010-02-03 15:59:08

Android组件

2021-09-07 09:53:45

鸿蒙HarmonyOS应用

2020-04-19 17:14:17

服务器监控数据中心

2011-05-26 09:20:59

配线架

2021-08-11 09:32:12

鸿蒙HarmonyOS应用

2022-05-19 15:59:23

组件焦点鸿蒙

2019-11-27 10:36:23

数据中心边缘计算技术

2016-10-18 21:39:59

Semantic-UIReact基本元素组件

2022-03-02 15:47:57

Dialog组件UI设计鸿蒙
点赞
收藏

51CTO技术栈公众号