1. BottomSheet
BottomSheet 作为组件直接使用的时间比力少，好比共同 Scaffold 的子属性使用，可以明白为展示在屏幕下方的一个组件。
BottomSheet 界说
const BottomSheet({ Key? key, this.animationController, this.enableDrag = true, this.onDragStart, this.onDragEnd, this.backgroundColor, this.elevation, this.shape, this.clipBehavior, this.constraints, required this.onClosing, required this.builder, })1.1 属性先容
BottomSheet 属性先容animationController动画控制器enableDrag是否可以拖动，默以为 trueonDragStart开始拖拽回调，没有找到详细使用场景，后续更新onDragEnd竣事拖拽回调，没有找到详细使用场景，后续更新backgroundColor配景致elevation阴影高度shape外形 BorderShapeclipBehavior剪切方式constraintsBoxConstraints 束缚onClosing关闭回调函数builder构建函数1.2 示例
class MSBottomSheetDemo1 extends StatelessWidget { const MSBottomSheetDemo1({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("bottomSheet")), body: Center( child: Text("BottomSheetDemo"), ), bottomSheet: BottomSheet( enableDrag: false, //是否可以拖动，默以为 true onClosing: () {}, builder: (ctx) { return Container( color: Colors.cyan, height: 200, alignment: Alignment.center, child: Text("bottomSheet in Scaffold"), ); }, ), ); }}2. showModalBottomSheet
showModalBottomSheet 是一个直接调起 BottomSheet 的 api，使用频率较高。
class MSBottomSheetDemo2 extends StatelessWidget { const MSBottomSheetDemo2({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("BottomSheetDemo")), body: Center( child: Text("Demo"), ), floatingActionButton: FloatingActionButton( child: Icon(Icons.pets), onPressed: () { showModalBottomSheet( context: context, builder: (ctx) { return Container( height: 100, child: Text("Bottom Sheet"), ); }, ); }, ), ); }}示例2
class MSBottomSheetDemo4 extends StatelessWidget { const MSBottomSheetDemo4({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("BottomSheetDemo")), body: Center( child: Text("Demo"), ), floatingActionButton: FloatingActionButton( child: Icon(Icons.pets), onPressed: () { showModalBottomSheet( context: context, builder: (ctx) { return Container( height: 100, child: Column( children: [ TextButton( onPressed: () { Navigator.of(context).pop(); }, child: Text("生存"), ), TextButton( onPressed: () { Navigator.of(context).pop(); }, child: Text("取消"), ), ], ), ); }, ); }, ), ); }}收起上拉框
Navigator.pop(context);3. showBottomSheet
showBottomSheet 对新手大概不太友好，它的现实调用是 Scaffold.of(context).showBottomSheet，.of(context) 方法在当前同一层级是拿不到 Scaffold Widget 的，以是会报错。必要在封装一层 class 进利用用 大概 使用Builder
class MSBottomSheetDemo3 extends StatelessWidget { MSBottomSheetDemo3({Key? key}) : super(key: key); var _isShow = false; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("BottomSheetDemo")), body: Center( child: Text("Hello World"), ), floatingActionButton: _buildFloatingActionButton(), ); } Widget _buildFloatingActionButton() { return Builder( builder: (context) { return FloatingActionButton( child: Icon( Icons.pets, ), onPressed: () { _floatingActionButtonEvent(context); _isShow = !_isShow; }, ); }, ); } _floatingActionButtonEvent(BuildContext context) { if (_isShow) { Navigator.of(context).pop(); } else { _showSheet(context); } } void _showSheet(BuildContext context) { showBottomSheet( context: context, builder: (ctx) { return Container( width: double.infinity, height: 200, color: Colors.cyan, alignment: Alignment.center, child: Text("BottomSheet"), ); }, ); }}
收起上拉框
Navigator.pop(context);https://www.jianshu.com/p/72a999bfc09f |
