如何显示页面底部弹窗

文章目录

• 1. 概念介绍
• 2. 使用方法
• • 2.1 固定样式
  • 2.2 自定义样式
• 3. 示例代码
• 4. 内容总结

1. 概念介绍

我们在介绍Get包时提到该提供了一些实用功能，显示SnackBar就是其中之一，本章回中将详细介绍如何显示SnackBar.

2. 使用方法

在项目中SnackBar是常用的组件，Get包提供了两种显示SnackBar的方法：一种使用固定的样式，简单易用，另外一种使用自定义样式，可以自行扩展。我们将在接下
来的小节中介绍这两种方法。

2.1 固定样式

包中提供了snackbar()方法来显示SnackBar,我们只需要给该方法传递title和message两个参数就可以。该方法是静态方法，直接使用Get.snckbar()就可以在
页面顶部显示一个透明的SnackBar.如果想修改SnackBar的位置，颜色等主题风格，可以使用方法中的其它参数，详细如下：

• snackPosition：用来控制snackBar在页面中的位置；
• borderRadius：用来控制snackBar窗口的圆角大小；
• borderColor：用来控制snackBar窗口边框的线条颜色；
• backgroundColor：用来控制snackBar窗口的背景颜色；
• borderWidth：用来控制snackBar窗口边框的线条粗细；
• instantInit：用来控制是否使用默认的snackBar；
  上面介绍的这些参数比较好用，从名字就能看出来它们的用法与功能，snackbar()方法还提供了其它的参数，大家可以参考该方法的文档或者源代码。需要注意的是在
  使用这些参数时需要把instantInit参数的值设置为false，这样才可以使用这些参数，否则它会使用默认的SnackBar。在大部分情况下，只需要给该方法传递title
  和message两个参数使用默认的样式就可以，因此我们称这种使用SnackBar的方法为"固定样式"。

2.2 自定义样式

包中提供了showSnackbar()方法，我们需要给该方法传递一个GetSnackBar类型的对象，该方法是静态方法，直接使用Get.showSnackbar()就可以在页面底部
显示一个SnackBar.其实这个showSnackbar方法在Material方法中也有同名的方法，它们用法相同，最大的区别就是Get包中使用该方法时不需要传递BuildContext
类型的对象，因此使用该方法十分的方便。我们再回头介绍一下GetSnackBar组件，它和官方提供的SnackBar组件用法相似，也是通过属性来控制组件，不过它添加一
些其它的功能，比如显示进度条等。下面是该组件中常用的属性：

• title属性：用来控制SnackBar中的标题；
• message属性：用来控制SnackBar中显示的内容；
• duration属性：用来控制SnackBar显示的时间；
• backgroundColor属性：用来控制SnackBar的背景颜色；
• margin属性：用来控制SnackBar与屏幕的边距;
• borderRadius属性：用来控制SnackBar的形状，主要是控制圆角；
• showProgressIndicator属性：用来控制SnackBar顶部是否显示水平滚动条；
• snackPosition属性：用来控制SnackBar在页面中的位置；
• snackStyle属性：用来控制SnackBar的属性，通常设置为SnackStyle.FLOATING；
  上面介绍的这些参数比较好用，从名字就能看出来它们的用法与功能，GetSnackBar组件还提供了其它的参数，大家可以参考该方法的文档或者源代码。在使用这种方法
  显示SnackBar时，我们创建了自定义的GetSnackBar组件，因此我们称这种使用SnackBar的方法为"自定义样式"。

3. 示例代码

ElevatedButton(
  onPressed: () {
    ///这个snb默认透明色而且是在顶部显示
    Get.snackbar("title", "Message");
  },
  child: const Text("show SnackBar"),
),
ElevatedButton(
  onPressed: () {
    Get.showSnackbar(
        const GetSnackBar(
          title: "Title",
          message: "Message",
          ///需要加显示时间，默认一直显示
          duration: Duration(seconds: 2),
          backgroundColor: Colors.blue,
          ///控制snb与屏幕的边距
          margin:EdgeInsets.only(bottom: 80,left: 16,right: 16),
          ///不能像原生的snb一样控制形状，但是可以控制圆角，默认是矩形
          borderRadius: 16,
          ///会在snb顶部显示水平滚动条
          showProgressIndicator: true,
          ///这两个属性决定了snackBar的默认在底部显示
          // this.snackPosition = SnackPosition.BOTTOM,
          // this.snackStyle = SnackStyle.FLOATING,
        )
    );
  },
  child: const Text("show custom SNB"),
),

上面的示例代码演示了两种显示SnackBar的方法，我们在代码中添加了详细的注释，方便大家理解。此外，示例代码中把显示SnackBar的操作封装到了按钮的中，运行
程序时只需要点击按钮就可以显示SnackBar.我们在这里就不演示程序的运行结果了，建议大家自己动手去创建属性自己风格的SnackBar.

4. 内容总结

最后，我们对本章回的内容做一个全面的总结：

• 包中提供了两种显示SnackBar的方法，直接调用不同的方法就可以；
• 使用snackbar()方法时显示的是默认样式的SnackBar；
• 使用showSnackbar()方法时可以自定义各种样式的SnackBar;
• 不管使用哪种方法显示SnackBar,都不需要使用BuildContext,这是本包最大的特点；
  看官们，与"使用get显示SnackBar"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!