欢迎光临
我们一直在努力
        找回密码
当前位置：171主机测评 > 服务器技术 > 正文

HarmonyOS ArkUI训练营入门-组件掌握系列-Toast 提示组件应用-PC版本

2026-06-18 分类：服务器技术 阅读(58) 评论(0)

在这里插入图片描述

概述

Toast 是移动应用中常用的轻量级提示组件，用于向用户显示短暂的信息提示。HarmonyOS ArkUI 提供的 promptAction.showToast 功能简单易用，支持自定义消息、时长和位置等特性。本文将从 Toast 基础、属性配置、样式定制、高级用法、实际应用等多个维度，深入讲解 Toast 组件的使用方法。

一、Toast 组件基础

1.1 Toast 的概念

Toast 是一种轻量级的提示组件，用于向用户显示短暂的信息提示。它具有以下特点：

特点说明
临时性 显示一段时间后自动消失
非阻塞 不阻止用户操作其他内容
轻量级 不占用过多屏幕空间
简洁性 只显示简单的文本信息

1.2 Toast 的适用场景

场景示例
操作反馈 “保存成功”、“删除成功”
状态提示 “网络连接中”、“加载完成”
错误提示 “请输入用户名”、“密码错误”
信息通知 “新消息提醒”、“系统更新”

1.3 基础使用

使用 promptAction.showToast 显示 Toast：

import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct ToastBasic {
build() {
Column() {
Button('显示 Toast')
.onClick(() => {
promptAction.showToast({
message: '这是一个 Toast 提示'
});
})
}
.padding(20)
}
}

二、属性配置

2.1 showToast 参数说明

interface ShowToastOptions {
message: string; // 提示消息（必填）
duration?: number; // 显示时长（毫秒）
bottom?: string; // 距离底部的距离
}

2.2 参数详解

参数类型默认值说明
message string – 要显示的提示消息
duration number 2000 显示时长，单位毫秒
bottom string ‘50vp’ 距离屏幕底部的距离

2.3 基础示例

@Entry
@Component
struct BasicToast {
build() {
Column() {
Text('Toast 基础使用')
.fontSize(20)
.fontWeight(FontWeight.Bold)
.margin({ bottom: 20 })

Button('显示 Toast')
.width('60%')
.height(45)
.onClick(() => {
promptAction.showToast({
message: 'Hello HarmonyOS',
duration: 2000,
bottom: '50vp'
});
})
}
.padding(20)
.width('100%')
.height('100%')
.backgroundColor('#FFFFFF')
.justifyContent(FlexAlign.Center)
}
}

三、样式定制

3.1 自定义消息内容

设置自定义的消息内容：

@Entry
@Component
struct CustomMessage {
@State message: string = '默认消息';

build() {
Column() {
TextInput({ placeholder: '输入消息内容' })
.width('80%')
.height(40)
.margin({ bottom: 16 })
.onChange((value: string) => {
this.message = value;
})

Button('显示 Toast')
.width('60%')
.height(45)
.onClick(() => {
promptAction.showToast({
message: this.message || '请输入消息'
});
})
}
.padding(20)
}
}

3.2 调整显示时长

设置不同的显示时长：

@Entry
@Component
struct DurationToast {
build() {
Column() {
Button('短时间')
.width('60%')
.height(45)
.margin({ bottom: 12 })
.onClick(() => {
promptAction.showToast({
message: '显示 1 秒',
duration: 1000
});
})

Button('标准时间')
.width('60%')
.height(45)
.margin({ bottom: 12 })
.backgroundColor('#0A59F7')
.fontColor('#FFFFFF')
.onClick(() => {
promptAction.showToast({
message: '显示 2 秒',
duration: 2000
});
})

Button('长时间')
.width('60%')
.height(45)
.backgroundColor('#34C759')
.fontColor('#FFFFFF')
.onClick(() => {
promptAction.showToast({
message: '显示 3 秒',
duration: 3000
});
})
}
.padding(20)
}
}

3.3 调整显示位置

设置不同的显示位置：

@Entry
@Component
struct PositionToast {
build() {
Column() {
Button('顶部')
.width('60%')
.height(45)
.margin({ bottom: 12 })
.onClick(() => {
promptAction.showToast({
message: '顶部提示',
bottom: '80%'
});
})

Button('中部')
.width('60%')
.height(45)
.margin({ bottom: 12 })
.backgroundColor('#0A59F7')
.fontColor('#FFFFFF')
.onClick(() => {
promptAction.showToast({
message: '中部提示',
bottom: '50%'
});
})

Button('底部')
.width('60%')
.height(45)
.backgroundColor('#34C759')
.fontColor('#FFFFFF')
.onClick(() => {
promptAction.showToast({
message: '底部提示',
bottom: '10%'
});
})
}
.padding(20)
}
}

四、高级用法

4.1 Toast 工具函数

封装 Toast 工具函数：

