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 | 是否可以拖動，默認為 true |
| onDragStart | 開始拖拽回調，沒有找到具體使用場景，后續(xù)更新 |
| onDragEnd | 結束拖拽回調，沒有找到具體使用場景，后續(xù)更新 |
| backgroundColor | 背景色 |
| elevation | 陰影高度 |
| shape | 形狀 BorderShape |
| clipBehavior | 剪切方式 |
| constraints | BoxConstraints 約束 |
| onClosing | 關閉回調函數(shù) |
| builder | 構建函數(shù) |
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"),
);
},
),
);
}
}
image.png
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"),
);
},
);
},
),
);
}
}
80.gif
示例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("取消"),
),
],
),
);
},
);
},
),
);
}
}
82.gif
收起上拉框
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"),
);
},
);
}
}
81.gif
收起上拉框
Navigator.pop(context);
