Flutter - SnackBar

Flutter 之 SnackBar

SnackBar 是用户操作后，显示提示信息的控件，默认显示在屏幕底部，默认显示4s后自动隐藏。

SnackBar是通过Scaffold的showSnackBar方法来显示，所以想要显示SnackBar必须要先拿到Scaffold。

SnackBar 参数详细说明参见官方文档；

主要介绍一下，以下2个参数：

• duration 属性可以设置提示条显示的时间；
• behavior 属性可以设置提示条的样式，我设置的是悬浮样式；

先上完整代码

import 'package:flutter/material.dart';

class MyTest extends StatefulWidget {

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyTest> {
  @override
  Widget build(BuildContext context) {
    _displaySnackBar(BuildContext context, data) {
      Scaffold.of(context).removeCurrentSnackBar();
      var text = data;
      Scaffold.of(context).showSnackBar(SnackBar(
          content: Text(text),
          duration: Duration(seconds: 4), 
          behavior: SnackBarBehavior.floating,
      ));
    }

    return Scaffold(
      appBar: AppBar(
        title: Text('SnackBar Demo'),
      ),
      body: Builder(
        builder: (BuildContext context) {
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                RaisedButton(
                  child: Text('btn1'),
                  onPressed: () {
                    _displaySnackBar(context, 'btn1');
                  },
                ),
                RaisedButton(
                  child: Text('btn2'),
                  onPressed: () {
                    _displaySnackBar(context, 'btn2');
                  },
                ),
                RaisedButton(
                  child: Text('btn3'),
                  onPressed: () {
                    _displaySnackBar(context, 'btn3');
                  },
                ),
              ]
            )
          );
        }
      )
    );
  }
}

需要注意的问题：

• 当BuildContext在Scaffold之前时，调用Scaffold.of(context)会报错。我是通过Builder Widget来解决，当然还有其他的办法。

• 当我们在调用SnackBar时，会发现如果上一次调用没有完成，再次调用SnackBar时，需要等待上次调用完成后，才能进行本次调用，以下办法可以解决此问题, 先remove当前的snackbar，再show。

Scaffold.of(context).removeCurrentSnackBar();

以上只是本人在工作中遇到的关于SnackBar的一些知识点，欢迎指教！