class ToastUtil {
static show(message: string, duration: number = 2000, bottom: string = '50vp') {
promptAction.showToast({
message: message,
duration: duration,
bottom: bottom
});
}

static showShort(message: string) {
this.show(message, 1000);
}

static showLong(message: string) {
this.show(message, 3000);
}

static showTop(message: string) {
this.show(message, 2000, '80%');
}

static showCenter(message: string) {
this.show(message, 2000, '50%');
}
}

@Entry
@Component
struct ToastUtilDemo {
build() {
Column() {
Button('工具函数 – 短')
.width('60%')
.height(45)
.margin({ bottom: 12 })
.onClick(() => {
ToastUtil.showShort('短时间提示');
})

Button('工具函数 – 长')
.width('60%')
.height(45)
.margin({ bottom: 12 })
.backgroundColor('#0A59F7')
.fontColor('#FFFFFF')
.onClick(() => {
ToastUtil.showLong('长时间提示');
})

Button('工具函数 – 顶部')
.width('60%')
.height(45)
.backgroundColor('#34C759')
.fontColor('#FFFFFF')
.onClick(() => {
ToastUtil.showTop('顶部提示');
})
}
.padding(20)
}
}

4.2 带图标的 Toast

虽然系统 Toast 不支持直接添加图标，但可以通过自定义组件模拟：

@Entry
@Component
struct IconToast {
@State showToast: boolean = false;
@State toastMessage: string = '';
@State toastIcon: string = '';

showCustomToast(message: string, icon: string = '📢') {
this.toastMessage = message;
this.toastIcon = icon;
this.showToast = true;
setTimeout(() => {
this.showToast = false;
}, 2000);
}

build() {
Column() {
Button('成功提示')
.width('60%')
.height(45)
.margin({ bottom: 12 })
.backgroundColor('#34C759')
.fontColor('#FFFFFF')
.onClick(() => {
this.showCustomToast('操作成功', '✅');
})

Button('错误提示')
.width('60%')
.height(45)
.margin({ bottom: 12 })
.backgroundColor('#FF3B30')
.fontColor('#FFFFFF')
.onClick(() => {
this.showCustomToast('操作失败', '❌');
})

Button('警告提示')
.width('60%')
.height(45)
.backgroundColor('#FF9500')
.fontColor('#FFFFFF')
.onClick(() => {
this.showCustomToast('请注意', '⚠️');
})

if (this.showToast) {
Column() {
Row() {
Text(this.toastIcon)
.fontSize(20)
Text(this.toastMessage)
.fontSize(14)
.fontColor('#FFFFFF')
.margin({ left: 8 })
}
.padding({ left: 16, right: 16, top: 12, bottom: 12 })
}
.backgroundColor('rgba(0, 0, 0, 0.7)')
.borderRadius(24)
.position({ bottom: 100 })
}
}
.padding(20)
.width('100%')
.height('100%')
.backgroundColor('#FFFFFF')
}
}

4.3 Toast 队列管理

管理多个 Toast 的显示顺序：

class ToastQueue {
private static queue: string[] = [];
private static isShowing: boolean = false;

static add(message: string) {
this.queue.push(message);
if (!this.isShowing) {
this.showNext();
}
}

private static showNext() {
if (this.queue.length === 0) {
this.isShowing = false;
return;
}

this.isShowing = true;
const message: string = this.queue.shift()!;

promptAction.showToast({
message: message,
duration: 2000
});

setTimeout(() => {
this.showNext();
}, 2200);
}
}

@Entry
@Component
struct ToastQueueDemo {
build() {
Column() {
Button('添加多个 Toast')
.width('60%')
.height(45)
.onClick(() => {
ToastQueue.add('第一条消息');
ToastQueue.add('第二条消息');
ToastQueue.add('第三条消息');
})
}
.padding(20)
}
}

五、ActionMenu 菜单

5.1 showActionMenu 基础用法

使用 promptAction.showActionMenu 显示操作菜单：

@Entry
@Component
struct ActionMenuBasic {
build() {
Column() {
Button('显示操作菜单')
.width('60%')
.height(45)
.backgroundColor('#34C759')
.fontColor('#FFFFFF')
.onClick(() => {
promptAction.showActionMenu({
title: '操作菜单',
buttons: [
{ text: '复制', color: '#0A59F7' },
{ text: '粘贴', color: '#34C759' },
{ text: '删除', color: '#FF3B30' }
]
}).then((data) => {
promptAction.showToast({
message: '点击了第 ' + (data.index + 1) + ' 项'
});
});
})
}
.padding(20)
}
}

5.2 showActionMenu 参数说明

interface ShowActionMenuOptions {
title?: string; // 菜单标题
buttons: Array<{ // 按钮列表
text: string; // 按钮文本
color?: string; // 按钮颜色
}>;
}

5.3 返回值说明

interface ActionMenuResult {
index: number; // 用户点击的按钮索引（从0开始）
}

六、实际案例：Toast 展示页面

6.1 需求分析

构建一个 Toast 展示页面，包含：

  • 自定义 Toast 内容输入
  • 显示位置选择（顶部、中部、底部）
  • 显示 Toast 按钮
  • 显示 ActionMenu 菜单按钮

