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

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

标签： imageflutterflutter-layout

Answer 1

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

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

1. 定义一个转换控制器：

final transformationController = TransformationController();

2. 使用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小部件的更多信息：

交互式查看器文章

InteractiveViewer 文档

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