第一百二十回 MaterialBanner Widget_materialbanner 和 snackbar-优快云博客

本文链接：https://blog.youkuaiyun.com/talk_8/article/details/132400566

本文介绍了Flutter中的MaterialBannerWidget，一种类似于通知的对话框组件，展示了其属性如content、actions和backgroundColor的用法，并给出了示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

概念介绍
使用方法
示例代码

我们在上一章回中介绍了如何通过蓝牙设备读写数据，本章回中将介绍 MaterialBanner Widget.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在本章回中将介绍一个新的Widget:MaterialBanner,该Widget位于Scaffold的AppBar和body之间，它以对话框窗口的形式显示，有点类似类似通知。它和页面底部的Snackbar相呼应，不过它不像SnackBar一样可以自动消失，只有主动关闭时它才会消失。本章回中将介绍它的使用方法。

使用方法

和其它组件一样MaterialBanner组件提供了相关的属性来控制自己，下面是常用的属性：

content属性:在容器最上方显示，用来控制组件的标题；
actions属性:用来控制组件的动作和相关功能，本质上是一组Widget；
leading属性：用来控制content属性前面的内容，通常用来显示图标；
backgroundColor属性:用来控制组件的背景颜色；
padding属性：用来控制组件的边距；

上面介绍的这些属性中，只有前两个是必选属性，其它属性都是可选的。我们重点说一下actions属性，官方建议使用TextButton给它赋值，添加两个TextButton后会在窗口右下角显示两个按钮，类似Dialog容器下面的两个button.我们可以通过按钮来关闭MaterialBanner组件，因为该组件不会自动消失。

示例代码

介绍完MaterialBanner组件相关的内容后，我们通过具体的代码来演示它的使用方法。

final BarKey = GlobalKey<ScaffoldMessengerState>();

MaterialBanner materialBanner() {
  return MaterialBanner(
    leading: Icon(Icons.notifications_active),
    content:Text('MaterialBanner'),
    actions:[
      TextButton(
        onPressed:(){ BarKey.currentState?.removeCurrentMaterialBanner();},
        child:Text('Yes'),),
      TextButton(onPressed:(){} , child: Text('No'),),
    ],
  );
}

上面的示例代码把MaterialBanner封装成了独立的方法，这样方便在程序中其它地方使用。代码中使用removeCurrentMaterialBanner()方法来关闭该组件，使用该方法时需要获取到GlobalKey,获取方法可以参考示例代码。这个组件在项目中不是经常使用，不过我还是建议大家动手去试试，看看这个组件究竟长什么样子。

看官们，关于"MaterialBanner"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!