Flutter（27）：Material组件之SnackBar

Flutter教学目录持续更新中

Github源代码持续更新中

1.SnackBar介绍

具有可选操作的轻量级消息提示，在屏幕的底部显示。

2.SnackBar属性

• content：内容
• backgroundColor：背景色
• elevation：阴影
• shape：形状
• behavior：位置
• action：SnackBarAction
• duration：显示时长
• onVisible：显示回调

3.SnackBar

• 调用方法： Scaffold.of(context).showSnackBar()

• 取消方法：Scaffold.of(context).removeCurrentSnackBar()
  需要注意的是这里的context跟BottomSheet一样需要基于Scaffold下的context

  
  
  1601480720(1).png

class _SnackBarPageState extends State {
  _showSnackBar(BuildContext context) {
    Scaffold.of(context).showSnackBar(
      SnackBar(
        content: Text('showSnackBar'),
        backgroundColor: Colors.black54,
        elevation: 10,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10),
        ),
        behavior: SnackBarBehavior.floating,
        action: SnackBarAction(
          label: '知道了',
          onPressed: () {
            Scaffold.of(context).removeCurrentSnackBar();
          },
        ),
        duration: Duration(seconds: 5),
        onVisible: () {
          print('onVisible');
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SnackBar'),
      ),
      body: Builder(builder: (context) {
        return RaisedButton(
          onPressed: () {
            _showSnackBar(context);
          },
          child: Text('showSnackBar'),
        );
      }),
    );
  }
}

下一节：Material组件之Tooltip

Flutter（28）：Material组件之Tooltip

Flutter教学目录持续更新中

Github源代码持续更新中