Flutter（五十三）BottomSheet

底部弹出框

• 需要使用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,
})

示例

image.png image.png image.png image.png

代码

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),),
              ),
            ],
          ),
        );
      }),
    );
  }
}

欢迎添加我的微信号：zrf540592766

欢迎关注我的公众号：Flutter和Dart开发实践

让我们共同学习，每天进步一点点，It is never too late to learn!

image.png