当前位置： 正文

鸿蒙 dialog各种用法教程【鸿蒙专题3】

2023-11-12 应用开发 337

前言：

最近又在看鸿蒙相关的文档 学习了一些鸿蒙里面dialog的用法。所以今天就出一篇dialog的文章分享给大家，那么废话不多说我们正式开始。

效果图：

具体实现

  • main_ability_slice 布局文件
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:orientation="vertical">

    <Button
            ohos:id="$+id:common_dialog"
            ohos:text="普通的弹窗"
            ohos:width="match_parent"
            ohos:text_size="15fp"
            ohos:left_margin="20vp"
            ohos:right_margin="20vp"
            ohos:padding="10vp"
            ohos:background_element="$graphic:button_background"
            ohos:layout_alignment="horizontal_center"
            ohos:top_margin="20vp"
            ohos:height="match_content"/>

    <Button
            ohos:id="$+id:list_dialog"
            ohos:text="列表单选弹窗"
            ohos:width="match_parent"
            ohos:left_margin="20vp"
            ohos:right_margin="20vp"
            ohos:padding="10vp"
            ohos:text_size="15fp"
            ohos:background_element="$graphic:button_background"
            ohos:layout_alignment="horizontal_center"
            ohos:top_margin="20vp"
            ohos:height="match_content"/>

    <Button
            ohos:id="$+id:multiselect_dialog"
            ohos:text="列表多选弹窗"
            ohos:width="match_parent"
            ohos:background_element="$graphic:button_background"
            ohos:text_size="15fp"
            ohos:left_margin="20vp"
            ohos:right_margin="20vp"
            ohos:padding="10vp"
            ohos:top_margin="20vp"
            ohos:layout_alignment="horizontal_center"
            ohos:height="match_content"/>

    <Button
            ohos:id="$+id:custom_dialog"
            ohos:text="自定义弹窗"
            ohos:width="match_parent"
            ohos:background_element="$graphic:button_background"
            ohos:text_size="15fp"
            ohos:left_margin="20vp"
            ohos:right_margin="20vp"
            ohos:padding="10vp"
            ohos:layout_alignment="horizontal_center"
            ohos:top_margin="20vp"
            ohos:height="match_content"/>

    <Text
            ohos:id="$+id:result_text"
            ohos:width="match_content"
            ohos:text_size="15fp"
            ohos:layout_alignment="horizontal_center"
            ohos:top_margin="50vp"
            ohos:height="match_content"/>
</DirectionalLayout>
  • 布局效果

我们写了几个button点击的时候来触发我们不同的弹窗 方便我们测试

  • 普通的dialog
  CommonDialog commonDialog = new CommonDialog(this);
        commonDialog.setTitleText("这是一个普通弹窗");
        commonDialog.setContentText("你要确认要退出应用吗");
        commonDialog.setCornerRadius(DIALOG_BOX_CORNER_RADIUS);
        commonDialog.setAlignment(TextAlignment.CENTER);
        commonDialog.setSize(DIALOG_BOX_WIDTH, MATCH_CONTENT);
        commonDialog.setAutoClosable(true);
        commonDialog.setButton(IDialog.BUTTON1, "确认", (iDialog, var) -&gt; {
            resultText.setText("您确认了");
            iDialog.destroy();
        });
        commonDialog.setButton(IDialog.BUTTON2, "取消", (iDialog, var) -&gt; {
            resultText.setText("您取消了");
            iDialog.destroy();
        });
        commonDialog.show();

复制

我们实例化 CommonDialog 后分别调用 CommonDialog 里面的方法设置title, ContentText CornerRadius ,Alignment 等等属性 突然后调用 commonDialog.show() 来显示 这就是我们平常见到退出弹窗的一个简单例子

  • 单选列表dialog
 String[] items = new String[]{"item 1", "item 2", "item 3"};
        ListDialog listDialog = new ListDialog(this);
        listDialog.setAlignment(TextAlignment.CENTER);
        listDialog.setSize(DIALOG_BOX_WIDTH, MATCH_CONTENT);
        listDialog.setTitleText("这是单选框弹窗");
        listDialog.setAutoClosable(true);
        listDialog.setItems(items);
        listDialog.setOnSingleSelectListener((iDialog, index) -&gt; {
            resultText.setText(items[index]);
            iDialog.destroy();
        });
        listDialog.show();

