显示弹窗的另外一种方法

我们在上一章回中介绍了"wechat系列picker使用总结"相关的内容，本章回中将介绍显示Snackbar的另外一种方法.闲话休提，让我们一起Talk Flutter吧。

1. 概念介绍

我们在第三十九回全面介绍了Snackbar的内容，主要包含它的概念和使用方法，在第二百一十四回介绍了它的使用细节，主要是外观相关的内容。跨越二百多回后我们将
在本章回中介绍显示Snackbar的另外一种方法。

2. 思路与方法

2.1 实现思路

通常情况下显示Snacbar时需要通过BuildContext获取ScaffoldMessenger,然后使用ScaffoldMessenger的showSnackBar()方法来显示Snackbar.我们在
本章回的思路是使用GlobalKey来获取ScaffoldMessenger,然后使用ScaffoldMessenger的showSnackBar()方法来显示Snackbar。对比一下就会发现只是
获取ScaffoldMessenger的方法不同，其本质上还是相同的。

2.2 实现方法

介绍完实现的思路后，我们按照此思路来显示Snackbar,下面是详细的实现步骤：

• 创建一个GlobalKey对象,主要用来获取ScaffoldMessenger；
• 创建ScaffoldMessenger组件，并且把上一步中的GlobalKey对象赋值给该组件key属性；
• 使用GlobalKey对象的showSnackBar()方法来显示Snackbar；
• 使用GlobalKey对象的removeCurrentSnackBar()方法来关闭Snackbar；
  上面的方法都是文本介绍，看官们可能感觉比较抽象，我们将在接下来的小节中通过具体的示例代码来演示。

3. 示例代码

  final snackBarKeyA = GlobalKey<ScaffoldMessengerState>();
  
  @override
  Widget build(BuildContext context) {
    return ScaffoldMessenger(
      key: snackBarKeyA,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.purpleAccent,
          title: const Text('Example of SnackBar'),
        ),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ElevatedButton(onPressed: () => snackBarKeyA.currentState?.showSnackBar(createSnackBar()),
                child: const Text("Show another SnackBar"),
            ),
            ElevatedButton(onPressed: () => snackBarKeyA.currentState?.removeCurrentSnackBar(),
              child: const Text("remover another SnackBar"),
            ),
          ],
        ),
      ),
    );
  }

  SnackBar createSnackBar() {
    return const SnackBar(
      content: Text("This is SnackBar"),
      backgroundColor: Colors.amberAccent,
      //修改形状，默认为矩形
      shape:CircleBorder(
        side: BorderSide(),
      ),
      //显示时间
      duration:Duration(seconds: 3),
    );
  }

在上面的示例代码完全按照实现方法中的步骤来实现，不过我们把显示和关闭Snackbar的动作赋值了按钮的onPressed属性，这样就可以在点击按钮时显示和关
闭Snackbar.我在这里就不演示程序的运行结果了，建议大家自己动手去实践。

4. 内容总结

结合前面章回中的内容，我们一共介绍了两种显示Snackbar的方法，我的经验是使用Globalkey这种方法更加灵活一些，它可以在主页面中的任意地方随时使用。与此
相比，使用BuildeContext的方法就麻烦一些。因为项目中的组件比较多时BuildContext也比较多，这时需要获取到主页面中的BuildContext才可以。
最后，我们对本章回的内容做一个全面的总结：

• 使用context可以获取ScaffoldMessenger对象;
• 使用Globalkey可以获取ScaffoldMessenger对象;
• 使用ScaffoldMessenger的showSnackBar()方法可以显示Snackbar;
• 使用ScaffoldMessenger的removeCurrentSnackBar()方法可以关闭Snackbar;
  看官们，与"显示Snackbar的另外一种方法"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!