乐趣区

关于harmonyos:38HarmonyOS鸿蒙开发组件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:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

    <Button
        ohos:id="$+id:btn1"
        ohos:height="match_content"
        ohos:width="match_content"
        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” alt=”WX20210610-153518@2x” 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” alt=”toastdialogyunxing1″ style=”zoom:50%;” />

二、设置 ToastDialog

1、设置地位

在 xml 布局文件中,再增加一个按钮:

<Button
        ohos:id="$+id:btn2"
        ohos:height="match_content"
        ohos:width="match_content"
        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” alt=”toastdialogyunxing2″ style=”zoom:50%;” />

2、自定义 ToastDialog 的 Component

首先咱们再增加一个按钮,ability_main.xml 布局文件中,持续增加按钮 3:

<Button
        ohos:id="$+id:btn3"
        ohos:height="match_content"
        ohos:width="match_content"
        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:height="match_content"
    ohos:width="match_content"
    ohos:orientation="vertical">
    <Text
        ohos:id="$+id:msg_toast"
        ohos:height="match_content"
        ohos:width="match_content"
        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” alt=”toastdialogyunxing3″ style=”zoom:50%;” />

3、自定义 ToastDialog 带图片

首先咱们再增加一个按钮,ability_main.xml 布局文件中,持续增加按钮 3:

<Button
        ohos:id="$+id:btn4"
        ohos:height="match_content"
        ohos:width="match_content"
        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:height="match_content"
    ohos:width="match_content"
    ohos:orientation="horizontal">

    <Image
        ohos:width="30vp"
        ohos:height="30vp"
        ohos:scale_mode="inside"
        ohos:image_src="$media:t4"/>

    <Text
        ohos:id="$+id:msg_toast"
        ohos:height="match_content"
        ohos:width="match_content"
        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” alt=”WX20210610-160901@2x” 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” alt=”toastdialogyunxing4″ style=”zoom:50%;” />

更多内容:

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

2、公众号:HarmonyBus

3、技术交换 QQ 群:714518656

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

退出移动版