HarmonyOS实战——ToastDialog组件基本使用

简介: HarmonyOS实战——ToastDialog组件基本使用

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 扩展

  1. 可以给ToastDialog弹框一个布局
  2. 把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,"吐司弹框抽取工具类");
        
    }
}
  • 运行:

在这里插入图片描述

  • 点击

在这里插入图片描述

  • 这个弹框就跟我们平时玩的APP中的弹框有些类似,唯一区别就是有点大,在 mytoast.xml 去调节弹框的大小ToastUtils.java 调节弹框的位置

在这里插入图片描述
在这里插入图片描述

  • 还可以给弹框添加一个偏移量,如Y轴添加200px

在这里插入图片描述

  • 运行,点击后,发现弹框往上偏移了

在这里插入图片描述

目录
相关文章
|
2天前
|
搜索推荐 前端开发 开发者
「Mac畅玩鸿蒙与硬件19」鸿蒙UI组件篇9 - 自定义动画实现
自定义动画让开发者可以设计更加个性化和复杂的动画效果,适合表现独特的界面元素。鸿蒙提供了丰富的工具,支持通过自定义路径和时间控制来创建复杂的动画运动。本篇将带你学习如何通过自定义动画实现更多样化的效果。
50 11
「Mac畅玩鸿蒙与硬件19」鸿蒙UI组件篇9 - 自定义动画实现
|
2天前
|
大数据 UED
「Mac畅玩鸿蒙与硬件16」鸿蒙UI组件篇6 - List 和 Grid 组件展示数据列表
List 和 Grid 是鸿蒙开发中的核心组件,用于展示动态数据。List 适合展示垂直或水平排列的数据列表,而 Grid 则适用于展示商品或图片的网格布局。本篇将展示如何封装组件,并通过按钮实现布局切换,提升界面的灵活性和用户体验。
35 9
「Mac畅玩鸿蒙与硬件16」鸿蒙UI组件篇6 - List 和 Grid 组件展示数据列表
|
16天前
|
存储 调度 数据安全/隐私保护
鸿蒙Flutter实战:13-鸿蒙应用打包上架流程
鸿蒙应用打包上架流程包括创建应用、打包签名和上传应用。首先,在AppGallery Connect中创建项目、APP ID和元服务。接着,使用Deveco进行手动签名,生成.p12和.csr文件,并在AppGallery Connect中上传CSR文件获取证书。最后,配置签名并打包生成.app文件,上传至应用市场。常见问题包括检查签名配置文件是否正确。参考资料:[应用/服务签名](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-signing-V5)。
45 3
鸿蒙Flutter实战:13-鸿蒙应用打包上架流程
|
16天前
|
开发工具 芯片 开发者
鸿蒙Flutter实战:12-使用模拟器开发调试
本文介绍了如何在 M 系列芯片的 Mac 电脑上使用模拟器进行鸿蒙 Flutter 开发和调试。主要内容包括:创建 Flutter 项目、签名、创建模拟器、运行 Flutter 项目以及常见问题的解决方法。适用于希望在鸿蒙系统上开发 Flutter 应用的开发者。
35 2
鸿蒙Flutter实战:12-使用模拟器开发调试
|
13天前
|
安全 API 数据处理
鸿蒙next版开发:ArkTS组件通用属性(隐私遮罩)
在HarmonyOS 5.0中,ArkTS引入了隐私遮罩功能,用于保护用户隐私和数据安全。本文详细介绍了隐私遮罩的通用属性和使用方法,并提供了示例代码。隐私遮罩支持Image和Text组件,在数据加载或处理过程中防止敏感信息泄露,提升用户体验和数据安全性。
39 11
|
13天前
|
开发者 UED 容器
鸿蒙next版开发:ArkTS组件通用属性(Flex布局)
在HarmonyOS next中,ArkTS的Flex布局是一种强大且灵活的布局方式,支持水平或垂直方向排列元素,并能动态调整大小和位置以适应不同屏幕。主要属性包括justifyContent、alignItems、direction和wrap,适用于导航栏、侧边栏和表单等多种场景。示例代码展示了如何使用这些属性创建美观的布局。
47 10
|
13天前
|
开发者 容器
鸿蒙next版开发:ArkTS组件通用属性(文本通用)
在HarmonyOS 5.0中,ArkTS提供了丰富的文本通用属性,如textAlign、maxLines、textOverflow、fontSize、fontColor、fontStyle、fontWeight、fontFamily、lineHeight、letterSpacing和decoration等,用于实现多样的文本显示和样式效果。本文详细解读了这些属性,并提供了示例代码,帮助开发者更好地利用这些工具,提升应用界面的美观和实用性。
49 8
|
13天前
|
开发框架 UED 开发者
鸿蒙next版开发:ArkTS组件通用属性(显隐控制)
在HarmonyOS 5.0中,ArkTS引入了显隐控制属性,允许开发者通过`visibility`属性控制组件的显示与隐藏,优化用户体验和应用性能。本文详细解析了`visibility`属性的三种状态(Visible、Hidden、None)及其应用场景,并通过示例代码展示了如何使用显隐控制属性,避免组件频繁创建和销毁,提升性能。
41 8
|
13天前
|
API UED 开发者
鸿蒙next版开发:ArkTS组件通用属性(透明度设置)
在HarmonyOS 5.0中,ArkTS引入了透明度设置属性`opacity`,允许开发者自定义组件的透明度,从而创建复杂的视觉效果和提升用户体验。本文详细解读了`opacity`属性的用法,并提供了示例代码,展示了如何在不同透明度下展示组件。透明度设置在UI开发中具有多种用途,如创建重叠效果、增强美观性和实现动画效果。
33 7
|
13天前
|
UED 开发者 容器
鸿蒙next版开发:ArkTS组件通用属性(位置设置)
在HarmonyOS next中,ArkTS提供了align、direction、position、markAnchor、offset和alignRules等通用属性,用于精确控制组件在用户界面中的位置和布局。本文详细解读了这些属性,并提供了示例代码进行说明。通过这些属性,开发者可以实现精确布局、动态界面调整和提升用户体验。
55 6
下一篇
无影云桌面