Flutter 将压缩图像覆盖在一切之上

我试图在最大缩放期间（我使用InteractiveEviewer类）将图像覆盖在其他对象（以及状态栏）的顶部。基本上就像在Instagram上一样。我在看文件时找不到任何东西。关于如何进行的提示

child: InteractiveViewer(
 transformationController: controller,
 maxScale: 2.0,
 minScale: 2.0,
 child: imageBig,
 fit: BoxFit.fitWidth,
),

---

根据颤振存储库上的这一问题：

您可以通过使用

OverlayEntry

类来实现这一点，该类将处理

InteractiveViewer

子小部件相对于其他小部件的呈现

另外，您可以在这里找到

interactiveeviewerlay

小部件的代码片段，您可以直接在项目中使用它

创建人：

编辑： 下面是一个

interactiveeviewerlay

小部件的示例以及如何使用它

首先是

interactiveeviewerlay

小部件

class InteractiveViewerOverlay extends StatefulWidget {
  final Widget child;
  final double maxScale;

  const InteractiveViewerOverlay({
    Key key,
    @required this.child,
    this.maxScale,
  }) : super(key: key);

  @override
  _InteractiveViewerOverlayState createState() =>
      _InteractiveViewerOverlayState();
}

class _InteractiveViewerOverlayState extends State<InteractiveViewerOverlay>
    with SingleTickerProviderStateMixin {
  var viewerKey = GlobalKey();
  Rect placeholder;
  OverlayEntry entry;
  var controller = TransformationController();
  Matrix4Tween snapTween;
  AnimationController snap;

  @override
  void initState() {
    super.initState();
    snap = AnimationController(vsync: this);
    snap.addListener(() {
      if (snapTween == null) return;
      controller.value = snapTween.evaluate(snap);
      if (snap.isCompleted) {
        entry.remove();
        entry = null;
        setState(() {
          placeholder = null;
        });
      }
    });
  }

  @override
  void dispose() {
    snap.dispose();
    super.dispose();
  }

  Widget buildViewer(BuildContext context) {
    return InteractiveViewer(
        key: viewerKey,
        transformationController: controller,
        panEnabled: false,
        maxScale: widget.maxScale ?? 2.5,
        child: widget.child,
        onInteractionStart: (details) {
          if (placeholder != null) return;

          setState(() {
            var renderObject =
                viewerKey.currentContext.findRenderObject() as RenderBox;
            placeholder = Rect.fromPoints(
              renderObject.localToGlobal(Offset.zero),
              renderObject
                  .localToGlobal(renderObject.size.bottomRight(Offset.zero)),
            );
          });

          entry = OverlayEntry(
            builder: (context) {
              return Positioned.fromRect(
                rect: placeholder,
                child: buildViewer(context),
              );
            },
          );

          Overlay.of(context).insert(entry);
        },
        onInteractionEnd: (details) {
          snapTween = Matrix4Tween(
            begin: controller.value,
            end: Matrix4.identity(),
          );
          snap.value = 0;
          snap.animateTo(
            1,
            duration: Duration(milliseconds: 250),
            curve: Curves.ease,
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    var viewer = placeholder != null
        ? SizedBox.fromSize(size: placeholder.size)
        : buildViewer(context);

    return Container(
      child: viewer,
    );
  }
}

---

当你长按instagram时，是否希望它以弹出方式显示？@Aman Verma:不。我只想像在Instagram上一样调整图像的大小。当你在Instagram上放大图像时，它会覆盖其他对象，甚至状态栏。好的，缩放效果，我会尝试你可以将

maxScale

增大到一个更大的值来获得这种效果@spamup@void例如它不工作。图像不会覆盖在其他对象上。请提供一个如何实现InteractiveEviewRoverLay小部件的示例？谢谢，谢谢。但我的状态栏仍然可见，尽管是透明的。我使用了“onInteractionStart:（details）{SystemChrome.SetEnabledSystemEmioVerlays（[SystemUiOverlay.bottom]）；…”但这会导致整个屏幕短暂抖动。此外，方法remove（）在哪里？“方法remove”在null上被调用。接收方：null尝试调用：remove（）InteractiveEviewer仍然不支持在状态栏和导航栏上覆盖，因此问题仍然存在于Github上。但是，此解决方案用于将InteractiveEviewer覆盖在树中的任何其他小部件之上，因此在缩放时将占用整个屏幕空间。我们正在等待Futter团队将此功能添加到“InteractiveEviewer”中小部件。感谢您的澄清。缺少的方法呢？

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
          appBar: AppBar(),
          body: ListView(children: [
            Column(
              children: [
                Container(
                    decoration: BoxDecoration(
                        color: Colors.white,
                        border:
                            Border(bottom: BorderSide(color: Colors.green))),
                    width: double.infinity,
                    height: 60,
                    child: Column(children: [
                      Text('Abdelazeem Kuratem',
                          style: TextStyle(color: Colors.black)),
                      Text('5 min', style: TextStyle(color: Colors.black)),
                    ])),
                InteractiveViewerOverlay(
                  child: Image.network(
                    "https://upload.wikimedia.org/wikipedia/commons/6/6a/Mona_Lisa.jpg",
                    fit: BoxFit.contain,
                  ),
                ),
                Container(
                  decoration: BoxDecoration(
                      color: Colors.grey[50],
                      border: Border(top: BorderSide(color: Colors.green))),
                  child: Stack(
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [
                          _createBottomButton(
                              text: 'Like',
                              icon: Icons.thumb_up,
                              onPressed: () {}),
                          _createBottomButton(
                              text: 'Comment',
                              icon: Icons.comment,
                              onPressed: () {}),
                          _createBottomButton(
                              text: 'Share',
                              icon: Icons.share,
                              onPressed: () {}),
                        ],
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ])),
    );
  }

  Widget _createBottomButton({
    String text,
    IconData icon,
    Null Function() onPressed,
  }) {
    return FlatButton.icon(
      onPressed: onPressed,
      icon: Icon(
        icon,
        color: Colors.green,
        size: 21,
      ),
      label: Text(
        text,
        style: TextStyle(color: Colors.green, fontSize: 14),
      ),
    );
  }
}