文章目录

概念介绍
显示方法
- 使用showBottomSheet()方法
- 使用showModalBottomSheet()方法
示例代码

我们在上一章回中介绍了 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()方法@overrideWidget 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);@overrideWidget 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"),
),