SnackBar

SnackBar

带有可选操作的轻量级消息，可以在Snackbar中添加一个按钮，处理用户点击事件。

Snackbar会在超时或者用户在屏幕其他地方触摸之后自动消失，在屏幕底部显示。

屏幕上同时最多只能显示一个Snackbar，在屏幕上有一个Snackbar的情况下再显示一个Snackbar，则先将当前显示的Snackbar隐藏后再显示新的Snackbar。

SnackBar一般不单独使用，ScaffoldMessenger.of(context).showSnackBar进行弹出展示。

• 构造函数

const SnackBar({
    super.key,
    required this.content,// 提示信息
    this.backgroundColor,// 背景色
    this.elevation,//阴影
    this.margin,//外边距
    this.padding,//内边距
    this.width,//宽
    this.shape,//形状
    this.behavior,
    this.action,// SnackBar 尾部的按钮，用于一些回退操作等
    this.duration = _snackBarDisplayDuration,// 停留的时长，默认 4000ms
    this.animation,// 进出动画
    this.onVisible,//在显示的时候调用
    this.dismissDirection = DismissDirection.down,
    this.clipBehavior = Clip.hardEdge,
  }) 

• 常用例子

 ElevatedButton(
  onPressed: (){
    ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          duration: const Duration(seconds: 5),//设置显示时间
          content: const Text('一起学习flutter',style: TextStyle(color: Colors.white),),
          elevation: 6,
          backgroundColor: Colors.blueGrey,
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
      )
    );
  },
  child: const Text('弹出消息')
)

效果：

• content属是其他组件

 ElevatedButton(
    onPressed: (){
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Row(
            children: const [
              Icon(Icons.upcoming,color: Colors.blue,),
              Text('正在下载')
            ],
          ),
        )
      );
    },
    child: const Text('弹出消息2')
),

• SnackBar的弹出形式,默认是fixed,另一种是floating,悬浮在底部

ElevatedButton(
    onPressed: (){
      ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: Row(
              children: const [
                Icon(Icons.upcoming,color: Colors.blue,),
                Text('正在下载')
              ],
            ),
            behavior: SnackBarBehavior.floating,
          )
      );
    },
    child: const Text('弹出消息3')
),

效果：

• action属性，户点击事件

ElevatedButton(
    onPressed: (){
      ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            action: SnackBarAction(
              label: '确定',
              onPressed: (){
                print('11111');
              },
            ),
            content: const Text('处理用户点击事件'),
            behavior: SnackBarBehavior.floating,
          )
      );
    },
    child: const Text('弹出消息4')
 ),

• 时间内多次调用SnackBar

ElevatedButton(
    onPressed: (){
      List.generate(8, (index) => ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            action: SnackBarAction(
              label: '确定',
              onPressed: (){
                print('11111');
              },
            ),
            content:  Text('消息：$index'),
          )
      ));
    },
    child: const Text('点击依次弹出SnackBar')
),

完整代码：

import 'package:flutter/material.dart';
class SnackBarPage extends StatefulWidget {
  const SnackBarPage({Key? key}) : super(key: key);
  @override
  State<SnackBarPage> createState() => _SnackBarPageState();
}
class _SnackBarPageState extends State<SnackBarPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('SnackBar'),),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: (){
                ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(
                      duration: const Duration(seconds: 5),//设置显示时间
                      content: const Text('一起学习flutter',style: TextStyle(color: Colors.white),),
                      elevation: 6,
                      backgroundColor: Colors.blueGrey,
                      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
                  )
                );
              },
              child: const Text('弹出消息')
            ),
            const SizedBox(height: 30,),
            ElevatedButton(
                onPressed: (){
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(
                      content: Row(
                        children: const [
                          Icon(Icons.upcoming,color: Colors.blue,),
                          Text('正在下载')
                        ],
                      ),
                    )
                  );
                },
                child: const Text('弹出消息2')
            ),
            const SizedBox(height: 30,),
            ElevatedButton(
                onPressed: (){
                  ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(
                        content: Row(
                          children: const [
                            Icon(Icons.upcoming,color: Colors.blue,),
                            Text('正在下载')
                          ],
                        ),
                        behavior: SnackBarBehavior.floating,
                      )
                  );
                },
                child: const Text('弹出消息3')
            ),
            const SizedBox(height: 30,),
            ElevatedButton(
                onPressed: (){
                  ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(
                        action: SnackBarAction(
                          label: '确定',
                          onPressed: (){
                            print('11111');
                          },
                        ),
                        content: const Text('处理用户点击事件'),
                        behavior: SnackBarBehavior.floating,
                      )
                  );
                },
                child: const Text('弹出消息4')
            ),
            const SizedBox(height: 30,),
            ElevatedButton(
                onPressed: (){
                  List.generate(8, (index) => ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(
                        action: SnackBarAction(
                          label: '确定',
                          onPressed: (){
                            print('11111');
                          },
                        ),
                        content:  Text('消息：$index'),
                      )
                  ));
                },
                child: const Text('点击依次弹出SnackBar')
            ),
          ],
        ),
      )
    );
  }
}