第三十六回：BottomeSheet Widget

我们在上一章回中介绍了AlertDialog Widget相关的内容,本章回中将介绍 BottomSheet Widget.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在这里说的BottomSheet是一种弹出式窗口，和上一章回中介绍的AlertDialog类似，但是也有不同点:

• AlterDialog会在屏幕中间位置弹出窗口；
• BottemSheet会在屏幕底部弹出一个窗口，而且可以调整窗口的大小。

BotttomSheet主要用来显示当前页面的子内容或者与当前页面相关的操作，比如设置，筛选等，本章回中将详细介绍它的使用方法。

使用方法

和其它的Widget一样，BottomSheet提供了相关的属性来控制自己，接下来我们将介绍一些常用的属性：

• backgroundColor属性：主要用来控制窗口的背景颜色；
• shape属性：主要用来的控制窗口的形状
• onClosing属性：主要用来设置窗口关闭时的动作，该属性是必选参数，注意：它的类型是方法；
• builder属性：主要用来传递上下文参数以及创建窗口中的内容，该属性是必选参数；

示例代码

_bottomSheet(BuildContext context) {
  return BottomSheet(
      backgroundColor: Colors.purpleAccent,
      shape: CircleBorder(
        side: BorderSide(),
      ),
      onClosing: () {
        print("close sheet");
      },
      builder: (context) {
        return Container(
          alignment: Alignment.center,
          color: Colors.green,
          width: double.infinity,
          height: 200,
          child: Text("This is a BottomSheet"),
        );
      });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

我们在上面的代码中把BottomSheet组件封装到一个方法中，这样方便使用，而且有利于管理代码，还有一点需要注意：BottomSheet组件不能单独使用，它需要配合Scaffold组件中的bottomSheet属性一起使用才有效果，下面是示例代码，请大家参考：

return Scaffold(
  appBar: AppBar(
    backgroundColor: Colors.purpleAccent,
    title: const Text("Example of All kinds of dialog"),
  ),
  //在这里设置bottomSheet会一直显示
  // bottomSheet: _bottomSheet(context),
  body: Column(
    children: [
    //省略不写
    ],
  ),
);
1
2
3
4
5
6
7
8
9
10
11
12
13

我们在这里只列出了核心代码，完整的代码可以查看Github上ex019文件中的内容。编译并且运行上面的代码可以在屏幕底部看到一个绿色的弹出窗口，该窗口中只包含一个文本组件，它显示的内容和代码中的一致。我在这里就不演示程序的运行结果了，建议大家自己动手去实践。

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