鸿蒙HarmonyOS学习笔记之基于CommonDialog实现自定义PromptDialog

效果预览

在虚拟机上运行效果,只能通过点击取消和确定按钮关闭弹窗，在不输入内容时无法使用确定按钮。

一、基本概念

CommonDialog是一种在弹出框消失之前，用户无法操作其他界面内容的对话框。通常用来展示用户当前需要的或用户必须关注的信息或操作。对话框的内容通常是不同组件进行组合布局，如：文本、列表、输入框、网格、图标或图片，常用于选择或确认信息。

二、接口说明

参考官方文档

三、实现

1.PromptDialog 类

package com.tang.draw.dialog;import com.tang.draw.ResourceTable;
import com.tang.draw.utils.LogUtils;
import ohos.agp.components.*;
import ohos.agp.components.element.PixelMapElement;
import ohos.agp.text.RichText;
import ohos.agp.text.richstyles.ImageRichStyle;
import ohos.agp.text.richstyles.RangedRichStyle;
import ohos.agp.text.richstyles.UnderlineRichStyle;
import ohos.agp.utils.Color;
import ohos.agp.utils.LayoutAlignment;
import ohos.agp.window.dialog.CommonDialog;
import ohos.app.Context;
import ohos.global.resource.NotExistException;
import ohos.media.image.ImageSource;
import ohos.media.image.common.PixelFormat;
import ohos.media.image.common.Rect;
import ohos.media.image.common.Size;import java.io.IOException;import static ohos.agp.components.ComponentContainer.LayoutConfig.MATCH_CONTENT;/*********文件名: PromptDialog*创建者: 醉意丶千层梦*创建时间:2022/2/9 22:36*描述: PromptDialog********/
public class PromptDialog extends CommonDialog {private Context mContext;private Text titleText;private TextField input;private Button okBtn,cancelBtn;private DialogClickListener dialogClickListener;public PromptDialog(Context context) {super(context);this.mContext =context;initComponents();initClickedListener();}private void initClickedListener() {okBtn.setClickedListener(this::onClick);cancelBtn.setClickedListener(this::onClick);}public void onClick(Component component) {if (component==okBtn){LogUtils.info(getClass().getSimpleName()+" --- ok click");//关闭dialoghide();if(dialogClickListener != null){dialogClickListener.onOKClick(input.getText());}}else if(component==cancelBtn){LogUtils.info(getClass().getSimpleName()+" --- cancel click");//关闭dialoghide();if(dialogClickListener != null){dialogClickListener.onCancelClick();}}}private void initComponents(){Component component= LayoutScatter.getInstance(mContext).parse(ResourceTable.Layout_dialog_prompt,null,true);okBtn=component.findComponentById(ResourceTable.Id_btn_ok);cancelBtn=component.findComponentById(ResourceTable.Id_btn_cancel);input=component.findComponentById(ResourceTable.Id_field_input);titleText=component.findComponentById(ResourceTable.Id_text_title);okBtn.setEnabled(false);input.addTextObserver(new Text.TextObserver() {@Overridepublic void onTextUpdated(String s, int i, int i1, int i2) {if(s==null || s.isEmpty()){okBtn.setEnabled(false);}else {okBtn.setEnabled(true);}}});super.setContentCustomComponent(component);//居中setAlignment(LayoutAlignment.CENTER);setCornerRadius(50);//设置高度为自适应,宽度为屏幕的0.8setSize(mContext.getResourceManager().getDeviceCapability().width* mContext.getResourceManager().getDeviceCapability().screenDensity/ 160*4/5, MATCH_CONTENT);}/***按钮接口*/public interface DialogClickListener{void onOKClick(String inputData);void onCancelClick();}public void setOnDialogClickListener(DialogClickListener clickListener){dialogClickListener = clickListener;}
}

2.Dialog整体布局dialog_prompt.xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_content"ohos:width="match_parent"ohos:left_margin="5vp"ohos:orientation="vertical"ohos:right_margin="5vp"><DirectionalLayoutohos:height="match_content"ohos:width="match_parent"ohos:background_element="#fffffff"ohos:orientation="vertical"><Textohos:id="$+id:text_title"ohos:height="50vp"ohos:width="match_parent"ohos:text="提示"ohos:text_size="20fp"ohos:text_alignment="center"ohos:bottom_margin="2vp"></Text><TextFieldohos:id="$+id:field_input"ohos:height="50vp"ohos:width="match_parent"ohos:top_margin="20vp"ohos:bottom_margin="10vp"ohos:left_margin="20vp"ohos:right_margin="20vp"ohos:left_padding="10vp"ohos:hint="请输入"ohos:text_color="#000000"ohos:text_size="20fp"ohos:text_alignment="vertical_center"ohos:background_element="$graphic:background_field_input"></TextField><DirectionalLayoutohos:height="match_content"ohos:width="match_parent"ohos:background_element="#ffffff"ohos:top_padding="5vp"ohos:bottom_padding="5vp"ohos:bottom_margin="20vp"ohos:orientation="horizontal"ohos:top_margin="20vp"ohos:layout_alignment="center"><Buttonohos:id="$+id:btn_cancel"ohos:height="45vp"ohos:width="0vp"ohos:weight="1"ohos:left_margin="20vp"ohos:right_margin="10vp"ohos:text="取消"ohos:text_color="#D0BE76"ohos:text_size="15fp"ohos:background_element="$graphic:button_confirm_dialog_cancel"></Button><Buttonohos:id="$+id:btn_ok"ohos:height="45vp"ohos:width="0vp"ohos:weight="1"ohos:left_margin="10vp"ohos:right_margin="20vp"ohos:background_element="$graphic:button_confirm_dialog_ok"ohos:text="确定"ohos:text_color="#DCC8A1"ohos:text_size="15fp"></Button></DirectionalLayout></DirectionalLayout></DirectionalLayout>

3.按钮点击效果

component_state_empty要在最后一个,不然会没效果

button_confirm_dialog_ok.xml

<?xml version="1.0" encoding="utf-8"?>
<state-containerxmlns:ohos="http://schemas.huawei.com/res/ohos"><item ohos:state="component_state_pressed"ohos:element="$graphic:button_state_pressed_confirm_dialog_ok"></item><item ohos:state="component_state_empty"ohos:element="$graphic:button_state_natural_confirm_dialog_ok"></item>
</state-container>

button_state_natural_confirm_dialog_ok.xml

<?xml version="1.0" encoding="utf-8"?>
<shapexmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><corners ohos:radius="2vp"></corners><solid ohos:color="$color:gray_515151"></solid><strokeohos:width="1vp"ohos:color="$color:gray_515151"/><bounds ohos:top="1vp"></bounds>
</shape>

button_state_pressed_confirm_dialog_ok.xml

<?xml version="1.0" encoding="utf-8"?>
<shapexmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><corners ohos:radius="2vp"></corners><solid ohos:color="$color:gray_2C2C2C"></solid><strokeohos:width="1vp"ohos:color="$color:gray_2C2C2C"/><bounds ohos:top="1vp"></bounds>
</shape>

button_confirm_dialog_cancel.xml

<?xml version="1.0" encoding="utf-8"?>
<state-containerxmlns:ohos="http://schemas.huawei.com/res/ohos"><item ohos:state="component_state_pressed"ohos:element="$graphic:button_state_pressed_confirm_dialog_cancel"></item><item ohos:state="component_state_empty"ohos:element="$graphic:button_state_natural_confirm_dialog_cancel"></item>
</state-container>

button_state_natural_confirm_dialog_cancel.xml

<?xml version="1.0" encoding="utf-8"?>
<shapexmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><corners ohos:radius="2vp"></corners><solid ohos:color="$color:white_FFFFFF"></solid><strokeohos:width="1vp"ohos:color="$color:gray_CDCDCD"/><bounds ohos:top="1vp"></bounds>
</shape>

button_state_pressed_confirm_dialog_cancel.xml

<?xml version="1.0" encoding="utf-8"?>
<shapexmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><corners ohos:radius="2vp"></corners><solid ohos:color="$color:white_DFDFDF"></solid><strokeohos:width="1vp"ohos:color="$color:white_DFDFDF"/><bounds ohos:top="1vp"></bounds>
</shape>

4.预览

四、使用

 PromptDialog promptDialog=new PromptDialog(this);promptDialog.setOnDialogClickListener(new PromptDialog.DialogClickListener() {@Overridepublic void onOKClick(String inputData) {addBtn.setText(inputData);}@Overridepublic void onCancelClick() {}});
promptDialog.show();