Flutter-BottomSheet（底部滑动窗口）

BottomSheet（底部滑动窗口）

class BottomSheetDemo extends StatefulWidget {
  @override
  _BottomSheetDemoState createState() => _BottomSheetDemoState();
}

class _BottomSheetDemoState extends State<BottomSheetDemo> {
  final _bottomSheetScaffoldKey = GlobalKey<ScaffoldState>();

  _openBottomSheet(){
    _bottomSheetScaffoldKey
      .currentState
      .showBottomSheet((BuildContext context){
        return BottomAppBar(
          child: Container(
            height: 90,
            width: double.infinity,
            padding: EdgeInsets.all(16),
            child: Row(
              children: <Widget>[
                Icon(Icons.pause_circle_outline),
                SizedBox(width: 16,),
                Text('01:30 / 03:30'),
                Expanded(
                  child: Text('Fix you - Coldplay', textAlign: TextAlign.right,),
                )
              ],
            ),
          ),
        );
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _bottomSheetScaffoldKey,
      appBar: AppBar(
        title: Text('BottomSheetDemo'),
      ),
      body: Container(
        padding: EdgeInsets.all(16),
        child: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              FlatButton(
                child: Text('Open BottomSheet'),
                onPressed: _openBottomSheet,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

image.png

ModalBottomSheet（对话框式底部滑动窗口）

class BottomSheetDemo extends StatefulWidget {
  @override
  _BottomSheetDemoState createState() => _BottomSheetDemoState();
}

class _BottomSheetDemoState extends State<BottomSheetDemo> {

  _openModalBottomSheet(){
    showModalBottomSheet(
      context: context,
      builder: (BuildContext context){
        return Container(
          height: 200,
          child: Column(
            children: <Widget>[
              ListTile(
                title: Text('Option A'),
              ),
              ListTile(
                title: Text('Option B'),
              ),
              ListTile(
                title: Text('Option C'),
              ),
            ],
          ),
        );
      }
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BottomSheetDemo'),
      ),
      body: Container(
        padding: EdgeInsets.all(16),
        child: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              FlatButton(
                child: Text('Modal BottomSheet'),
                onPressed: _openModalBottomSheet,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

image.png

BottomSheet和ModalBottomSheet的区别

BottomSheet点击除滑动窗口外的空白部分并不会关闭窗口；而ModalBottomSheet则可以

class BottomSheetDemo extends StatefulWidget {
  @override
  _BottomSheetDemoState createState() => _BottomSheetDemoState();
}

class _BottomSheetDemoState extends State<BottomSheetDemo> {
  final _bottomSheetScaffoldKey = GlobalKey<ScaffoldState>();

  _openBottomSheet(){
    _bottomSheetScaffoldKey
      .currentState
      .showBottomSheet((BuildContext context){
        return BottomAppBar(
          child: Container(
            height: 90,
            width: double.infinity,
            padding: EdgeInsets.all(16),
            child: Row(
              children: <Widget>[
                Icon(Icons.pause_circle_outline),
                SizedBox(width: 16,),
                Text('01:30 / 03:30'),
                Expanded(
                  child: Text('Fix you - Coldplay', textAlign: TextAlign.right,),
                )
              ],
            ),
          ),
        );
      });
  }

  Future _openModalBottomSheet() async{
    final String option = await showModalBottomSheet(
      context: context,
      builder: (BuildContext context){
        return Container(
          height: 200,
          child: Column(
            children: <Widget>[
              ListTile(
                title: Text('Option A'),
                onTap: (){
                  Navigator.pop(context, 'A');
                },
              ),
              ListTile(
                title: Text('Option B'),
                onTap: (){
                  Navigator.pop(context, 'B');
                },
              ),
              ListTile(
                title: Text('Option C'),
                onTap: (){
                  Navigator.pop(context, 'C');
                },
              ),
            ],
          ),
        );
      }
    );

    debugPrint(option);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _bottomSheetScaffoldKey,
      appBar: AppBar(
        title: Text('BottomSheetDemo'),
      ),
      body: Container(
        padding: EdgeInsets.all(16),
        child: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              FlatButton(
                child: Text('Open BottomSheet'),
                onPressed: _openBottomSheet,
              ),
              FlatButton(
                child: Text('Modal BottomSheet'),
                onPressed: _openModalBottomSheet,
              ),
            ],
          ),
        ),
      ),
    );
  }
}