HarmonyOS開發Toast

更多技術交流請加入QQ羣
羣名稱:HarmonyOS技術交流
羣 號:714886304
ToastDialog是在窗口上方彈出的對話框,是通知操作的簡單反饋。ToastDialog會在一段時間後消失,在此期間,用戶還可以操作當前窗口的其他組件。


1.創建一個ToastDialog

new ToastDialog(this)
        .setText("This is a ToastDialog")
        .show();

在這裏插入圖片描述

2.設置位置

new ToastDialog(this)
        .setText("吐司內容")
        .setAlignment(LayoutAlignment.CENTER)
        .show();

在這裏插入圖片描述

3. 自定義ToastDialog的Component

 DirectionalLayout toastLayout = (DirectionalLayout)
                LayoutScatter.getInstance(this)
                        .parse(ResourceTable.Layout_layout_toast,
                                null, false);
        new ToastDialog(this)
                .setComponent(toastLayout)
                .setSize(DirectionalLayout.LayoutConfig.MATCH_CONTENT,
                        DirectionalLayout.LayoutConfig.MATCH_CONTENT)
                .setAlignment(LayoutAlignment.CENTER)
                .show();

(1)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:left_padding="16vp"
        ohos:right_padding="16vp"
        ohos:top_padding="4vp"
        ohos:bottom_padding="4vp"
        ohos:layout_alignment="center"
        ohos:text_size="16fp"
        ohos:text="吐司內容"
        ohos:background_element="$graphic:background_toast_element"/>
</DirectionalLayout>

(2)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="#66808080"/>
</shape>

在這裏插入圖片描述

4. 自定義視圖:添加多個視圖的場景

(1)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:icon"/>

    <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="吐司內容"
        ohos:text_size="16fp"
        ohos:top_padding="4vp"/>
</DirectionalLayout>

(2)其中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="#66808080"/>
</shape>

(3)java代碼

DirectionalLayout layout = (DirectionalLayout) LayoutScatter.getInstance(this)
                    .parse(ResourceTable.Layout_layout_toast_and_image, null, false);
new ToastDialog(this)
    .setComponent(layout)
    .setSize(DirectionalLayout.LayoutConfig.MATCH_CONTENT, DirectionalLayout.LayoutConfig.MATCH_CONTENT)
    .setAlignment(LayoutAlignment.CENTER)
    .show();

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章