zoukankan      html  css  js  c++  java
  • 持久性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
                                )
                            )
                        )
                    );
                  },
                );
              }
          )
      );
    }
  • 相关阅读:
    VUE ElementUI Tree JAVA Mybatis实现 麦克斯
    VUE 创建工程 项目 麦克斯
    Go——关于Time包
    etcd——是什么做什么如何用
    php——composer安装与使用
    TinyXml——Linux下TinyXml的编译
    Mac下eclipse安装 lombok 插件
    gitlab——搭建私有gitlab服务
    apachehttpd——Linux/Mac源码安装apachehttpd
    mongo——通过docker查看mongo集群的状态和数据
  • 原文地址:https://www.cnblogs.com/timba1322/p/12487018.html
Copyright © 2011-2022 走看看