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
                                )
                            )
                        )
                    );
                  },
                );
              }
          )
      );
    }
  • 相关阅读:
    web前端之Javascript的输出
    python编码问题
    python面试题1
    机器学习三剑客补充
    JavaScript设计模式与开发实践 组合模式
    JavaScript设计模式与开发实践 命令模式
    JavaScript设计模式与开发实践 发布—订阅模式
    JavaScript设计模式与开发实践 迭代器模式
    JavaScript设计模式与开发实践 代理模式
    JavaScript设计模式与开发实践 策略模式
  • 原文地址:https://www.cnblogs.com/timba1322/p/12487018.html
Copyright © 2011-2022 走看看