3.8HarmonyOS鸿蒙开发组件ToastDialog

Posted 茹茹

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了3.8HarmonyOS鸿蒙开发组件ToastDialog相关的知识，希望对你有一定的参考价值。

3.8【HarmonyOS鸿蒙开发】组件ToastDialog

作者：韩茹

公司：程序咖（北京）科技有限公司

鸿蒙巴士专栏作家

ToastDialog是在窗口上方弹出的对话框，是通知操作的简单反馈。ToastDialog会在一段时间后消失，在此期间，用户还可以操作当前窗口的其他组件。

所以它的特点：

  • 不能够和用户交互，用户不能点击，触摸
  • 不影响用户的其他操作
  • 短时显示后，自动消失

一、创建一个ToastDialog

点击按钮，弹出ToastDialog。

我们现在xml布局文件中：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:
    ohos:
    ohos:orientation="vertical">

    <Button
        ohos:id="$+id:btn1"
        ohos:
        ohos:
        ohos:background_element="#EEEEEE"
        ohos:layout_alignment="horizontal_center"
        ohos:text="显示一个ToastDialog"
        ohos:text_size="50px"
        ohos:top_margin="20vp"
        ohos:padding="20vp"
        />

</DirectionalLayout>

布局效果：

<img src="https://img.chengxuka.com/WX20210610-153518@2x.png/mark" style="zoom:50%;" />

在Java代码中：

                //点击按钮，弹出ToastDialog
        Button btn1 = (Button) findComponentById(ResourceTable.Id_btn1);
        btn1.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                new ToastDialog(getContext())
                        .setText("这是一个吐司对话框")
                        .show();
            }
        });

运行效果：

<img src="https://img.chengxuka.com/toastdialogyunxing1.gif" style="zoom:50%;" />

二、设置ToastDialog

1、设置位置

在xml布局文件中，再添加一个按钮：

<Button
        ohos:id="$+id:btn2"
        ohos:
        ohos:
        ohos:background_element="#EEEEEE"
        ohos:layout_alignment="horizontal_center"
        ohos:text="设置ToastDialog位置"
        ohos:text_size="50px"
        ohos:top_margin="20vp"
        ohos:padding="20vp"
        />

Java中代码：

                //2.设置 ToastDialog 的位置
        Button btn2 = (Button) findComponentById(ResourceTable.Id_btn2);
        btn2.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                /*
                LayoutAlignment.CENTER，居中
                LayoutAlignment.LEFT，垂直居中，左侧显示
                LayoutAlignment.RIGHT
                LayoutAlignment.BOTTOM
                等等。。
                 */
                new ToastDialog(getContext())
                        .setText("这个ToastDialog居中显示")
                        .setAlignment(LayoutAlignment.CENTER)
                        .show();
            }
        });

运行效果：

<img src="https://img.chengxuka.com/toastdialogyunxing2.gif" style="zoom:50%;" />

2、自定义ToastDialog的Component

首先我们再添加一个按钮，ability_main.xml布局文件中，继续添加按钮3：

<Button
        ohos:id="$+id:btn3"
        ohos:
        ohos:
        ohos:background_element="#EEEEEE"
        ohos:layout_alignment="horizontal_center"
        ohos:text="自定义ToastDialog"
        ohos:text_size="50px"
        ohos:top_margin="20vp"
        ohos:padding="20vp"
        />

在layout目录下，新建一个布局文件，layout_toast.xml：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:
    ohos:
    ohos:orientation="vertical">
    <Text
        ohos:id="$+id:msg_toast"
        ohos:
        ohos:
        ohos:layout_alignment="center"
        ohos:text_size="16fp"
        ohos:text="自定义的ToastDialog"
        ohos:padding="20vp"
        ohos:background_element="$graphic:background_toast_element"/>
</DirectionalLayout>

其中graphic下的background_toast_element.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="30vp"/>
    <solid
        ohos:color="#33ff0000"/>
</shape>

Java中的代码：

//3.自定义ToastDialog
        Button btn3 = (Button) findComponentById(ResourceTable.Id_btn3);
        btn3.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                DirectionalLayout toastLayout = (DirectionalLayout) LayoutScatter.getInstance(MainAbilitySlice.this)
                        .parse(ResourceTable.Layout_layout_toast, null, false);
                new ToastDialog(getContext())
                        .setContentCustomComponent(toastLayout)
                        .setSize(DirectionalLayout.LayoutConfig.MATCH_CONTENT, DirectionalLayout.LayoutConfig.MATCH_CONTENT)
                        .setAlignment(LayoutAlignment.CENTER)
                        .show();
            }
        });

运行效果：

<img src="https://img.chengxuka.com/toastdialogyunxing3.gif" style="zoom:50%;" />

3、自定义ToastDialog带图片

首先我们再添加一个按钮，ability_main.xml布局文件中，继续添加按钮3：

<Button
        ohos:id="$+id:btn4"
        ohos:
        ohos:
        ohos:background_element="#EEEEEE"
        ohos:layout_alignment="horizontal_center"
        ohos:text="带图片的ToastDialog"
        ohos:text_size="50px"
        ohos:top_margin="20vp"
        ohos:padding="20vp"
        />

在layout目录下，新建一个布局文件，layout_toast_and_image.xml：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:
    ohos:
    ohos:orientation="horizontal">

    <Image
        ohos:
        ohos:
        ohos:scale_mode="inside"
        ohos:image_src="$media:t4"/>

    <Text
        ohos:id="$+id:msg_toast"
        ohos:
        ohos:
        ohos:background_element="$graphic:background_toast_element"
        ohos:bottom_padding="4vp"
        ohos:layout_alignment="vertical_center"
        ohos:left_padding="16vp"
        ohos:right_padding="16vp"
        ohos:text="这个一个带图片的ToastDialog"
        ohos:text_size="16fp"
        ohos:top_padding="4vp"/>
</DirectionalLayout>

这里我们需要将一个图片t4拷贝到media目录下：

<img src="https://img.chengxuka.com/WX20210610-160901@2x.png/mark" style="zoom:50%;" />

Java中的代码：

 //4.自定义ToastDialog
        Button btn4 = (Button) findComponentById(ResourceTable.Id_btn4);
        btn4.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                DirectionalLayout layout = (DirectionalLayout) LayoutScatter.getInstance(MainAbilitySlice.this)
                        .parse(ResourceTable.Layout_layout_toast_and_image, null, false);
                new ToastDialog(getContext())
                        .setContentCustomComponent(layout)
                        .setSize(DirectionalLayout.LayoutConfig.MATCH_CONTENT, DirectionalLayout.LayoutConfig.MATCH_CONTENT)
                        .setAlignment(LayoutAlignment.CENTER)
                        .show();
            }
        });

运行效果：

<img src="https://img.chengxuka.com/toastdialogyunxing4.gif" style="zoom:50%;" />

更多内容：

1、社区：鸿蒙巴士https://www.harmonybus.net/

2、公众号：HarmonyBus

3、技术交流QQ群：714518656

4、视频课：https://www.chengxuka.com

以上是关于3.8HarmonyOS鸿蒙开发组件ToastDialog的主要内容，如果未能解决你的问题，请参考以下文章

3.9HarmonyOS鸿蒙开发组件Picker

3.3HarmonyOS鸿蒙开发组件TextField

4.1HarmonyOS鸿蒙开发组件ScrollView

4.4HarmonyOS鸿蒙开发组件ListContainer(下)性能优化

Java之父詹姆斯·高斯林 （James Gosling）学鸿蒙（HarmonyOS），HarmonyOS（鸿蒙）——Image组件详述

HarmonyOS（鸿蒙）——Text（文本）组件介绍