覆盖所有物体上方的收缩图像

问题描述

我正在尝试在最大缩放比例(我正在使用类 InteractiveViewer )上覆盖其他对象(也包括状态栏)上的图像.基本上像在Instagram上一样.我找不到任何阅读文档的信息.有关如何进行的提示?

I'm trying to overlay an image during max scaling (I'm using the class InteractiveViewer) on top of other objects (also the status bar). Basically like on Instagram. I couldn't find anything reading the docs. A hint on how to proceed?

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

推荐答案

根据flutter存储库中的此问题:

According to this issue on flutter repository:

您可以使用OverlayEntry类来实现这一点，该类将处理InteractiveViewer子窗口小部件在其他窗口小部件上的呈现.

You can achive that by using OverlayEntry Class, which will handle the rendering of your InteractiveViewer child widget over the other widgets.

此外，您还可以在此处找到InteractiveViewerOverlay小部件的代码段，可以在项目内部直接使用.

Also, you can find here a code snippet for InteractiveViewerOverlay widget, that you can use directly inside your project.

创建者:

1. https://github.com/PixelToast
2. https://github.com/zzterrozz

1. https://github.com/PixelToast
2. https://github.com/zzterrozz

这是InteractiveViewerOverlay小部件及其使用方法的示例.

Edited:Here is an example for the InteractiveViewerOverlay widget and how to use it.

首先，InteractiveViewerOverlay小部件

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,
    );
  }
}

接下来，是实现InteractiveViewerOverlay小部件的示例.

Next, An example of implementing the InteractiveViewerOverlay widget.

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),
      ),
    );
  }
}

这篇关于覆盖所有物体上方的收缩图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！