复制

我们这边定义了一个 items 数组来模拟选择的多条数据 ，然后我们实例化 ListDialog 分别设置title., size Alignment 等数据，还有设置数据源 listDialog.setItems(items); 最后我们需要调用 listDialog.show(); 方法来显示 然后我们在 setOnSingleSelectListenerde的回调方法里面来处理我们点击返回选择数据数组的下标方便我们获取我们选择的数据

  • 多选框列表dialog
    String[] itemsString = new String[]{"item 1", "item 2", "item 3", "item 4"};
        boolean[] areSelected = new boolean[]{false, false, false, false};
        List selectedItems = new ArrayList&lt;&gt;();
        ListDialog listDialog = new ListDialog(this);
        listDialog.setTitleText("这是多选框弹窗");
        listDialog.setAlignment(TextAlignment.CENTER);
        listDialog.setSize(DIALOG_BOX_WIDTH, MATCH_CONTENT);
        listDialog.setAutoClosable(true);
        listDialog.setMultiSelectItems(itemsString, areSelected);
        listDialog.setOnMultiSelectListener((iDialog, index, isSelected) -&gt;
                multiSelect(itemsString[index], selectedItems, listDialog.getItemComponent(index)));
        listDialog.setDialogListener(() -&gt; {
            resultText.setText("");
            for (String selectedItem : selectedItems) {
                resultText.append(selectedItem);
            }
            return false;
        });
        listDialog.show();

复制

同上我们顶一个itemsString 数组来模拟器数据 然后定义一个 areSelected 数组来判断是否被选中 我们同上实例化 ListDialog 设置 Title , Alignment, Size 等属性 我们在添加数据的时候需要 listDialog.setMultiSelectItems(itemsString, areSelected); 调用这个方法来传入数据和是否被选中的数组 然后我们调用 listDialog.show(); 来显示 我们在 setOnMultiSelectListener 回调里面来获取选中的下标方便我们来处理选中的数据

  • 自定义dialog
    CustomDialog 布局文件
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:id="$+id:customDialogContent"
    ohos:width="match_content"
    ohos:height="match_content"
    ohos:padding="10vp"
    ohos:orientation="vertical">

    <Text
            ohos:id="$+id:title_text"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text_size="20vp"
            ohos:layout_alignment="horizontal_center"/>

    <DirectionalLayout
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:layout_alignment="horizontal_center"
            ohos:orientation="horizontal"
            ohos:top_margin="10vp">

        <TextField
                ohos:id="$+id:num_1_textfield"
                ohos:text_size="20fp"
                ohos:width="40vp"
                ohos:left_margin="10vp"
                ohos:layout_alignment="horizontal_center"
                ohos:padding="5vp"
                ohos:background_element="$graphic:textfield_background"
                ohos:height="40vp"/>

        <TextField
                ohos:id="$+id:num_2_textfield"
                ohos:text_size="20fp"
                ohos:width="40vp"
                ohos:padding="5vp"
                ohos:left_margin="10vp"
                ohos:background_element="$graphic:textfield_background"
                ohos:height="40vp"/>

        <TextField
                ohos:id="$+id:num_3_textfield"
                ohos:text_size="20fp"
                ohos:width="40vp"
                ohos:padding="5vp"
                ohos:left_margin="10vp"
                ohos:background_element="$graphic:textfield_background"
                ohos:height="40vp"/>

        <TextField
                ohos:id="$+id:num_4_textfield"
                ohos:text_size="20fp"
                ohos:width="40vp"
                ohos:padding="5vp"
                ohos:left_margin="10vp"
                ohos:background_element="$graphic:textfield_background"
                ohos:height="40vp"/>

        <TextField
                ohos:id="$+id:num_5_textfield"
                ohos:text_size="20fp"
                ohos:width="40vp"
                ohos:left_margin="10vp"
                ohos:padding="5vp"
                ohos:background_element="$graphic:textfield_background"
                ohos:height="40vp"/>

        <TextField
                ohos:id="$+id:num_6_textfield"
                ohos:text_size="20fp"
                ohos:left_margin="10vp"
                ohos:width="40vp"
                ohos:padding="5vp"
                ohos:background_element="$graphic:textfield_background"
                ohos:height="40vp"/>
    </DirectionalLayout>

    <Button
            ohos:id="$+id:confirm_button"
            ohos:width="match_content"
            ohos:height="match_content"
            ohos:text="确认"
            ohos:text_size="20vp"
            ohos:top_margin="10vp"
            ohos:layout_alignment="horizontal_center"/>
