Question

所以我想在这里做的是，每当InteractiveViewer的比例缩放时，就按比例更改SingleChildScrollView的尺寸。例如：scale 1.0 =滚动视图的宽度为1000，scale 2.0 =滚动视图的宽度为2000，依此类推。我似乎无法从文档中找到如何直接执行此操作的方法。因此，我通过获取property（scale）本身的值并重新渲染SingleChildScrollView小部件来进行考虑，但我似乎也找不到任何方法。如果需要进一步澄清，请随时提出。谢谢！

Answer 1

您可以像这样获得实际和持久的比例值：

class InteractiveViewerTest extends StatefulWidget {
  @override
  _InteractiveViewerTestState createState() => _InteractiveViewerTestState();
}

class _InteractiveViewerTestState extends State<InteractiveViewerTest> {
  TransformationController _transformationController =
      TransformationController();

  @override
  Widget build(BuildContext context) {
    return InteractiveViewer(
      minScale: 0.5,
      maxScale: 2.0,
      transformationController: _transformationController,
      onInteractionEnd: (details) {
        // Details.scale can give values below 0.5 or above 2.0 and resets to 1
        // Use the Controller Matrix4 to get the correct scale.
        double correctScaleValue = _transformationController.value.getMaxScaleOnAxis();
      },
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
    );
  }
}

Answer 2

使用onInteractionUpdate属性，并从ScaleUpdateDetails获取值，例如：

double scale;

InteractiveViewer(
  onInteractionUpdate: (details) {
    scale = details.scale; // This is your scale. 
  },
  child: FlutterLogo(),
);

Answer 3

当用户更新小部件上的平移或缩放手势时，将调用onInteractionUpdate。因此，您可以从scale获取当前的callback。

我在下面添加了一个演示代码：

       InteractiveViewer(
        transformationController: transformationController,
        onInteractionUpdate: (ScaleUpdateDetails details){  // get the scale from the ScaleUpdateDetails callback
          var myScale = details.scale;
          print(myScale); // print the scale here
        },
        boundaryMargin: EdgeInsets.all(20.0),
        minScale: 0.1,
        maxScale: 4.6,
        scaleEnabled: true,
        panEnabled: true,
        child: ClipRRect(
          borderRadius: BorderRadius.circular(18.0),
          child: Image.asset('images/user_picture.png'),
        ),
      );

如何在Flutter中获取InteractiveViewer当前比例的值？

3 个答案: