Flutter中如何让子RenderObject适配父组件变换？解决Marker绘制位置偏移问题

这个问题的核心在于你直接使用了localToGlobal获取全局坐标，但Marker所在的渲染上下文已经被父组件（比如FittedBox）的变换矩阵修改了，导致全局坐标和Marker的本地绘制空间不匹配。下面是具体的解决思路和修正后的代码：

问题根源 #

当父组件存在变换（比如缩放、平移）时，子树的RenderObject会继承父组件的变换矩阵。你原来的代码中，renderBox.localToGlobal(Offset.zero)得到的是目标Container在屏幕上的全局坐标，但Marker的绘制canvas已经被FittedBox的缩放变换处理过了——直接用这个全局坐标绘制，相当于在已经缩放的画布上使用原始尺寸的坐标，自然会出现偏移。

解决方案：使用相对坐标转换 #

我们需要把目标Container的坐标，转换到Marker所在RenderObject的本地坐标系中，而不是用全局坐标。可以通过RenderObject.getTransformTo方法获取两个RenderObject之间的变换矩阵，再用这个矩阵转换坐标。

修正后的完整代码 #

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

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

var boxKey = GlobalKey();

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Center(
        child: SizedBox(
          height: 100,
          width: 100,
          child: FittedBox(
            fit: BoxFit.scaleDown,
            child: Container(
              height: 200,
              width: 200,
              color: Colors.yellow,
              child: Stack(
                children: [
                  const Marker(),
                  Align(
                    alignment: const Alignment(-0.5, -0.5),
                    child: Container(
                      key: boxKey,
                      width: 30,
                      height: 30,
                      color: Colors.red,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class Marker extends LeafRenderObjectWidget {
  const Marker({Key? key}) : super(key: key);

  @override
  RenderMarker createRenderObject(BuildContext context) {
    return RenderMarker();
  }

  @override
  void updateRenderObject(BuildContext context, RenderMarker renderObject) {}
}

class RenderMarker extends RenderProxyBox {
  @override
  void performLayout() {
    super.performLayout();
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    super.paint(context, offset);
    
    final renderBox = boxKey.currentContext!.findRenderObject() as RenderBox;
    // 获取目标RenderBox到当前RenderMarker的变换矩阵
    final transform = renderBox.getTransformTo(this);
    // 转换目标Container的左上角坐标到当前本地坐标系
    final localOffset = transform.transform(Offset.zero);
    // 计算目标Container的中心位置（在当前本地坐标系中）
    final center = localOffset + Offset(renderBox.size.width / 2, renderBox.size.height / 2);
    
    context.canvas.drawRect(
      Rect.fromCenter(center: center, width: 50, height: 50),
      Paint()..color = Colors.blue,
    );
  }
}

关键代码解释 #

• getTransformTo(this)：获取目标renderBox到当前RenderMarker的变换矩阵，这个矩阵包含了所有父组件的变换（比如FittedBox的缩放）信息。
• transform.transform(Offset.zero)：把目标Container的左上角本地坐标，转换到当前RenderMarker的本地坐标系中。
• 计算中心位置：基于转换后的坐标计算目标的中心，再绘制方框，这样就能保证方框准确贴合目标Container，不受父组件变换的影响。

这样修改后，不管父组件有什么样的变换（缩放、旋转、平移），Marker都能正确定位到目标Container周围。

内容的提问来源于stack exchange，提问作者Philipp S.