您现在的位置是：亿华云 > 人工智能

鸿蒙HarmonyOS三方件开发指南(20)-Dialog组件

亿华云2025-10-03 18:16:00【人工智能】0人已围观

简介想了解更多内容，请访问：和华为官方合作共建的鸿蒙技术社区https://harmonyos.51cto.comHarmonyOS三方件开发指南自一月份上线以来，已经连续更新了十九期了。今天所发这篇文章

想了解更多内容，鸿蒙请访问：

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

https://harmonyos.51cto.com

HarmonyOS三方件开发指南自一月份上线以来，已经连续更新了十九期了。鸿蒙今天所发这篇文章将作为三方件开发指南第一期的开件收官之作。我庆幸社区有这么多志同道合的鸿蒙开发者们关注我的文章，关于三方件的开件讲解或许对你有所帮助，或许你有更好的鸿蒙建议或想法，都可以来告诉我们。开件

HarmonyOS的鸿蒙未来是强大的，因为我们广大开发者是开件强大的，是鸿蒙自信的，我也祝福各位开发者们立“鸿”鹄之志，开件逐梦未来!

Dialog组件功能介绍

功能介绍

Dialog组件是网站模板鸿蒙一个显示不同风格的自定义对话框组件，目前支持十一种风格的开件显示。

模拟器上运行效果

Dialog使用方法

新建工程，鸿蒙增加组件Har包依赖

在应用模块中添加HAR，只需要将dialoglibrary-debug.har复制到entry\libs目录下即可(由于build.gradle中已经依赖的libs目录下的*.har，因此不需要在做修改)。

修改配置文件

在entry下面的build.gradle添加library 的依赖

在代码中使用

configBean = StyledDialog.buildMdAlert(getContext(), "提示", "确定退出？", new MyDialogListener() { @Override public void positiveButton() { configBean.commonDialog.hide(); configBean.commonDialog = null; } @Override public void negativeButton() { configBean.commonDialog.hide(); configBean.commonDialog = null; } }); configBean.commonDialog.show();

show input dialog

