鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Toast组件

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Toast组件

一、操作环境

操作系统:  Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1

二、Toast组件

Toast 的应用场景也非常广泛,比如网络请求出错了可以弹一个 Toast 提示等。@ohos.prompt 模块里提供显示一个 Toast 的 API 如下所示:

declare namespace prompt {
  // 显示一个Toast
  function showToast(options: ShowToastOptions):void;
}

interface ShowToastOptions { // Toast配置参数
  message: string;           // Toast显示文本
  duration?: number;         // Toast显示时长
  bottom?: string | number;  // Toast距离屏幕底部距离
}
  • options:设备 Toast 显示特性,ShowToastOptions 参数说明如下:
    • message:提示文本,必填项。
    • duration:Toast 显示时间,单位毫秒,范围 [1500, 10000],默认1500。
    • bottom:设置 Toast 的显示位置距离底部的间距。

三、示例

代码

import prompt from '@ohos.prompt';
import promptAction from '@ohos.promptAction';

@Entry @Component struct ToastTest {

  build() {
    Column({space: 10}) {

      Button("无参数Toast")
        .onClick(() => {
          promptAction.showToast({
            message: "默认Toast"
          })
        })

      Button("带参数Toast")
        .onClick(() => {
          promptAction.showToast({
            message: "bottom为300的位置", // 显示文本
            duration: 8000,              // 显示时长
            bottom: 300                  // 距离底部的距离
          })
        })
    }
    .width('100%')
    .height('100%')
    .padding(10)
  }
}

图片

  • 6
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
以下是一个简单的React封装toast组件的示例: ```jsx import React, { useState, useEffect } from 'react'; import ReactDOM from 'react-dom'; import './toast.css'; const Toast = ({ message, duration = 3000, onClose }) => { const [visible, setVisible] = useState(false); useEffect(() => { setVisible(true); const timer = setTimeout(() => { setVisible(false); onClose && onClose(); }, duration); return () => clearTimeout(timer); }, [duration, onClose]); return visible ? ( <div className="toast"> <div className="toast-message">{message}</div> </div> ) : null; }; const showToast = (message, duration = 3000, onClose) => { const div = document.createElement('div'); document.body.appendChild(div); ReactDOM.render( <Toast message={message} duration={duration} onClose={() => { ReactDOM.unmountComponentAtNode(div); onClose && onClose(); }} />, div ); }; export default showToast; ``` 这个组件包含一个`Toast`组件和一个`showToast`函数。`Toast`组件接收`message`、`duration`和`onClose`作为属性,其中`message`表示要显示的消息,`duration`表示消息显示的时间(默认为3秒),`onClose`表示关闭消息时的回调函数。 `showToast`函数用于在页面上创建一个`Toast`组件并显示消息。它接收与`Toast`组件相同的属性,还有一个可选的`onClose`回调函数,用于在消息关闭时执行其他操作。 在使用时,可以像这样调用`showToast`函数: ```jsx import React from 'react'; import showToast from './toast'; const MyComponent = () => { const handleClick = () => { showToast('Hello, world!', 2000, () => console.log('Toast closed.')); }; return ( <button onClick={handleClick}>Show Toast</button> ); }; export default MyComponent; ``` 这个示例在点击按钮时显示一个消息框,显示2秒后关闭,并在关闭时输出一条消息到控制台。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

亚丁号

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值