Flutter拖拽与缩放组件冲突问题求助

需求 #

• 支持用户拖拽组件到任意位置
• 应用需适配不同屏幕/窗口尺寸

现有问题 #

分别实现拖拽和屏幕适配后，无法同时满足两个需求：

• 动态设置logicWidth/logicHeight为当前窗口高度时，拖拽正常，但组件不会随窗口缩放
• 固定logicWidth/logicHeight为全屏尺寸（961）时，组件缩放正常，但非全屏下拖拽位置偏移

核心矛盾：拖拽依赖尺寸与窗口实时匹配，而缩放需要固定设计尺寸作为基准。

解决方案代码 #

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:matrix_gesture_detector/matrix_gesture_detector.dart';

// 可拖拽组件列表
const List<Widget> draggableWidgets = [
  DraggableWidget(
    draggableWidget: CircleAvatar(
      backgroundColor: Colors.green,
      radius: 32,
    ),
  ),
  DraggableWidget(
    draggableWidget: CircleAvatar(
      backgroundColor: Colors.red,
      radius: 24,
    ),
  ),
];

class FrontPageWidget extends ConsumerWidget {
  const FrontPageWidget({Key? key}) : super(key: key);
  static const routeName = '/frontPage';
  // 固定设计基准尺寸（全屏时的有效高度）
  static const double designSize = 961;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final height = MediaQuery.of(context).size.height;
    final padding = MediaQuery.of(context).viewPadding;
    final cleanHeight = height - padding.top - kToolbarHeight;

    // 计算当前窗口与设计尺寸的缩放比例
    final scale = cleanHeight / designSize;

    return Scaffold(
      appBar: AppBar(
        title: const Text('Main Page'),
      ),
      body: SizedBox.expand(
        child: FittedBox(
          fit: BoxFit.contain,
          alignment: Alignment.center,
          child: Container(
            color: Colors.grey,
            width: designSize,
            height: designSize,
            // 将缩放比例传递给每个拖拽组件
            child: Stack(
              children: draggableWidgets.map((widget) {
                if (widget is DraggableWidget) {
                  return DraggableWidget(
                    draggableWidget: widget.draggableWidget,
                    scale: scale,
                  );
                }
                return widget;
              }).toList(),
            ),
          ),
        ),
      ),
    );
  }
}

class DraggableWidget extends StatelessWidget {
  final Widget draggableWidget;
  final double scale;

  const DraggableWidget({
    Key? key,
    required this.draggableWidget,
    this.scale = 1.0,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final ValueNotifier<Matrix4> notifier = ValueNotifier(Matrix4.identity());

    return MatrixGestureDetector(
      onMatrixUpdate: (m, tm, sm, rm) {
        // 根据缩放比例修正拖拽位移，确保手势坐标与设计尺寸匹配
        final correctedTranslation = Matrix4.translationValues(
          tm.translation.x / scale,
          tm.translation.y / scale,
          0,
        );
        notifier.value = correctedTranslation;
      },
      child: AnimatedBuilder(
        animation: notifier,
        builder: (ctx, child) {
          return Transform(
            transform: notifier.value,
            child: child,
          );
        },
        child: draggableWidget,
      ),
    );
  }
}

方案说明 #

1. 固定设计尺寸：以全屏时的有效高度（961）作为固定基准，让FittedBox基于此尺寸完成内容缩放，保证组件随窗口大小自适应。
2. 传递缩放比例：计算当前窗口与设计尺寸的比例，传递给每个拖拽组件。
3. 修正拖拽坐标：在手势回调中，将实际手势位移除以缩放比例，转换为设计尺寸下的坐标，确保拖拽操作的位置与视觉上的组件位置一致，解决偏移问题。

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