HarmonyOS APP开发入门3——组件（四 CommonDialog普通弹框组件 ）
HarmonyOS APP开发入门3——组件（四 CommonDialog普通弹框组件 ）
文章目录
- HarmonyOS APP开发入门3——组件（四 CommonDialog普通弹框组件 ）
-
- CommonDialog普通弹框组件
CommonDialog普通弹框组件
CommonDialog是一种在弹出框消失之前，用户无法操作其他界面内容的对话框。通常用来展示用户当前需要的或用户必须关注的信息或操作。对话框的内容通常是不同组件进行组合布局，如：文本、列表、输入框、网格、图标或图片，常用于选择或确认信息。
构造方法
| 构造方法 | 描述 |
|---|---|
| CommonDialog(Context context) | 创建一个对话框实例。 |
常用方法
| 接口名 | 描述 |
|---|---|
| setButton(int buttonNum, String text, IDialog.ClickedListener listener) | 设置按钮区的按钮，可设置按钮的位置、文本及相关点击事件。 |
| setContentCustomComponent(Component component) | 自定义内容区域。 |
| setContentImage(int resId) | 设置要在内容区域显示的图标。 |
| setContentText(String text) | 设置要在内容区域中显示的文本。 |
| setDestroyedListener(CommonDialog.DestroyedListener destroyedListener) | 设置对话框销毁监听器。 |
| setImageButton(int buttonNum, int resId, IDialog.ClickedListener listener) | 设置对话框的图像按钮。 |
| setMovable(boolean movable) | 设置对话框是否可以拖动。 |
| setTitleCustomComponent(DirectionalLayout component) | 自定义标题区域。 |
| setTitleIcon(int resId, int iconId) | 设置标题区域图标。 |
| setTitleSubText(String text) | 在标题区域设置补充文本信息。 |
| setTitleText(String text) | 在标题区域中设置标题文本。 |
| setAlignment(int alignment) | 设置对话框的对齐模式。 |
| setAutoClosable(boolean closable) | 设置是否启用触摸对话框外区域关闭对话框的功能。 |
| setCornerRadius(float radius) | 设置对话框圆角的半径。 |
| setDuration(int ms) | 设置对话框自动关闭前的持续时间。 |
| setOffset(int offsetX, int offsetY) | 设置对话框的偏移量。 |
| setSize(int width, int height) | 设置对话框的大小。 |
| setTransparent(boolean isEnable) | 设置是否为对话框启用透明背景。 |
| show() | 显示对话框。 |
创建对话框
CommonDialog dialog = new CommonDialog(getContext());在UI线程调用该方法创建一个CommonDialog的实例。getContext()是获取上下文对象的方法，也可以以其他的方式将其传入使用。
使用对话框
下面显示一个包含标题、内容和按钮的简单对话框。设置按钮时传入的IDialog.BUTTON3表示按钮为按钮区从左至右第三个按钮，当只设置一个按钮时，按钮居中，多个按钮时以相同比例平均分配在按钮区。
CommonDialog dialog = new CommonDialog(getContext());dialog.setTitleText("Notification");dialog.setContentText("This is CommonDialog Content area.");dialog.setButton(IDialog.BUTTON3, "CONFIRM", (iDialog, i) -> iDialog.destroy());dialog.show();修改窗口尺寸
import static ohos.agp.components.ComponentContainer.LayoutConfig.MATCH_CONTENT; // 注意引入...dialog.setSize(800, MATCH_CONTENT); 修改位置
dialog.setAlignment(LayoutAlignment.BOTTOM);dialog.setOffset(0, 200);销毁监听
dialog.setDestroyedListener(() -> { // TODO: 销毁后需要执行的任务。});延时关闭
dialog.setDuration(5000);使用默认布局的基本用法
//把普通弹框弹出来就可以了 //1.创建弹框的对象 //this:当前弹框是哪展示在当前的界面中的。 CommonDialog cd = new CommonDialog(this); //2.因为弹框里面是有默认布局的 //设置标题cd.setTitleText("系统定位服务已关闭"); //设置内容cd.setContentText("请打开定位服务，以便司机师傅能够准确接您上车"); //自动关闭cd.setAutoClosable(true);//设置按钮 //参数一：按钮的索引 0 1 2 //参数二：按钮上的文字 //参数三：点击了按钮之后能做什么cd.setButton(0, "设置", new IDialog.ClickedListener() { @Overridepublic void onClick(IDialog iDialog, int i) { //写上点击了设置之后，要做的事情。 //如果点击之后我不需要做任何事情，在第三个参数中传递null就可以了。 } });cd.setButton(1, "取消", new IDialog.ClickedListener() { @Override public void onClick(IDialog iDialog, int i) { //销毁弹框 cd.destroy(); } }); //把弹框显示出来cd.show(); }自定义样式
用户也可以通过自定义样式来实现自己想要的对话框效果。调用setTitleCustomComponent方法和setContentCustomComponent方法来实现标题区域或内容区域的自定义效果。
- 在Project窗口，打开“entry > src > main > resources > base > media”，添加所需图片至media文件夹下，本例以“transparent_bg.JPG”为例。
- 在Project窗口，点击“entry > src > main > resources > base > layout”，右键选择“New > Layout Resource File”，命名为“layout_custom_dialog”，单击回车键。示例代码如下：
<DependentLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:id="$+id:custom_container" ohos:height="match_content" ohos:width="300vp" ohos:background_element="#F5F5F5"> <Text ohos:id="$+id:custom_title" ohos:height="match_content" ohos:width="match_content" ohos:horizontal_center="true" ohos:margin="8vp" ohos:padding="8vp" ohos:text="TITLE" ohos:text_size="16fp"/> <Image ohos:id="$+id:custom_img" ohos:height="150vp" ohos:width="280vp" ohos:below="$id:custom_title" ohos:horizontal_center="true" ohos:image_src="$media:transparent_bg" ohos:clip_alignment="center"/> <Button ohos:height="match_content" ohos:width="match_parent" ohos:background_element="#FF9912" ohos:below="$id:custom_img" ohos:margin="8vp" ohos:padding="8vp" ohos:text="BUTTON" ohos:text_color="#FFFFFF" ohos:text_size="18vp"/></DependentLayout>抽取工具类
public class MyDialog {public static void showDialog(Context context,String msg){ //把弹框展示出来 //创建一个弹框对象 CommonDialog cd = new CommonDialog(context); //大小是默认包裹内容的。 //弹框默认是居中放置 //弹框默认是透明的 //弹框默认是直角，可以把直角设置为圆角cd.setCornerRadius(15); //把messagedislog的xml文件加载到内存当中。交给弹框并展示出来。 //加载xml文件并获得一个布局对象 //parse方法：加载一个xml文件，返回一个布局对象。 //参数一：要加载的xml文件 //参数二：该xml文件是否跟其他xml文件有关。如果无关是独立的，就写null就可以了 //参数三：如果文件是独立的，那么直接写false DirectionalLayout dl = (DirectionalLayout); LayoutScatter.getInstance(context).parse(ResourceTable.Layout_messagedialog, null, false); //要给布局里面的文本和按钮设置事件或者修改内容 //此时需要用dl去调用，表示获取的是dl这个布局里面的组件。 Text title = (Text) dl.findComponentById(ResourceTable.Id_message); Button submit = (Button) dl.findComponentById(ResourceTable.Id_submit); Button cancel = (Button) dl.findComponentById(ResourceTable.Id_cancel); //title给标题设置内容 title.setText(msg); //还需要给两个按钮添加单击事件 submit.setClickedListener(new Component.ClickedListener() { @Override public void onClick(Component component) { title.setText("点击了确定按钮"); } }); //取消按钮也要添加点击事件 cancel.setClickedListener(new Component.ClickedListener() { @Override public void onClick(Component component) { //当点击了取消按钮之后，把弹框给关闭 cd.destroy(); } }); //此时布局对象跟弹框还没有任何关系 //我还需要把布局对象交给弹框才可以 cd.setContentCustomComponent(dl); //让弹框展示出来 cd.show(); } }喜欢本博文可以关注本博主哦