6.2 代码实现

import { router, promptAction } from '@kit.ArkUI';

@Entry
@Component
struct ToastShowcase {
@State toastMessage: string = '提示';
@State toastBottom: string = '50vp';

showToast() {
promptAction.showToast({
message: this.toastMessage,
duration: 2000,
bottom: this.toastBottom
});
}

showActionMenu() {
promptAction.showActionMenu({
title: '操作菜单',
buttons: [
{ text: '复制', color: '#0A59F7' },
{ text: '粘贴', color: '#34C759' },
{ text: '删除', color: '#FF3B30' }
]
}).then((data) => {
promptAction.showToast({ message: '点击了第 ' + (data.index + 1) + ' 项' });
});
}

build() {
Column() {
// 顶部标题栏
Row() {
Button('返回')
.onClick(() => {
router.back();
})
Text('Toast 提示')
.fontSize(20)
.fontWeight(FontWeight.Bold)
.layoutWeight(1)
.textAlign(TextAlign.Center)
}
.width('100%')
.padding(12)
.backgroundColor('#F1F3F5')

// Toast 设置
Column() {
Text('自定义 Toast 内容')
.fontSize(14)
.margin({ top: 16 })
TextInput({ placeholder: '请输入要提示的内容' })
.width('90%')
.height(40)
.margin({ top: 8 })
.onChange((value: string) => {
this.toastMessage = value;
})

Text('显示位置')
.fontSize(14)
.margin({ top: 16 })
Row() {
ForEach(['顶部', '中部', '底部'], (label: string, idx: number) => {
Button(label)
.layoutWeight(1)
.height(36)
.margin({ left: idx === 0 ? 0 : 6 })
.backgroundColor(this.toastBottom === ['10%', '50%', '80%'][idx] ? '#0A59F7' : '#F1F3F5')
.fontColor(this.toastBottom === ['10%', '50%', '80%'][idx] ? '#FFFFFF' : '#333333')
.onClick(() => {
this.toastBottom = ['10%', '50%', '80%'][idx];
})
})
}
.width('90%')
.margin({ top: 8 })

Button('显示 Toast')
.width('60%')
.height(45)
.margin({ top: 24 })
.onClick(() => {
this.showToast();
})

Button('显示 ActionMenu 菜单')
.width('80%')
.height(45)
.margin({ top: 16 })
.backgroundColor('#34C759')
.onClick(() => {
this.showActionMenu();
})
}
.width('100%')
.layoutWeight(1)
}
.width('100%')
.height('100%')
.backgroundColor('#FFFFFF')
}
}

七、常见问题与解决方案

7.1 Toast 不显示

问题描述：调用 showToast 后 Toast 没有显示。

解决方案：

  • 检查是否正确导入了 promptAction
  • 确认 message 参数是否有值
  • 检查是否有其他弹窗正在显示

    • 7.2 Toast 显示位置不正确

    问题描述：Toast 显示位置不符合预期。

    解决方案：

  • 检查 bottom 参数的设置
  • 确认使用的单位是否正确（vp 或 %）
  • 检查屏幕尺寸是否影响显示位置

    • 7.3 Toast 显示时间太短或太长

    问题描述：Toast 显示时间不符合预期。

    解决方案：

  • 检查 duration 参数的设置
  • 确认使用的单位是毫秒
  • 根据需求调整时长（推荐 1000-3000 毫秒）

    • 八、总结

    Toast 是 HarmonyOS ArkUI 中常用的轻量级提示组件，掌握其使用方法对于提升用户体验至关重要。

    核心要点：

  • 使用 promptAction.showToast 显示 Toast
  • 通过 message 参数设置提示内容
  • 使用 duration 参数设置显示时长
  • 通过 bottom 参数调整显示位置
  • 使用 promptAction.showActionMenu 显示操作菜单

    • 希望本文能帮助你更好地理解和使用 Toast 组件，构建出优秀的 HarmonyOS 应用。

    参考资料：

    • HarmonyOS ArkUI promptAction 官方文档
    • HarmonyOS 开发指南
    赞(0)
    未经允许不得转载：171主机测评 » HarmonyOS ArkUI训练营入门-组件掌握系列-Toast 提示组件应用-PC版本
    分享到： 更多 (0)
    标签：

    相关推荐

    评论 抢沙发

    取消

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址

    热门标签

    #人工智能(64231)#python(21412)#开发语言(17817)#java(16396)#运维(16167)#linux(15649)#大数据(15314)#服务器(13662)#算法(12287)#前端(11640)#ai(10248)#网络(9901)#数据库(9502)#c++(8637)#学习(7163)#课程设计(7031)#机器学习(7004)#区块链(6058)#后端(5531)#OpenClaw(5414)#spring boot(5295)#深度学习(5266)#c语言(4549)#安全(4484)#毕业设计(4396)#数据结构(4338)#架构(4165)#docker(4113)#javascript(3978)#大模型(3914)

    热门文章

    最新文章

    归档

    分类