关于3D图形库


我们在上一章回中介绍了"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>();
  
  
  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的另外一种方法"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!
  • 24
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

talk_8

真诚赞赏,手有余香

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值