其他分享
首页 > 其他分享> > 持久性BottomSheet和模态BottomSheet

持久性BottomSheet和模态BottomSheet

作者:互联网

BottomSheet一般不会直接创建,通常是通过ScaffoldState.showBottomSheet方法来创建持久性BottomSheet,通过showModalBottomSheet方法来创建模态BottomSheet。

// 创建持久性BottomSheet
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context) {
  return Scaffold(
    key: _scaffoldKey, //设置key值以便获取ScaffoldState
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: _buildBottomSheet(context)
  );
}
 
Widget _buildBottomSheet(BuildContext context) {
  return Container(
    child: RaisedButton(
        child: Text("BottomSheet"),
        onPressed: () {
          print("弹出BottomSheet");
          //通过获取当前ScaffoldState来展示BottomSheet
          _scaffoldKey.currentState.showBottomSheet<void>((context){
            return Container(
                decoration: BoxDecoration(
                    border: Border(top: BorderSide(color: Colors.grey))
                ),
                child: Padding(
                    padding: const EdgeInsets.all(20),
                    child: Text('This is a Material persistent bottom sheet. Drag downwards to dismiss it.',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            color: Colors.blueAccent,
                            fontSize: 22
                        )
                    )
                )
            );
          });
        }
    ),
  );
}
 
//创建模态BottomSheet
Widget _buildModalBottomSheet(BuildContext context) {
  return Container(
      child: RaisedButton(
          child: Text("ModalBottomSheet"),
          onPressed: () {
            print("ModalBottomSheet");
            //直接使用showModalBottomSheet方法创建模态BottomSheet
            showModalBottomSheet(
              context: context,
              builder: (context) {
                return Container(
                    decoration: BoxDecoration(
                        border: Border(top: BorderSide(color: Colors.grey))
                    ),
                    child: Padding(
                        padding: const EdgeInsets.all(20),
                        child: Text('This is a Material modal bottom sheet. Drag downwards to dismiss it.',
                            textAlign: TextAlign.center,
                            style: TextStyle(
                                color: Colors.blueAccent,
                                fontSize: 22
                            )
                        )
                    )
                );
              },
            );
          }
      )
  );
}

 

标签:模态,return,持久性,Text,context,child,BottomSheet,Container
来源: https://www.cnblogs.com/timba1322/p/12487018.html