第三十七回：如何正确地显示BottomeSheet

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

概念介绍

我们在上一章回中介绍了BottomSheet的基本用法，该用法是一种被动式的用法，因为它和Scaffold组件的bottomSheet属性绑定在了一起，当程序中显示Scaffold所在的页面时BottomSheet会自动显示在当前页面底部，而且无法关闭。本章回中将介绍主动式用法：通过点击按钮来打开或者关闭BottomSheet窗口。

显示方法

使用showBottomSheet()方法

该方法只有一个WidgetBuilder类型的参数，该类型是一个方法类型，我们需要实现该方法并且在方法中返回一个组件。使用这种方法可以动态地在页面底部弹出和关闭BottomSheet窗口。详细的用法看示例代码就可以。

注意：这种方法必须嵌套在一个组件中，不然会报运行时错误，而且无法显示BottomSheet窗口。

使用showModalBottomSheet()方法

该方法包含两个必选参数和多个可选参数，我们重点关注必选参数：

• required BuildContext context
• required WidgetBuilder builder

该方法可以直接使用，不需要嵌套组件。此外，该方法生成的BottomSheet类似IOS中的modelView，点击窗口区域外的任意位置就可以关闭窗口。

示例代码

  //用来演示ShowBottomSheet,使用showBottomSheet()方法
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Example of BottomSheet"),
      ),
      body: const ExBottomSheet(),
    );
  }
}

//必须创建一个widget并且将它赋值给Scaffold的body属性才可以,该示例来源于官方文档
//参考：https://api.flutter.dev/flutter/material/ScaffoldState/showBottomSheet.html
class ExBottomSheet extends StatelessWidget {
  const ExBottomSheet({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        child: const Text('showBottomSheet'),
        onPressed: () {
          Scaffold.of(context).showBottomSheet<void>(
            (BuildContext context) {
              return Container(
                height: 200,
                color: Colors.amber,
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      const Text('This is BottomSheet'),
                      //关闭BottomSheet窗口
                      ElevatedButton(
                        child: const Text('Close BottomSheet'),
                        onPressed: () {
                          Navigator.pop(context);
                        },
                      ),
                    ],
                  ),
                ),
              );
            },
          );
        },
      ),
    );
}

//使用showModalBottomSheet()方法
_showModalBottomSheet(context) {
  showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return Container(
          width: 300,
          height: 100,
          color: Colors.green,
          child: const Text("This is BottomSheet"),
        );
      });
}

//通过按钮来弹出窗口
ElevatedButton(
  onPressed: () => _showModalBottomSheet(context),
  child: const Text("Show Modal BottomSheet"),
),

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

看官们，关于"如何正确地显示BottomeSheet Widget"就介绍到这里，欢迎大家在评论区交流与讨论!