Flutter Widgets 之 SnackBar

注意：无特殊说明，Flutter版本及Dart版本以下：

• Flutter版本： 1.12.13+hotfix.5
• Dart版本： 2.7.0

基础用法

应用程序有时候须要弹出消息提示用户，好比‘网络链接失败’、‘下载成功’等提示，就像Android 等Toast，在Flutter中使用SnackBar组件，用法以下：

Scaffold.of(context).showSnackBar(SnackBar(
      content: Text('老孟，一枚有态度的程序员'),
    ));
复制代码

注意并非在build方法中直接使用SnackBar组件，而是调用Scaffold.of(context).showSnackBar方法，消息会在底部弹出并显示一段时间，默认显示4秒，而后弹出，咱们能够设置其显示的时间：

Scaffold.of(context).showSnackBar(SnackBar(
      duration: Duration(seconds: 1),
    ));
复制代码

显示的时间为1秒，content属性不必定是文字，也能够是其余组件，好比显示一个图标和文字：

Scaffold.of(context).showSnackBar(SnackBar(
      content: Row(
        children: <Widget>[
          Icon(Icons.check,color: Colors.green,),
          Text('下载成功')],
      ),
      duration: Duration(seconds: 1),
    ));
复制代码

效果以下：

经过shape属性设置其形状：

Scaffold.of(context).showSnackBar(SnackBar(
      content: Row(
        children: <Widget>[
          Icon(Icons.check,color: Colors.green,),
          Text('下载成功')],
      ),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(50))
      ),
      duration: Duration(seconds: 1),
    ));
复制代码

效果以下：

SnackBar的有2种弹出形式，默认是fixed，直接在底部弹出，另外一种是floating,悬浮在底部，用法以下：

Scaffold.of(context).showSnackBar(SnackBar(
      content: Row(
        children: <Widget>[
          Icon(Icons.check,color: Colors.green,),
          Text('下载成功')],
      ),
      behavior: SnackBarBehavior.floating,
    ));
复制代码

floating效果：

咱们还能够对SnackBar增长行为组件，好比增长一个“知道了”按钮，点击“知道了”，消息立刻隐藏，用法以下：

Scaffold.of(context).showSnackBar(SnackBar(
      content: Row(
        children: <Widget>[
          Icon(Icons.check,color: Colors.green,),
          Text('下载成功')],
      ),
      action: SnackBarAction(
        label: '知道了',
        onPressed: (){},
      ),
    ));
复制代码

效果：

瞬间多个弹出延迟问题

当短期内屡次调用SnackBar方法时，SnackBar消息将会以队列的形式一个一个的弹出，好比下面的代码：

RaisedButton(
          child: Text(
            '点我，弹出SnackBar',
          ),
          onPressed: () {

            List.generate(10, (index){
              Scaffold.of(context).showSnackBar(SnackBar(
                content: Text('我是消息：$index'),
              ));
            });
          },
        )
复制代码

默认状况下每一个显示4秒，若是有10个，那么40秒内会一直弹消息，体验明显不友好，咱们但愿的效果是若是有新的消息时，旧的都消息马上消失，显示新的消息,只需在弹出新的SnackBar时移除如今的SnackBar，

Scaffold.of(context).removeCurrentSnackBar();
Scaffold.of(context).showSnackBar(...);
复制代码

更多相关阅读：

• Flutter系列文章总览
• Flutter Widgets 之 Expanded和Flexible
• Flutter Widgets 之 AnimatedList
• Flutter Widgets 之 SliverAppBar

若是这篇文章有帮助到您，但愿您来个“赞”并关注个人公众号，很是谢谢。