image - 在 Flutter 中将图像缩放到屏幕之外

Question

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

是否有我可以用来实现此目的的属性？

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

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

Answer 1

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

我添加了一个关于如何使用您的代码作为示例使用小部件的演示:

1. 定义一个转换 Controller :

final transformationController = TransformationController();

1. 使用 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 才能使用该小部件。