</DirectionalLayout>

复制

布局效果

自定义 CustomDialog 实现

package ohos.samples.dialog.custom;

import static ohos.samples.dialog.slice.MainAbilitySlice.DIALOG_BOX_CORNER_RADIUS;
import static ohos.samples.dialog.slice.MainAbilitySlice.DIALOG_BOX_WIDTH;
import static ohos.agp.components.ComponentContainer.LayoutConfig.MATCH_CONTENT;
import ohos.samples.dialog.ResourceTable;
import ohos.agp.components.Component;
import ohos.agp.components.LayoutScatter;
import ohos.agp.components.Text;
import ohos.agp.components.TextField;
import ohos.agp.utils.TextAlignment;
import ohos.agp.window.dialog.CommonDialog;
import ohos.app.Context;

import java.util.regex.Pattern;

/**
* CustomDialog
* 类说明 自定义dialog
*
*
*/
public class CustomDialog extends CommonDialog {
   private static final String PATTERN = "^\d{1}$";
   private Component customComponent;
   private TextField checkCode1;
   private TextField checkCode2;
   private TextField checkCode3;
   private TextField checkCode4;
   private TextField checkCode5;
   private TextField checkCode6;
   private Text titleText;
   private Component confirmButton;
   private ConfirmListener confirmListener;
   private Context context;

   /**
    * CustomDialog
    *
    * @param abilityContext Context
    */
   public CustomDialog(Context abilityContext) {
       super(abilityContext);
       this.context = abilityContext;
       initComponents();
       setCornerRadius(DIALOG_BOX_CORNER_RADIUS);
       setAlignment(TextAlignment.CENTER);
       setSize(DIALOG_BOX_WIDTH, MATCH_CONTENT);
   }
   private void initComponents() {
       customComponent = LayoutScatter.getInstance(context)
               .parse(ResourceTable.Layout_custom_dialog_content, null, true);
       checkCode1 = (TextField) customComponent.findComponentById(ResourceTable.Id_num_1_textfield);
       checkCode2 = (TextField) customComponent.findComponentById(ResourceTable.Id_num_2_textfield);
       checkCode3 = (TextField) customComponent.findComponentById(ResourceTable.Id_num_3_textfield);
       checkCode4 = (TextField) customComponent.findComponentById(ResourceTable.Id_num_4_textfield);
       checkCode5 = (TextField) customComponent.findComponentById(ResourceTable.Id_num_5_textfield);
       checkCode6 = (TextField) customComponent.findComponentById(ResourceTable.Id_num_6_textfield);
       titleText = (Text) customComponent.findComponentById(ResourceTable.Id_title_text);
       confirmButton = customComponent.findComponentById(ResourceTable.Id_confirm_button);
       setObserver(checkCode1, checkCode2);
       setObserver(checkCode2, checkCode3);
       setObserver(checkCode3, checkCode4);
       setObserver(checkCode4, checkCode5);
       setObserver(checkCode5, checkCode6);
       setObserver(checkCode6, null);
       super.setContentCustomComponent(customComponent);
       confirm();
   }
   /**
    * set title
    *
    * @param string String
    */
   public void setTitle(String string) {
       titleText.setText(string);
   }
   private void setObserver(TextField textField, Component textFieldNext) {
       textField.addTextObserver((string, start, before, count) -&gt; matchNumber(string, textField, textFieldNext));
   }