configBean = StyledDialog.buildNormalInput(getContext(), "请输入您的昵称", "长度0-20", new MyDialogListener() { @Override public void positiveButton() { //可对输入内容进行校验 configBean.getInputText1(); configBean.commonDialog.hide(); configBean.commonDialog = null; } @Override public void negativeButton() { configBean.commonDialog.hide(); configBean.commonDialog = null; } }); configBean.commonDialog.show();

show single choose dialog

CharSequence[] words = { "身份证", "手机", "钥匙", "钱包"}; boolean[] selectItems = { true, false, false, false}; ArrayList<ChooseBean> list = new ArrayList<>(); for (int i = 0; i < words.length; i++) { ChooseBean chooseBean = new ChooseBean(); chooseBean.setTxt(words[i]); chooseBean.setChoosen(selectItems[i]); list.add(chooseBean); } configBean = StyledDialog.buildMdSingleChoose(getContext(), "单选", list, new MyItemDialogListener() { @Override public void onItemClick(CharSequence text, int position) { new ToastDialog(getContext()).setText(text.toString()).show(); } @Override public void positiveButton() { configBean.commonDialog.hide(); configBean.commonDialog = null; } @Override public void negativeButton() { configBean.commonDialog.hide(); configBean.commonDialog = null; } }); configBean.commonDialog.show();

show multi choose dialog

CharSequence[] words = { "A.apple", "B.bananer", "C.pear", "D.milk"}; boolean[] checkedItems = { false, false, false, false}; ArrayList<ChooseBean> list = new ArrayList<>(); for (int i = 0; i < words.length; i++) { ChooseBean chooseBean = new ChooseBean(); chooseBean.setTxt(words[i]); chooseBean.setChoosen(checkedItems[i]); list.add(chooseBean); } configBean = StyledDialog.buildMdMultiChoose(getContext(), "多选", list, new MyCheckBoxItemDialogListener() { @Override public void onItemClick(Checkbox checkbox, int position) { checkedItems[position] = checkbox.isChecked(); } @Override public void positiveButton() { configBean.commonDialog.hide(); configBean.commonDialog = null; } @Override public void negativeButton() { configBean.commonDialog.hide(); configBean.commonDialog = null; } }); configBean.commonDialog.show();

show ios alert dialog

configBean = StyledDialog.buildMdIOSAlert(getContext(), "提示", "确定退出？", new MyDialogListener() { @Override public void positiveButton() { configBean.commonDialog.hide(); configBean.commonDialog = null; } @Override public void negativeButton() { configBean.commonDialog.hide(); configBean.commonDialog = null; } }); configBean.commonDialog.show();

show ios vertical alert dialog

configBean = StyledDialog.buildMdIOSAlertVertical(getContext(), "提示", "确定退出？", new MyDialogListener() { @Override public void positiveButton() { configBean.commonDialog.hide(); configBean.commonDialog = null; } @Override public void negativeButton() { configBean.commonDialog.hide(); configBean.commonDialog = null; } }); configBean.commonDialog.show();

show two input dialog

configBean = StyledDialog.buildTwoInput(getContext(), "登录", "请输入用户名","请输入密码", new MyDialogListener() { @Override public void positiveButton() { //可对输入内容进行校验 configBean.getInputText1(); configBean.getInputText2(); configBean.commonDialog.hide(); configBean.commonDialog = null; } @Override public void negativeButton() { configBean.commonDialog.hide(); configBean.commonDialog = null; } }); configBean.commonDialog.show();

show list dialog

CharSequence[] words = { "身份证", "手机", "钥匙", "钱包"}; boolean[] selectItems = { true, false, false, false}; ArrayList<ChooseBean> list = new ArrayList<>(); for (int i = 0; i < words.length; i++) { ChooseBean chooseBean = new ChooseBean(); chooseBean.setTxt(words[i]); chooseBean.setChoosen(selectItems[i]); list.add(chooseBean); } configBean = StyledDialog.buildMdIOSSingleChoose(getContext(), list, new MyItemDialogListener() { @Override public void onItemClick(CharSequence text, int position) { new ToastDialog(getContext()).setText(text.toString()).show(); } @Override public void positiveButton() { configBean.commonDialog.hide(); configBean.commonDialog = null; } @Override public void negativeButton() { configBean.commonDialog.hide(); configBean.commonDialog = null; } }); configBean.commonDialog.show();

show bottom button list dialog

CharSequence[] words = { "身份证", "手机", "钥匙", "钱包"}; boolean[] selectItems = { true, false, false, false}; ArrayList<ChooseBean> list = new ArrayList<>(); for (int i = 0; i < words.length; i++) { ChooseBean chooseBean = new ChooseBean(); chooseBean.setTxt(words[i]); chooseBean.setChoosen(selectItems[i]); list.add(chooseBean); } configBean = StyledDialog.buildMdIOSBottomSingleChoose(getContext(), list, new MyItemDialogListener() { @Override public void onItemClick(CharSequence text, int position) { new ToastDialog(getContext()).setText(text.toString()).show(); } @Override public void positiveButton() { configBean.commonDialog.hide(); configBean.commonDialog = null; } @Override public void negativeButton() { configBean.commonDialog.hide(); configBean.commonDialog = null; } }); configBean.commonDialog.show();

show bottom list dialog

CharSequence[] words = { "身份证", "手机", "钥匙", "钱包"}; boolean[] selectItems = { true, false, false, false}; ArrayList<ChooseBean> list = new ArrayList<>(); for (int i = 0; i < words.length; i++) { ChooseBean chooseBean = new ChooseBean(); chooseBean.setTxt(words[i]); chooseBean.setChoosen(selectItems[i]); list.add(chooseBean); } configBean = StyledDialog.buildMdIOSList(getContext(), list, new MyItemDialogListener() { @Override public void onItemClick(CharSequence text, int position) { new ToastDialog(getContext()).setText(text.toString()).show(); } @Override public void positiveButton() { configBean.commonDialog.hide(); configBean.commonDialog = null; } @Override public void negativeButton() { configBean.commonDialog.hide(); configBean.commonDialog = null; } }); configBean.commonDialog.show();

Menudialog

configBean = StyledDialog.buildMdSingleMenuChoose(getContext(), list, 100, 100, 400,650,new MyItemDialogListener() { @Override public void onItemClick(CharSequence text, int position) { // new ToastDialog(getContext()).setText(text.toString()).show(); } @Override public void positiveButton() { configBean.commonDialog.hide(); configBean.commonDialog = null; } @Override public void negativeButton() { configBean.commonDialog.hide(); configBean.commonDialog = null; } }); configBean.commonDialog.show();

Dialog开发实现

新建一个Module

新建一个Module，类型选择HarmonyOS Library，模块名为dialoglibrary，如图

实现类

新建一个StyleDialog类，添加静态方法，代码如下：

/** * @param context context * @param title 对话框的title * @param msg 对话框的提示信息 * @param listener 对话框 ok 和 cancle 的点击监听事件 * @return configbean */ public static ConfigBean buildMdAlert(Context context, CharSequence title, CharSequence msg, MyDialogListener listener) { return DialogAssigner.getInstance().assignMdAlert(context, title, msg, listener); } /** * @param context context * @param title 对话框的title * @param list list * @param listener 单项的item 和ok cancle 的点击事件的高防服务器监听 * @return configbean */ public static ConfigBean buildMdSingleChoose(Context context, CharSequence title, ArrayList<ChooseBean> list, MyItemDialogListener listener) { return DialogAssigner.getInstance().assignMdSingleChoose(context, title, list, listener); } /** * @param context context * @param title 对话框的title * @param list list * @param btnListener ok cancle 的点击监听事件 * @return configbean */ public static ConfigBean buildMdMultiChoose(Context context, CharSequence title, ArrayList<ChooseBean> list, MyCheckBoxItemDialogListener btnListener) { return DialogAssigner.getInstance().assignMdMultiChoose(context, title, list, btnListener); } /** * @param context context * @param title 对话框的title * @param hint1 输入框的hint 文字提示信息 * @param listener ok cancle 的点击监听事件 * @return configbean */ public static ConfigBean buildNormalInput(Context context, CharSequence title, CharSequence hint1, MyDialogListener listener) { return DialogAssigner.getInstance().assignNormalInput(context, title, hint1, listener); }

新建DialogAssigner implements Assignable，代码如下：

/** * */ private static DialogAssigner instance; /** * */ private DialogAssigner() { } /** * */ public static DialogAssigner getInstance() { if (instance == null) { instance = new DialogAssigner(); } return instance; } @Override public ConfigBean assignMdAlert(Context context, CharSequence title, CharSequence msg, MyDialogListener listener) { ConfigBean bean = new ConfigBean(); bean.context = context; bean.msg = msg; bean.title = title; bean.listener = listener; bean.type = DefaultConfig.ALERT_DIALOG; bean.buildByType(bean); return bean; } @Override public ConfigBean assignNormalInput(Context context, CharSequence title, CharSequence hint1, MyDialogListener listener) { ConfigBean bean = new ConfigBean(); bean.context = context; bean.listener = listener; bean.title = title; bean.hint1 = hint1; bean.type = DefaultConfig.INPUT_DIALOG; bean.buildByType(bean); return bean; } @Override public ConfigBean assignMdSingleChoose(Context context, CharSequence title, ArrayList<ChooseBean> list, MyItemDialogListener listener) { ConfigBean bean = new ConfigBean(); bean.context = context; bean.title = title; bean.itemListener = listener; bean.type = DefaultConfig.SINGLE_DIALOG; bean.chooseBeans.addAll(list); bean.buildByType(bean); return bean; } @Override public ConfigBean assignMdMultiChoose(Context context, CharSequence title, ArrayList<ChooseBean> list, MyCheckBoxItemDialogListener checkboxListener) { ConfigBean bean = new ConfigBean(); bean.context = context; bean.msg = title; bean.title = title; bean.checkBoxItemDialogListener = checkboxListener; bean.type = DefaultConfig.MULTI_DIALOG; bean.chooseBeans.addAll(list); bean.buildByType(bean); return bean; }

新建MyDialogBuilder，实现不同dialog的生成

/** * 根据dialog类型，生成不同类型的dialog * * @param bean bean * @return configbean */ public ConfigBean buildByType(ConfigBean bean) { switch (bean.type) { case DefaultConfig.ALERT_DIALOG: buildMdAlert(bean); break; case DefaultConfig.INPUT_DIALOG: buildMdInput(bean); break; case DefaultConfig.SINGLE_DIALOG: buildMdSingleChoose(bean); break; case DefaultConfig.MULTI_DIALOG: buildMdMultiChoose(bean); break; default: break; } return bean; } /** * 生成alert dialog * * @param bean bean * @return ConfigBean */ protected ConfigBean buildMdAlert(final ConfigBean bean) { CommonDialog commonDialog = new CommonDialog(bean.context); Component component = LayoutScatter.getInstance(bean.context).parse(ResourceTable.Layout_alert_dialog_layout, null, false); commonDialog.setContentCustomComponent(component); commonDialog.setTransparent(true); Text titleTV = (Text) component.findComponentById(ResourceTable.Id_alert_dialog_title); titleTV.setText(bean.title.toString()); Text messageTV = (Text) component.findComponentById(ResourceTable.Id_alert_dialog_message); messageTV.setText(bean.msg.toString()); Button ok = (Button) component.findComponentById(ResourceTable.Id_alert_dialog_ok); ok.setClickedListener(component1 -> { bean.listener.positiveButton(); }); Button cancle = (Button) component.findComponentById(ResourceTable.Id_alert_dialog_cancle); cancle.setClickedListener(component1 -> { bean.listener.negativeButton(); }); bean.commonDialog = commonDialog; return bean; } /** * 生成input dialog * * @param bean bean * @return ConfigBean */ protected ConfigBean buildMdInput(final ConfigBean bean) { CommonDialog commonDialog = new CommonDialog(bean.context); Component component = LayoutScatter.getInstance(bean.context).parse(ResourceTable.Layout_input_dialog_layout, null, false); commonDialog.setContentCustomComponent(component); commonDialog.setTransparent(true); Text titleTV = (Text) component.findComponentById(ResourceTable.Id_input_dialog_title); titleTV.setText(bean.title.toString()); TextField messageTV = (TextField) component.findComponentById(ResourceTable.Id_input_dialog_text_field); messageTV.setHint(bean.hint1.toString()); Button ok = (Button) component.findComponentById(ResourceTable.Id_input_dialog_ok2); ok.setClickedListener(component1 -> { bean.listener.positiveButton(); }); Button cancle = (Button) component.findComponentById(ResourceTable.Id_input_dialog_cancle); cancle.setClickedListener(component1 -> { bean.listener.negativeButton(); }); bean.commonDialog = commonDialog; return bean; } /** * 生成单选dialog * * @param bean bean * @return ConfigBean */ protected ConfigBean buildMdSingleChoose(final ConfigBean bean) { CommonDialog commonDialog = new CommonDialog(bean.context); Component component = LayoutScatter.getInstance(bean.context).parse(ResourceTable.Layout_single_choose_dialog_layout, null, false); commonDialog.setTransparent(true); Text titleTv = (Text) component.findComponentById(ResourceTable.Id_single_dialog_title); titleTv.setText(bean.title.toString()); RadioContainer radioContainer = (RadioContainer) component.findComponentById(ResourceTable.Id_radio_container); Resource selectResource = null; Resource emptyResource = null; try { selectResource = bean.context.getResourceManager().getResource(ResourceTable.Media_select); emptyResource = bean.context.getResourceManager().getResource(ResourceTable.Media_unselect); } catch (IOException e) { e.printStackTrace(); } catch (NotExistException e) { e.printStackTrace(); } PixelMapElement selectElement = new PixelMapElement(selectResource); PixelMapElement emptyElement = new PixelMapElement(emptyResource); for (int i = 0; i < bean.chooseBeans.size(); i++) { ChooseBean chooseBean = bean.chooseBeans.get(i); RadioButton radioButton = new RadioButton(bean.context); radioButton.setWidth(ComponentContainer.LayoutConfig.MATCH_CONTENT); radioButton.setHeight(150); radioButton.setTextSize(50); radioButton.setText(chooseBean.getTxt().toString()); radioButton.setButtonElement(null); if (chooseBean.isChoosen()) { radioButton.setSelected(true); } else { radioButton.setSelected(false); } StateElement checkElement = new StateElement(); checkElement.addState(new int[]{ ComponentState.COMPONENT_STATE_SELECTED}, selectElement); checkElement.addState(new int[]{ ComponentState.COMPONENT_STATE_EMPTY}, emptyElement); radioButton.setAroundElements(checkElement, null, null, null); radioContainer.addComponent(radioButton); } radioContainer.setMarkChangedListener(new RadioContainer.CheckedStateChangedListener() { @Override public void onCheckedChanged(RadioContainer r, int i) { for (int j = 0; j < bean.chooseBeans.size(); j++) { RadioButton radioButton1 = (RadioButton) r.getComponentAt(j); if (j == i) { radioButton1.setSelected(true); bean.itemListener.onItemClick(bean.chooseBeans.get(i).getTxt(), i); } else { radioButton1.setSelected(false); } } } }); Button ok = (Button) component.findComponentById(ResourceTable.Id_single_dialog_ok); ok.setClickedListener(component1 -> { bean.itemListener.positiveButton(); }); Button cancle = (Button) component.findComponentById(ResourceTable.Id_single_dialog_cancle); cancle.setClickedListener(component1 -> { bean.itemListener.negativeButton(); }); component.invalidate(); commonDialog.setContentCustomComponent(component); bean.commonDialog = commonDialog; return bean; } /** * 生成多选dialog * * @param bean bean * @return ConfigBean */ protected ConfigBean buildMdMultiChoose(final ConfigBean bean) { CommonDialog commonDialog = new CommonDialog(bean.context); Component component = LayoutScatter.getInstance(bean.context).parse(ResourceTable.Layout_multi_choose_dialog_layout, null, false); commonDialog.setTransparent(true); DirectionalLayout layout = (DirectionalLayout) component.findComponentById(ResourceTable.Id_checkbox_layout); Resource selectResource = null; Resource emptyResource = null; try { selectResource = bean.context.getResourceManager().getResource(ResourceTable.Media_checkbox_select); emptyResource = bean.context.getResourceManager().getResource(ResourceTable.Media_checkbox_unselect); } catch (IOException e) { e.printStackTrace(); } catch (NotExistException e) { e.printStackTrace(); } PixelMapElement selectElement = new PixelMapElement(selectResource); PixelMapElement emptyElement = new PixelMapElement(emptyResource); for (int i = 0; i < bean.chooseBeans.size(); i++) { ChooseBean chooseBean = bean.chooseBeans.get(i); Checkbox checkbox = new Checkbox(bean.context); checkbox.setWidth(ComponentContainer.LayoutConfig.MATCH_CONTENT); checkbox.setHeight(150); checkbox.setTextSize(50); checkbox.setText(chooseBean.getTxt().toString()); if (chooseBean.isChoosen()) { checkbox.setChecked(true); } else { checkbox.setChecked(false); } checkbox.setButtonElement(null); checkbox.setTag(i); StateElement checkElement = new StateElement(); checkElement.addState(new int[]{ ComponentState.COMPONENT_STATE_CHECKED}, selectElement); checkElement.addState(new int[]{ ComponentState.COMPONENT_STATE_EMPTY}, emptyElement); checkbox.setAroundElements(checkElement, null, null, null); checkbox.setCheckedStateChangedListener((absButton, state) -> { absButton.setChecked(state); absButton.setAroundElements(checkElement, null, null, null); bean.checkBoxItemDialogListener.onItemClick((Checkbox) absButton, (int) absButton.getTag()); }); layout.addComponent(checkbox); } Button ok = (Button) component.findComponentById(ResourceTable.Id_multi_dialog_ok); ok.setClickedListener(component1 -> { bean.checkBoxItemDialogListener.positiveButton(); }); Button cancle = (Button) component.findComponentById(ResourceTable.Id_multi_dialog_cancle); cancle.setClickedListener(component1 -> { bean.checkBoxItemDialogListener.negativeButton(); }); component.invalidate(); commonDialog.setContentCustomComponent(component); bean.commonDialog = commonDialog; return bean; }