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
                                )
                            )
                        )
                    );
                  },
                );
              }
          )
      );
    }
  • 相关阅读:
    YUI+Ant 实现JS CSS压缩
    13.QT-QMainWindow组件使用
    12.QT4.7.4-解决WIN平台和Linux平台中文乱码,QLineEdit右击菜单中文显示
    11.QT-布局管理器(Box,Grid,Form,Stacked)
    10.QT-定时器
    9.QT-标准对话框
    8.QT-对话框(模态与非模态)
    7.QT-Qt对象间的父子关系
    6.QT-简易计算器实现(详解)
    5.QT-QString类
  • 原文地址:https://www.cnblogs.com/timba1322/p/12487018.html
Copyright © 2011-2022 走看看