   private void matchNumber(String string, TextField textField, Component textFieldNext) {
       boolean isMatch = Pattern.matches(PATTERN, string);
       if (isMatch) {
           textField.setText(string);
       }
       if (textFieldNext != null) {
           textFieldNext.requestFocus();
       }
   }
   private String getContent() {
       return "" + checkCode1.getText() + checkCode2.getText()
               + checkCode3.getText() + checkCode4.getText() + checkCode5.getText() + checkCode6.getText();
   }
   private void confirm() {
       confirmButton.setClickedListener(component -&gt; {
           if (confirmListener != null) {
               confirmListener.onConfirmListener(getContent());
           }
       });
   }
   /**
    * setOnConfirmListener
    *
    * @param confirm ConfirmListener
    */
   public void setOnConfirmListener(ConfirmListener confirm) {
       confirmListener = confirm;
   }
}

复制

我们CustomDialog 继承我们的 CommonDialog 然后我们在构造方法中传入上下文 然后我们 初始化布局中各个空间 我们提供了 setTitle 方法给外部来设置顶部的title 还有 setOnConfirmListener 回调方法来处理我们结果

  • ####具体调用
  CustomDialog customDialog = new CustomDialog(this);
        customDialog.setTitle("这是一个自定义弹窗");
        customDialog.setAutoClosable(true);
        customDialog.setOnConfirmListener(string -&gt; {
            resultText.setText(string);
            customDialog.destroy();
        });
        customDialog.show();

复制

自定义dialog 属性就看我们的自己封装了,我们可以在 CustomDialog类中完成 这样我们的调用代码就相对简洁 。当然我们也可以尽量封装的更好拓展一点 这具体需求和个人设计了 到此 鸿蒙的dialog用法我们就讲完了

最后总结

鸿蒙里面的 dialog 无论是 自定义的 dialog 还是 listdialog 其实我们观察源码都是集成 CommonDialog 所有我们上面提到 多选listdialog 和多选listdialog 我们都可以同过自定义dilaog来实现的 因为篇幅有限这里就不展开讲了有兴趣同学可以私下研究 最后希望我的文章能帮助到各位解决问题 ，以后我还会贡献更多有用的代码分享给大家。各位同学如果觉得文章还不错 ，麻烦给关注和star，小弟在这里谢过啦

文章来源于互联网:鸿蒙 dialog各种用法教程【鸿蒙专题3】

阅读全文
下载说明：
1、本站所有资源均从互联网上收集整理而来，仅供学习交流之用，因此不包含技术服务请大家谅解！
2、本站不提供任何实质性的付费和支付资源，所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用！
3、本站所有资源仅用于学习及研究使用，您必须在下载后的24小时内删除所下载资源，切勿用于商业用途，否则由此引发的法律纠纷及连带责任本站和发布者概不承担！
4、本站站内提供的所有可下载资源，本站保证未做任何负面改动（不包含修复bug和完善功能等正面优化或二次开发），但本站不保证资源的准确性、安全性和完整性，用户下载后自行斟酌，我们以交流学习为目的，并不是所有的源码都100%无错或无bug！如有链接无法下载、失效或广告，请联系客服处理！
5、本站资源除标明原创外均来自网络整理，版权归原作者或本站特约原创作者所有，如侵犯到您的合法权益，请立即告知本站，本站将及时予与删除并致以最深的歉意！
6、如果您也有好的资源或教程，您可以投稿发布，成功分享后有站币奖励和额外收入！
7、如果您喜欢该资源，请支持官方正版资源，以得到更好的正版服务！
8、请您认真阅读上述内容，注册本站用户或下载本站资源即您同意上述内容！
原文链接：https://www.shuli.cc/?p=19262，转载请注明出处。
赏 0

猜你喜欢

4周前 99

4周前 85

4周前 107

4周前 95

4周前 74

4周前 65

评论0

取消

首页 发现 VIP 我的
显示验证码
没有账号？注册  忘记密码？