关于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>

布局成果：

在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();            }        });

运行成果：

二、设置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();            }        });

运行成果：

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();            }        });

运行成果：

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目录下：

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();            }        });

运行成果：