在 Flutter 中将图像缩放到屏幕之外答案

【问题标题】：Scaling Image beyond screen in Flutter在 Flutter 中将图像缩放到屏幕之外
【发布时间】：2020-12-16 11:33:00
【问题描述】：

我正在尝试缩放图像以使其放大，而图像的其余部分超出了屏幕。我已经尝试了缩放属性，但它似乎并没有影响我的图像大小。

有没有我可以使用的属性来实现这一点？

class animationPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Image.asset(
            'assets/imageMain.JPG',
            height: 300,
            scale: 2,
          ),
        ],
      ),
    );
  }
}

这是对我不起作用的代码。

【问题讨论】：

标签： image flutter flutter-layout

【解决方案1】：

您可以使用InteractiveViewer 小部件向您的小部件添加交互。它支持pan 和scale 交互。

我添加了一个演示，以您的代码为例，说明如何使用小部件：

定义转换控制器：

final transformationController = TransformationController();

使用InteractiveViewer 小部件：

    InteractiveViewer(
      transformationController: transformationController, // pass the transformation controller
      onInteractionEnd: (details) {
        setState(() {
          transformationController.toScene(
              Offset.zero); // return to normal size after scaling has ended
        });
      },
      boundaryMargin: EdgeInsets.all(20.0),
      minScale: 0.1, // min scale
      maxScale: 4.6, // max scale
      scaleEnabled: true,
      panEnabled: true,
      child: Image.asset(
        'assets/imageMain.JPG',
        height: 300,
      ),
    );

在此处阅读有关InteractiveViewer 小部件的更多信息：

Interactive Viewer article

InteractiveViewer documentation

注意：您的Flutter 版本必须为1.20 才能使用小部件。

【讨论】：

是否可以在没有 setState() 的情况下工作？我正在使用 statelessWidget，所以我无法实现这样的方法。
嗨@spamup，如果您想在Stateless 小部件中使用InteractiveViewer，您就看到了这条评论。你可以。

【解决方案2】：

您还可以在FittedBox 小部件中包装图像...使用它通常有助于调整其child 的大小，并且您可以设置许多好的参数以使其特定于您的使用-案子。还有不错的documentation。

其次，您可以将其包装在 InteractiveViewer 小部件中，尽管这可能并不理想。

最后，您可以将图像包装在 Transform.scale 小部件中并更改其 scale 参数。

【讨论】：