HarmonyOS APP开发入门3——组件（四 CommonDialog普通弹框组件 ）

HarmonyOS APP开发入门3——组件（四 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() { 
    @Override
public 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方法来实现标题区域或内容区域的自定义效果。

1. 在Project窗口，打开“entry > src > main > resources > base > media”，添加所需图片至media文件夹下，本例以“transparent_bg.JPG”为例。
2. 在Project窗口，点击“entry > src > main > resources > base > layout”，右键选择“New > Layout Resource File”，命名为“layout_custom_dialog”，单击回车键。示例代码如下：

<?xml version="1.0" encoding="utf-8"?>
<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(); 
	} 
}

喜欢本博文可以关注本博主哦