草庐IT

丢掉丑陋的 toast，会动的 toast 更有趣

岛上码农 2023-03-28 原文
motion_toast

前言

我们通常会用 toast（也叫吐司）来显示提示信息，例如网络请求错误，校验错误等等。大多数 App的 toast 都很简单，简单的半透明黑底加上白色文字草草了事，比如下面这种.

默认toast

说实话，这种toast 的体验很糟糕。假设是新手用户，他们并不知道 toast 从哪里出来，等出现错误的时候，闪现出来的时候，可能还没抓住内容的重点就消失了（尤其是想截屏抓错误的时候，更抓狂）。这是因为一个是这种 toast 一般比较小，而是动效非常简单，用来提醒其实并不是特别好。怎么破？本篇来给大家介绍一个非常有趣的 toast 组件 —— motion_toast。

motion_toast 介绍

从名字就知道，motion_toast 是支持动效的，除此之外，它的颜值还很高，下面是它的一个示例动图，仔细看那个小闹钟图标，是在跳动的哦。这种提醒效果比起常用的 toast 来说醒目多了，也更有趣味性。


motion_toast示例

下面我们看看 motion_toast 的特性：

  • 可以通过动画图标实现动效；
  • 内置了成功、警告、错误、提醒和删除类型；
  • 支持自定义；
  • 支持不同的主题色；
  • 支持 null safety；
  • 心跳动画效果；
  • 完全自定义的文本内容；
  • 内置动画效果；
  • 支持自定义布局（LTR 和 RTL）；
  • 自定义持续时长；
  • 自定义展现位置（居中，底部或顶部）；
  • 支持长文本显示；
  • 自定义背景样式；
  • 自定义消失形式。

可以看到，除了能够开箱即用之外，我们还可以通过自定义来丰富 toast 的样式，使之更有趣。

示例

介绍完了，我们来一些典型的示例吧，首先在 pubspec.yaml 中添加依赖motion_toast: ^2.0.0（最低Dart版本需要2.12）。

最简单用法

只需要一行代码搞定！其他参数在 success 的命名构造方法中默认了，因此使用非常简单。

MotionToast.success(description: '操作成功！').show(context);

其他内置的提醒

内置的提醒也支持我们修改默认参数进行样式调整，如标题、位置、宽度、显示位置、动画曲线等等。

// 错误提示
MotionToast.error(
  description: '发生错误！',
  width: 300,
  position: MOTION_TOAST_POSITION.center,
).show(context);

//删除提示
MotionToast.delete(
  description: '已成功删除',
  position: MOTION_TOAST_POSITION.bottom,
  animationType: ANIMATION.fromLeft,
  animationCurve: Curves.bounceIn,
).show(context);

// 信息提醒（带标题）
 MotionToast.info(
  description: '这是一条提醒，可能会有很多行。toast 会自动调整高度显示',
  title: '提醒',
  titleStyle: TextStyle(fontWeight: FontWeight.bold),
  position: MOTION_TOAST_POSITION.bottom,
  animationType: ANIMATION.fromBottom,
  animationCurve: Curves.linear,
  dismissable: true,
).show(context);

不过需要注意的是，一个是 dismissable 参数只对显示位置在底部的有用，当在底部且dismissable为 true 时，点击空白处可以让 toast 提前消失。另外就是显示位置 position 和 animationType 是存在某些互斥关系的。从源码可以看到底部显示的时候，animationType不能是 fromTop，顶部显示的时候 animationType 不能是 fromBottom。

void _assertValidValues() {
  assert(
    (position == MOTION_TOAST_POSITION.bottom &&
            animationType != ANIMATION.fromTop) ||
        (position == MOTION_TOAST_POSITION.top &&
            animationType != ANIMATION.fromBottom) ||
        (position == MOTION_TOAST_POSITION.center),
  );
}

自定义 toast

自定义其实就是使用 MotionToast 构建一个实例，其中，description，icon 和 primaryColor参数是必传的。自定义的参数很多，使用的时候建议看一下源码注释。

MotionToast(
  description: '这是自定义 toast',
  icon: Icons.flag,
  primaryColor: Colors.blue,
  secondaryColor: Colors.green[300],
  descriptionStyle: TextStyle(
    color: Colors.white,
  ),
  position: MOTION_TOAST_POSITION.center,
  animationType: ANIMATION.fromRight,
  animationCurve: Curves.easeIn,
).show(context);

下面对自定义的一些参数做一下解释：

  • icon：图标，IconData 类，可以使用系统字体图标；
  • primaryColor：主颜色，也就是大的背景底色；
  • secondaryColor：辅助色，也就是图标和旁边的竖条的颜色；
  • descriptionStyle：toast 文字的字体样式；
  • title：标题文字；
  • titleStyle：标题文字样式；
  • toastDuration：显示时长；
  • backgroundType：背景类型，枚举值，共三个可选值，transparent，solid和 lighter，默认是 lighter。lighter其实就是加了一层白色底色，然后再将原先的背景色（主色调）加上一定的透明度叠加到上面，所以看起来会泛白。
  • onClose：关闭时回调，可以用于出现多个错误时依次展示，或者是关闭后触发某些动作，如返回上一页。

总结

看完之后，是不是觉得以前的 toast 太丑了？用 motion_toast来一个更有趣的吧。另外，整个 motion_toast 的源码并不多，有兴趣的可以读读源码，了解一下toast 的实现也是不错的。

toast丢掉code自定section

