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
                                )
                            )
                        )
                    );
                  },
                );
              }
          )
      );
    }
  • 相关阅读:
    Redis操作命令大全
    Redis实用监控工具一览
    Redis缓存雪崩、缓存穿透、缓存击穿、缓存降级、缓存预热、缓存更新
    Redis GEO地理位置信息,查看附近的人
    详解redis持久化
    详解Supervisor进程守护监控
    详解Redis Cluster集群
    arduino使用rfid
    树莓派控制WS2812
    Arduino读取温湿度dh11+烟雾气体MQ2+彩灯ws2812
  • 原文地址:https://www.cnblogs.com/timba1322/p/12487018.html
Copyright © 2011-2022 走看看