HarmonyOS實戰—ToastDialog組件的基本使用

作者：兮動人 2021-09-13 15:17:28

開發前端 OpenHarmony

oastDialog 是 CommonDialog 的子類，他們的用法幾乎是一致的，只不過 ToastDialog 有自己的特性，ToastDialog 彈框有自己的展示時間，默認展示 2 秒鐘，時間到了之后彈框就會自動消失。

[[423591]]

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com

Table of Contents

1. ToastDialog 簡介

ToastDialog 是 CommonDialog 的子類，他們的用法幾乎是一致的，只不過 ToastDialog 有自己的特性
ToastDialog 的組成如下：標題、提示內容、選擇按鈕

一般只會用中間的提示內容，因為 ToastDialog 出現的意義就是用來作消息提示的
ToastDialog 彈框有自己的展示時間，默認展示 2 秒鐘，時間到了之后彈框就會自動消失

2. ToastDialog 案例

案例：點擊按鈕彈出一個2秒的彈框提示信息

ability_main

<?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"> 
 
    <Text 
        ohos:id="$+id:msg" 
        ohos:height="match_content" 
        ohos:width="match_content" 
        ohos:text_size="30fp" 
        ohos:text_color="#FFFFFF" 
        ohos:text_alignment="center" 
        ohos:background_element="#464343" 
        /> 
 
</DirectionalLayout>

MainAbilitySlice

package com.xdr630.toastapplication.slice; 
 
import com.xdr630.toastapplication.ResourceTable; 
import ohos.aafwk.ability.AbilitySlice; 
import ohos.aafwk.content.Intent; 
import ohos.agp.components.Button; 
import ohos.agp.components.Component; 
import ohos.agp.utils.LayoutAlignment; 
import ohos.agp.window.dialog.ToastDialog; 
 
public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener { 
    @Override 
    public void onStart(Intent intent) { 
        super.onStart(intent); 
        super.setUIContent(ResourceTable.Layout_ability_main); 
 
        //找到界面中的按鈕 
        Button but = (Button) findComponentById(ResourceTable.Id_but); 
        //添加點擊事件 
        but.setClickedListener(this); 
 
    } 
 
    @Override 
    public void onActive() { 
        super.onActive(); 
    } 
 
    @Override 
    public void onForeground(Intent intent) { 
        super.onForeground(intent); 
    } 
 
    @Override 
    public void onClick(Component component) { 
        //出現一個 ToastDialog 彈框 
        // this:表示當前的彈框展示在當前的界面 
        ToastDialog td = new ToastDialog(this); 
        //給ToastDialog設置要展示的文本內容 
        td.setText("吐司彈框出現了"); 
        //設置居中 
        td.setAlignment(LayoutAlignment.CENTER); 
        //設置出現的時間，單位：毫秒。下面就是設置彈框時間只有兩秒 
        td.setDuration(2000); 
        //讓彈框出現 
        td.show(); 
    } 
}

運行：

點擊按鈕，可以看到彈框提示信息出現了

兩秒后彈框消失

注意事項：

基本使用：

ToastDialog t = new ToastDialog(this); 
t.setText("要顯示的內容") 
t.setAlignment(LayoutAlignment.CENTER); 
t.show();

相關設置：

ToastDialog toastDialog = new ToastDialog(this); 
//設置的大小 
//如果不寫，默認包裹內容 
toastDialog.setSize(DirectionalLayout.LayoutConfig.MATCH_CONTENT, 
DirectionalLayout.LayoutConfig.MATCH_CONTENT); 
//設置持續時間 
//如果不寫，默認2秒 
toastDialog.setDuration(2000); 
//設置自動關閉 
//如果不寫，就是自動關閉 
toastDialog.setAutoClosable(true); 
//設置位置 
//如果不寫，默認居中 
toastDialog.setAlignment(LayoutAlignment.CENTER); 
//設置提示信息內容 
toastDialog.setText("要顯示的內容"); 
//讓吐司展示出來 
toastDialog.show();

3. ToastDialog 抽取工具類

ToastDialog 擴展

可以給ToastDialog彈框一個布局
把ToastDialog抽取到一個工具類當中，以后用到彈框的時候就不需要再寫了，直接調用工具類的方法就可以了

案例：

新建一個布局文件，名為：mytoast

把父類布局也改成 match_content

在布局文件寫一個文本就可以了，因為ToastDialog也只有一個文本提示
因為在每次彈出消息的時候要修改文本里的內容，所以要給文本一個id，文本內容是變化的，所以要在Java代碼那里設置

mytoast.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" 
        ohos:height="match_content" 
        ohos:width="match_content" 
        ohos:text_size="30fp" 
        ohos:text_color="#FFFFFF" 
        ohos:text_alignment="center" 
        ohos:background_element="#464343" 
        /> 
 
</DirectionalLayout>

新建工具包和類

ToastUtils

package com.xdr630.toastapplication.MyToastUtils; 
 
import com.xdr630.toastapplication.ResourceTable; 
import ohos.agp.components.DirectionalLayout; 
import ohos.agp.components.LayoutScatter; 
import ohos.agp.components.Text; 
import ohos.agp.utils.LayoutAlignment; 
import ohos.agp.window.dialog.ToastDialog; 
import ohos.app.Context; 
 
public class ToastUtils { 
    public static void showDialog(Context context,String message){ 
 
        //1.把 xml 文件加載到內存當中 
        DirectionalLayout dl = (DirectionalLayout) LayoutScatter.getInstance(context).parse(ResourceTable.Layout_mytoast, null, false); 
 
        //2.獲取到當前布局對象中的文本組件 
        Text msg = (Text) dl.findComponentById(ResourceTable.Id_msg); 
 
        //3.把需要提示的信息設置到文本組件 
        msg.setText(message); 
 
        //4.創建一個ToastDialog對象 
        ToastDialog td = new ToastDialog(context); 
        //設置彈框的大小，默認是包裹內容 
        //寬高都要設置 
        td.setSize(DirectionalLayout.LayoutConfig.MATCH_CONTENT,DirectionalLayout.LayoutConfig.MATCH_CONTENT); 
        //設置出現的時間 
        td.setDuration(2000); 
        //設置對齊方式 
        td.setAlignment(LayoutAlignment.CENTER); 
        //把 xml 對象交給ToastDialog 
        td.setContentCustomComponent(dl); 
        //讓彈框出現 
        td.show(); 
    } 
}

在 MainAbilitySlice 中修改 onClick 方法中去調用工具類方法

package com.xdr630.toastapplication.slice; 
 
import com.xdr630.toastapplication.MyToastUtils.ToastUtils; 
import com.xdr630.toastapplication.ResourceTable; 
import ohos.aafwk.ability.AbilitySlice; 
import ohos.aafwk.content.Intent; 
import ohos.agp.components.Button; 
import ohos.agp.components.Component; 
import ohos.agp.utils.LayoutAlignment; 
import ohos.agp.window.dialog.ToastDialog; 
 
public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener { 
    @Override 
    public void onStart(Intent intent) { 
        super.onStart(intent); 
        super.setUIContent(ResourceTable.Layout_ability_main); 
 
        //找到界面中的按鈕 
        Button but = (Button) findComponentById(ResourceTable.Id_but); 
        //添加點擊事件 
        but.setClickedListener(this); 
 
    } 
 
    @Override 
    public void onActive() { 
        super.onActive(); 
    } 
 
    @Override 
    public void onForeground(Intent intent) { 
        super.onForeground(intent); 
    } 
 
    @Override 
    public void onClick(Component component) { 
 
        ToastUtils.showDialog(this,"吐司彈框抽取工具類"); 
         
    } 
}