Question

我想让正在缩放的图像在发布时返回到原始缩放值（1.0）。

onInteractionEnd似乎是执行此操作的正确属性，但是我不确定如何访问scale属性以创建执行此操作的函数。

      child: InteractiveViewer(
                boundaryMargin: EdgeInsets.all(0.0),
                minScale: 1.0,
                maxScale: 2.5,
                onInteractionEnd: //scale = 1.0,

Answer 1

您可以在下面复制粘贴运行完整代码
这是transformationController https://api.flutter.dev/flutter/widgets/InteractiveViewer/transformationController.html的官方示例的修改
每当转换孩子时，Matrix4的值都会更新，并且所有listeners都会得到通知。如果设置了值，InteractiveViewer将更新以遵守新值。
您可以在onInteractionEnd中将动画重置为官方演示，
代码段

void _animateResetInitialize() {
    _controllerReset.reset();
    _animationReset = Matrix4Tween(
      begin: _transformationController.value,
      end: Matrix4.identity(),
    ).animate(_controllerReset);
    _animationReset.addListener(_onAnimateReset);
    _controllerReset.forward();
  }
  
void _onInteractionEnd(ScaleEndDetails details) {
    _animateResetInitialize();
  }

工作演示

完整代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

/// This is the private State class that goes with MyStatefulWidget.
/// AnimationControllers can be created with `vsync: this` because of TickerProviderStateMixin.
class _MyStatefulWidgetState extends State<MyStatefulWidget>
    with TickerProviderStateMixin {
  final TransformationController _transformationController =
  TransformationController();
  Animation<Matrix4> _animationReset;
  AnimationController _controllerReset;

  void _onAnimateReset() {
    _transformationController.value = _animationReset.value;
    if (!_controllerReset.isAnimating) {
      _animationReset?.removeListener(_onAnimateReset);
      _animationReset = null;
      _controllerReset.reset();
    }
  }

  void _animateResetInitialize() {
    _controllerReset.reset();
    _animationReset = Matrix4Tween(
      begin: _transformationController.value,
      end: Matrix4.identity(),
    ).animate(_controllerReset);
    _animationReset.addListener(_onAnimateReset);
    _controllerReset.forward();
  }

// Stop a running reset to home transform animation.
  void _animateResetStop() {
    _controllerReset.stop();
    _animationReset?.removeListener(_onAnimateReset);
    _animationReset = null;
    _controllerReset.reset();
  }

  void _onInteractionStart(ScaleStartDetails details) {
    // If the user tries to cause a transformation while the reset animation is
    // running, cancel the reset animation.
    if (_controllerReset.status == AnimationStatus.forward) {
      _animateResetStop();
    }
  }

  void _onInteractionEnd(ScaleEndDetails details) {
    _animateResetInitialize();
  }

  @override
  void initState() {
    super.initState();
    _controllerReset = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 400),
    );
  }

  @override
  void dispose() {
    _controllerReset.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).colorScheme.primary,
      appBar: AppBar(
        automaticallyImplyLeading: false,
        title: const Text('Controller demo'),
      ),
      body: Center(
        child: InteractiveViewer(
          boundaryMargin: EdgeInsets.all(double.infinity),
          transformationController: _transformationController,
          minScale: 1.0,
          maxScale: 2.5,
          onInteractionStart: _onInteractionStart,
          onInteractionEnd: _onInteractionEnd,
          child: Image.network("https://picsum.photos/250?image=9")
        ),
      ),
      persistentFooterButtons: [
        IconButton(
          onPressed: _animateResetInitialize,
          tooltip: 'Reset',
          color: Theme.of(context).colorScheme.surface,
          icon: const Icon(Icons.replay),
        ),
      ],
    );
  }
}

Answer 2

我想出了一个简单的解决方案。

只需在交互开始时保存初始控制器值，然后在交互结束时更改回该值。

TransformationController controllerT = TransformationController();
var initialControllerValue;

InteractiveViewer(
    minScale: 1.0,
    maxScale: 100.0,
    transformationController: controllerT,
    onInteractionStart: (details){
        initialControllerValue = controllerT.value;
    },
    onInteractionEnd: (details){
        controllerT.value = initialControllerValue;
    },
...

如果你想在网格或列表视图中使用它，只需在 itemBuilder 中声明控制器：

ListView.builder(
    itemCount: widget.types.length,
    itemBuilder: (context, index) {
        TransformationController controllerT = TransformationController();
        var initialControllerValue;

Flutter InteractiveViewer onInteractionEnd返回到1.0的比例

2 个答案: