Flutter Web：如何通过滚动实现固定(0,0)位置的动态缩放？

要让缩放动画固定在(0,0)位置（左上角），你需要手动控制InteractiveViewer的变换矩阵，替换它默认的触摸锚点缩放逻辑。具体实现如下：

1. 将无状态组件改为有状态组件，维护缩放比例和变换控制器状态
2. 监听Web端滚轮滚动事件，自定义缩放逻辑
3. 构建以(0,0)为锚点的变换矩阵，实现固定位置缩放

修改后的完整代码：

import 'package:flutter/material.dart';

class ZoomableWidget extends StatefulWidget {
  final Widget child;
  ZoomableWidget({required this.child});

  @override
  State<ZoomableWidget> createState() => _ZoomableWidgetState();
}

class _ZoomableWidgetState extends State<ZoomableWidget> {
  final TransformationController _transformationController = TransformationController();
  double _currentScale = 1.0;
  final double _minScale = 0.5;
  final double _maxScale = 4.0;
  // 可根据需求调整缩放灵敏度
  final double _scaleStep = 0.1;

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

  void _handleScroll(PointerScrollEvent event) {
    // 滚轮向上滚动缩小，向下滚动放大
    final double scaleDelta = event.scrollDelta.dy > 0 ? _scaleStep : -_scaleStep;
    double newScale = _currentScale + scaleDelta;

    // 限制缩放范围在设定区间内
    newScale = newScale.clamp(_minScale, _maxScale);
    if (newScale == _currentScale) return;

    // 构建以(0,0)为锚点的缩放矩阵
    final Matrix4 newMatrix = Matrix4.identity()
      ..scale(newScale, newScale);

    setState(() {
      _currentScale = newScale;
      _transformationController.value = newMatrix;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Listener(
      onPointerSignal: (PointerSignalEvent event) {
        if (event is PointerScrollEvent) {
          _handleScroll(event);
        }
      },
      child: InteractiveViewer(
        transformationController: _transformationController,
        child: widget.child,
        boundaryMargin: EdgeInsets.all(0),
        minScale: _minScale,
        maxScale: _maxScale,
        // 禁用默认缩放手势，避免逻辑冲突
        scaleEnabled: false,
        // 不需要平移可禁用此选项
        panEnabled: false,
      ),
    );
  }
}

关键说明 #

• TransformationController：手动控制InteractiveViewer的变换矩阵，实现自定义缩放锚点
• PointerScrollEvent监听：通过Listener捕获Web端滚轮事件，根据滚动方向计算缩放增量
• 固定锚点逻辑：使用Matrix4.identity()..scale()构建矩阵，直接以坐标原点(0,0)作为缩放锚点，确保左上角位置在缩放过程中保持固定
• 冲突避免：禁用InteractiveViewer默认的scaleEnabled，防止默认触摸缩放和自定义滚轮缩放逻辑冲突

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