有关丢掉丑陋的 toast，会动的 toast 更有趣的更多相关文章

  1. javascript - addEventListener ("loadedmetadata"，有趣)没有正确运行，Firefox 错过事件 - 2

    我写了一个页面，发现addEventListener("loadedmetadata",fun)在firefox上运行不正确我正在尝试修复一个旧软件的错误。在加载视频和页面时，该软件尝试在页面上绘制一些播放器Controller。它在Chrome和IE上运行良好，但无法绘制一些播放器Controller在Firefox上。我尝试调试几天，直到发现问题可以像这样简化:YourbrowserdoesnotsupportHTML5video.varvid=document.getElementById("myVideo");alert("Thevid");vid.addEventListen

  2. javascript - 简单而丑陋 - 如何改变 div 位置？ - 2

    如何改变下方元素的位置Content到“左:100px；上:100px；”我不需要复杂的功能，只需要一个简单的解决方案。感谢您的帮助:) 最佳答案 vardiv=document.getElementById('wrapper');div.style.left='100px';div.style.top='100px'; 关于javascript-简单而丑陋-如何改变div位置？，我们在StackOverflow上找到一个类似的问题： https://stac

  3. javascript - 具有自定义 eval 函数的 Node.js REPL 有趣行为 - 2

    似乎Node.js(版本v0.10.13)返回包裹在(和\n)之间的命令，这是一个最小的例子:require('repl').start({'eval':function(cmd,context,filename,callback){callback(null,cmd);}});行为如下:$noderepl.js>asd'(asd\n)'>这是为什么呢？如果这个特征是documented然后我找不到它。另外，如果这是预期的行为，是否有比cmd=cmd.slice(1,-2);更好的解决方案？ 最佳答案 该问题已得到解决(请参阅201

  4. javascript - 这很丑陋，必须有更好的方法在 jQuery 中编写它 - 2

    $(this).parent().parent().parent().parent().find('[name=reply_to_id]');这看起来很愚蠢，但这是我能想到的最好的写作方式。我尝试了parentsUntil('li')但根本不起作用，我还尝试了parents('li')和closest('li')。jQuery中有没有等同于:$(this).firstParentThatMatchesThis('li').find('[name=reply_to_id]');如果不是，我认为我会尝试将其提交给jQuery核心...这是我的HTML(很长所以我把它放在了pastebin上

  5. javascript - ReactJS + Flux - 如何实现 toasts/通知？ - 2

    我正在尝试了解Flux和Reactjs。考虑以下非常简单的场景:您的表单输入很少。当用户提交表单时，ActionCreator.publishAnnouncement(this.state.announcement);在我的表单组件中被调用。这是publishAnnouncement方法的样子:varpublishAnnouncement=function(announcement){AnnouncementAPI.publishAnnouncement(announcement,successCallback,failureCallback)};AnnouncementAPI只是AJ

  6. Javascript:为什么这会产生丑陋的字符串？？？我想要货币 - 2

    vartotal=0;$(".amount").each(function(){varvalue=$(this).val();value=(value.length我试图遍历一些文本框并总结它们的值。这会产生一个讨厌的字符串。我错过了什么？？如果我在第一个文本框中输入8，则总文本最终为“08.000.000.000.00”。我究竟做错了什么？我想格式化为货币，但如果不是，至少只有两位小数。有什么指点吗？ 最佳答案 .toFixed将对象从数字转换为字符串。保留完整的值，只在最后使用.toFixed进行转换$(".total").te

  7. javascript - Babel 的有趣导入 - 2

    因为我知道目前没有浏览器实现ES6模块接口(interface)——但转译器实现了——我用这个简单的例子测试了babelimport{getUsefulContents}from"file.js";getUsefulContents("http://www.example.com",data=>{doSomethingUseful(data);});我只是想看看它是如何转换这些行的。令我惊讶的是，它产生了以下输出:"usestrict";var_fileJs=require("file.js");(0,_fileJs.getUsefulContents)("http://www.exa

  8. javascript - 如何在 javascript 中实现决策树。寻找比我丑陋的更好的解决方案 - 2

    关闭。这个问题需要更多focused.它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题editingthispost.关闭4年前。Improvethisquestion我正在寻找一种更好的方法来在javascript中实现决策树。作为编程新手，我的工具箱中的工具数量非常有限。我知道的唯一方法是:.ifelseif语句非常难维护和遵循.我可以使用switch/case语句并执行状态机类型的操作。建议和理论表示赞赏。此外，小代码示例将非常有帮助。感谢您查看。戴尔

  9. c# - ASP.NET MVC 中的 Toast 通知 - 2

    我在我的MVC应用程序中使用Toastr通知插件来显示状态消息(成功编辑、更新、删除等)，我想知道是否有一种简单的方法可以将一些逻辑放在部分View中，并且将它放在我的布局上或需要时放在每个单独的View中。部分$(document).ready(function(){@if(ViewBag.Success==true){@:toastr.success("@ViewBag.Message");}elseif(ViewBag.Success==false){@:toastr.error("@ViewBag.Message");}});查看//Doesn'twork@Html.Parti

  10. javascript - 有趣的 Javascript RegExp 测试 - 2

    这个问题在这里已经有了答案:WhydoesaRegExpwithglobalflaggivewrongresults?(7个答案)关闭7年前。我写了一个JavascriptRegExp测试来检测日期字符串格式，我错误地添加了一个多余的“g”标志，发现了一些有趣的东西。vars="2009/03/10";varregex=/^\d{4}[/]\d{2}[/]\d{2}$/g;alert(regex.test(s));alert(regex.test(s));alert(regex.test(s));alert(regex.test(s));我得到一个“真”，然后是一个“假”，然后是另一个

随机推荐