Flutter InteractiveViewer缩放值复位：实现缩放后红方块留存

出现这个问题的核心原因是：你只在onInteractionUpdate中更新缩放值，但这个回调仅在手指触摸屏幕进行缩放交互时触发。当松开手指（交互结束），InteractiveViewer会锁定最终缩放比例，但此时没有回调更新Provider里的zoomLevel，导致Provider的数值停留在交互过程中的瞬时值，甚至出现复位，红方块也就跟着消失了。

我们可以通过TransformationController来跟踪InteractiveViewer的实际缩放状态，它能实时反映当前的缩放比例（包括交互结束后的最终状态），结合监听控制器变化来解决问题。

修改后的完整代码 #

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => ZoomProvider(),
      child: const MaterialApp(
        title: 'Interactive Viewer Example',
        home: HomePage(),
      ),
    );
  }
}

// 改为StatefulWidget以持有TransformationController
class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final TransformationController _transformationController = TransformationController();

  @override
  void initState() {
    super.initState();
    // 监听控制器变化，实时更新缩放值到Provider
    _transformationController.addListener(_updateZoomLevel);
  }

  @override
  void dispose() {
    _transformationController.removeListener(_updateZoomLevel);
    _transformationController.dispose();
    super.dispose();
  }

  void _updateZoomLevel() {
    // 获取当前实际缩放比例（取XY轴最大值保证准确性）
    final scale = _transformationController.value.getMaxScaleOnAxis();
    context.read<ZoomProvider>().updateZoomLevel(scale);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Zoom ${context.watch<ZoomProvider>().zoomLevel.toStringAsFixed(1)}'),
      ),
      body: Center(
        child: InteractiveViewer(
          // 绑定变换控制器
          transformationController: _transformationController,
          boundaryMargin: const EdgeInsets.all(320),
          constrained: false,
          minScale: 0.5,
          maxScale: 5.0,
          child: Stack(
            children: [
              Image.network(
                'https://picsum.photos/id/1/400/400',
                fit: BoxFit.contain,
              ),
              Visibility(
                visible: context.watch<ZoomProvider>().zoomLevel >= 2,
                child: Container(
                  width: 40,
                  height: 40,
                  color: Colors.red,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class ZoomProvider extends ChangeNotifier {
  double _zoomLevel = 1.0;

  double get zoomLevel => _zoomLevel;

  void updateZoomLevel(double scale) {
    // 避免不必要的状态更新，优化性能
    if (_zoomLevel != scale) {
      _zoomLevel = scale;
      notifyListeners();
    }
  }
}

关键修改说明 #

1. 改用TransformationController：这个控制器是InteractiveViewer的核心状态管理器，能精准跟踪缩放、平移等所有变换操作，包括交互结束后的最终状态。
2. 监听控制器变化：通过addListener在控制器状态改变时（交互中、交互结束后）实时更新Provider的缩放值，替代原来仅在交互过程中触发的onInteractionUpdate。
3. 准确获取缩放比例：使用getMaxScaleOnAxis()获取缩放值，避免因XY轴缩放不一致导致的判断误差。
4. 优化状态更新：在Provider的更新方法中添加判重逻辑，避免重复通知监听者，减少不必要的UI重绘。

修改后，无论缩放过程中还是松开手指后，只要缩放比例≥2，红方块就会持续显示；比例<2时自动隐藏，不会再出现复位消失的问题。

内容的提问来源于stack exchange，提问作者Juan Pablo