通知浮动弹出菜单答案

【问题标题】：Notification floating popup menu通知浮动弹出菜单
【发布时间】：2019-11-24 07:27:39
【问题描述】：

我正在使用 Flutter 重新构建一个已经在 Cordova 中使用 HTML5 完成的应用程序。

我需要一个插件或小部件来模拟通知的弹出菜单而不更改路由。

有什么事吗？

我会提供截图：

notification menu

【问题讨论】：

标签： flutter

【解决方案1】：

你可以使用Dialog class

这里是一个 AlertDialog 的例子

Future<void> _neverSatisfied() async {
  return showDialog<void>(
    context: context,
    barrierDismissible: false, // user must tap button!
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text('Rewind and remember'),
        content: SingleChildScrollView(
          child: ListBody(
            children: <Widget>[
              Text('You will never be satisfied.'),
              Text('You\’re like me. I’m never satisfied.'),
            ],
          ),
        ),
        actions: <Widget>[
          FlatButton(
            child: Text('Regret'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}

您也可以使用Stack class 以获得更大的灵活性

SizedBox(
      width: 250,
      height: 250,
      child: Stack(
        children: <Widget>[
          Container(
            width: 250,
            height: 250,
            color: Colors.white,
          ),
          Container(
            padding: EdgeInsets.all(5.0),
            alignment: Alignment.bottomCenter,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: <Color>[
                  Colors.black.withAlpha(0),
                  Colors.black12,
                  Colors.black45
                ],
              ),
            ),
            child: Text(
              "Foreground Text",
              style: TextStyle(color: Colors.white, fontSize: 20.0),
            ),
          ),
        ],
      ),
    )

【讨论】：

正确，如果您想要更多控制权，可以使用 Stack 小部件。用他们的例子更新了答案
我读得太晚了抱歉。我发布了最终代码。你知道如何捕捉返回按钮事件吗？
没有问题。您需要使用 WillPopScope 类 - 在此处查看答案stackoverflow.com/a/45918186/469335

【解决方案2】：

最后我使用了 Stacks。我阅读编辑的答案太晚了，但结果是一样的。

这里是给大家的原型类：

        import 'package:flutter/material.dart';

        class MenuTendina extends StatefulWidget {

          final double opacita;
          final double altezza;
          final Widget child;
          final Widget notifiche;


          MenuTendina({Key key, @required this.child, @required this.notifiche, @required this.opacita, @required this.altezza}) : super(key:key);

          @override
          _MenuTendinaState createState() => _MenuTendinaState();

        }

        class _MenuTendinaState extends State<MenuTendina> {

          Widget child;
          Widget notifiche;
          double opacita;
          double altezza;
          bool mostraTendina = true;

          @override
          Widget build(BuildContext context) {
            return Stack(
              children: <Widget>[
            this.child,
                Container(
                    width: MediaQuery.of(context).size.width,
                    height: (this.mostraTendina) ? MediaQuery.of(context).size.height : 0.0,
                    child: Opacity(
                        opacity: this.opacita,
                        child: Container(
                            color: Colors.black,
                            child: GestureDetector(
                              onTap: () {
                                setState(() {
                                  this.opacita = 0.0;
                                  this.altezza = 0.0;
                                  this.mostraTendina = false;
                                });
                              },
                            )
                        )
                    )
                ),
                AnimatedContainer(
                  decoration: BoxDecoration(
                    boxShadow: [BoxShadow(
                        offset: Offset(0, -5),
                        spreadRadius: 0.0,
                        blurRadius: 20
                    )],
                  ),
                  duration: Duration(milliseconds: 200),
                  width: MediaQuery.of(context).size.width,
                  height: this.altezza,
                  child: this.notifiche,
                )
              ],
            );
          }


        }

现在唯一的问题是如何捕捉返回按钮事件，因为通常当用户看到通知时，他们会按下返回按钮来隐藏它们......

【讨论】：