底部彈出框
- 需要使用Builder包裹
- 分為showBottomSheet()和showModalBottomSheet()兩個方法，前者區域性覆蓋，後者全覆蓋
showBottomSheet()
PersistentBottomSheetController<T> showBottomSheet<T>({
@required BuildContext context,// Builder的context
@required WidgetBuilder builder, // 構建widget
Color backgroundColor,// 背景色
double elevation,// 陰影
ShapeBorder shape,// 形狀
})
複製程式碼showModalBottomSheet()
Future<T> showModalBottomSheet<T>({
@required BuildContext context,
@required WidgetBuilder builder,
Color backgroundColor,
double elevation,
ShapeBorder shape,
bool isScrollControlled = false,
})
複製程式碼示例
#####程式碼
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("BottomSheet"),
),
body: Builder(builder: (BuildContext context){
return Container(
color: Colors.green[100],
padding: EdgeInsets.only(top: 30),
child: Column(
children: <Widget>[
RaisedButton(
onPressed: (){
showBottomSheet(
backgroundColor: Colors.black12,
context: context,
// elevation: 13,
builder: (BuildContext context) {
return new Container(
height: 150,
child: new Padding(
padding: const EdgeInsets.all(10.0),
child: new Column(
children: <Widget>[
new ListTile(
leading: new Icon(Icons.add_alarm),
title: new Text("add_alarm"),
onTap: (){
Navigator.of(context).pop();
},
),
new ListTile(
leading: new Icon(Icons.devices),
title: new Text("devices"),
),
],
))
);
});
},
child: Text("showBottomSheet",style: TextStyle(fontSize: 29),),
),
RaisedButton(
onPressed: (){
showBottomSheet(
backgroundColor: Colors.black12,
context: context,
// elevation: 13,
builder: (BuildContext context) {
return new Container(
height: 50,
child: new Padding(
padding: const EdgeInsets.all(10.0),
child: new Row(
children: <Widget>[
Text("add_alarm"),
Padding(padding: EdgeInsets.symmetric(horizontal: 20),child: Icon(Icons.android),),
Text("add_alarm"),
],
))
);
});
},
child: Text("showBottomSheet2",style: TextStyle(fontSize: 29),),
),
RaisedButton(
onPressed: (){
showModalBottomSheet(
backgroundColor: Colors.white,
context: context,
// elevation: 13,
builder: (BuildContext context) {
return new Container(
height: 150,
child: new Padding(
padding: const EdgeInsets.all(10.0),
child: new Column(
children: <Widget>[
new ListTile(
leading: new Icon(Icons.add_alarm),
title: new Text("add_alarm"),
onTap: (){
Navigator.of(context).pop();
},
),
new ListTile(
leading: new Icon(Icons.devices),
title: new Text("devices"),
),
],
))
);
});
},
child: Text("showModalBottomSheet1",style: TextStyle(fontSize: 29),),
),
RaisedButton(
onPressed: (){
showModalBottomSheet(
backgroundColor: Colors.white,
context: context,
// elevation: 13,
builder: (BuildContext context) {
return new Container(
height: 50,
child: new Padding(
padding: const EdgeInsets.all(10.0),
child: new Row(
children: <Widget>[
Text("add_alarm"),
Padding(padding: EdgeInsets.symmetric(horizontal: 20),child: Icon(Icons.android),),
Text("add_alarm"),
],
))
);
});
},
child: Text("showModalBottomSheet2",style: TextStyle(fontSize: 29),),
),
],
),
);
}),
);
}
}
複製程式碼