在叠加层前面制作一个小部件答案

【问题标题】：Make a widget in front of an overlay在叠加层前面制作一个小部件
【发布时间】：2021-07-11 20:36:32
【问题描述】：

我正在尝试在 Flutter 中重现 Pinterest 的相同上下文菜单。所以我有一个叠加层，它显示我的带有背景的上下文菜单，我还想将当前元素保留在叠加层前面。

这里有 2 个视频：Pinterest menu 与 My Flutter menu。

为了制作覆盖，我使用了 flutter_portal 包。

这是蓝卡小部件的代码，带有覆盖的东西：

import 'package:flutter/material.dart';
import 'package:flutter_portal/flutter_portal.dart';
import 'package:vector_math/vector_math.dart' show radians;

class CardWidget extends StatefulWidget {
  @override
  _CardWidgetState createState() => _CardWidgetState();
}

class _CardWidgetState extends State<CardWidget> with SingleTickerProviderStateMixin {
  late AnimationController controller;
  late Animation<double> degreeAnimation;
  late Animation<double> opacityAnimation;
  bool isMenuOpen = false;
  double menuPosX = 0;
  double menuPosY = 0;

  @override
  void initState() {
    controller = AnimationController(vsync: this, duration: Duration(milliseconds: 200))
      ..addListener(() {
        setState(() {});
      })
      ..addStatusListener((status) {
        if (status == AnimationStatus.forward) {
          isMenuOpen = true;
        } else if (status == AnimationStatus.dismissed) {
          isMenuOpen = false;
        }
      });
    degreeAnimation =
        Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(parent: controller, curve: Curves.easeOutBack));
    opacityAnimation =
        Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(parent: controller, curve: Curves.easeOutExpo));

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: 63.5 / 88.9,
      child: PortalEntry(
        visible: isMenuOpen,
        portal: Container(
          color: Colors.black.withOpacity(opacityAnimation.value / 2),
          child: GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: () {
              controller.reverse();
            },
          ),
        ),
        child: PortalEntry(
          visible: isMenuOpen,
          child: GestureDetector(
            onTapDown: (details) {

              if (controller.isCompleted) {
                controller.reverse();
              } else {
                menuPosX = details.globalPosition.dx;
                menuPosY = details.globalPosition.dy;

                controller.forward();
              }
            },
            // Blue card content
            child: Container(
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.all(
                  Radius.circular(8),
                ),
              ),
              child: Center(
                child: Text(
                  'Card Widget',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ),
          // Current contextual Menu
          portal: ContextualMenuWidget(),
        ),
      ),
    );
  }
}

感谢您的帮助！

【问题讨论】：

标签： flutter widget overlay

【解决方案1】：

也许您可以将所有其他卡片的颜色更改为与背景相同，而不是尝试添加叠加层。这样你就可以达到同样的效果。

您可以检查isMenuOpen 是否为真并保存单击它的卡片的索引，并且在您的网格构建器功能中您可以将所有卡片的颜色更改为与背景相同。

【讨论】：

这是一个有趣的想法，我会试一试！

【解决方案2】：

感谢orotype，我最终没有制作黑色叠加层，而是用 AnimatedOpacity 包裹了我的卡片，并在上下文菜单打开/关闭时传递了一个回调来触发动画。

Result here!

我不知道这是否是最好的解决方案，但我喜欢这个结果。

【讨论】：