Flutter Stack中如何让上层可调整大小组件对齐下层居中组件的左上角

实现方案 #

方案1：调整组件结构（最优解，无需手动计算坐标） #

你可以将居中的图片和可调整大小组件放在同一个内部Stack中，再将这个Stack套在Center下即可。此时内部Stack的尺寸会和居中的图片完全匹配，可调整大小组件设置初始top: 0、left: 0就会自动对齐图片的左上角，适配所有屏幕尺寸不会出现偏移。
代码示例：

child: Container(
  color: Colors.red,
  child: Center(
    child: Stack(
      // 让Stack尺寸适配子组件大小，和图片尺寸保持一致
      fit: StackFit.loose,
      children: [
        Image.file(
          File("myfilepath"),
        ),
        ResizableWidget(
          // 初始设0即可对齐图片左上角
          initialTop: 0,
          initialLeft: 0,
          child: Container(
            color: Colors.blue,
          ),
        ),
      ],
    ),
  ),
),

方案2：通过GlobalKey计算坐标偏移（适配不希望调整原有结构的场景） #

如果必须保留现有外层Stack的结构，可以通过GlobalKey获取居中图片的全局坐标，动态计算可调整大小组件的初始位置：

1. 首先定义全局Key

final GlobalKey _imageKey = GlobalKey();

2. 给Image组件绑定Key

Image.file(
  File("myfilepath"),
  key: _imageKey,
),

3. 组件渲染完成后获取坐标赋值

@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback((_) {
    final RenderBox renderBox = _imageKey.currentContext?.findRenderObject() as RenderBox;
    // offset.dx为需要的初始left值，offset.dy为需要的初始top值
    final Offset offset = renderBox.localToGlobal(Offset.zero);
    // 将上述两个值传给ResizableWidget的初始位置参数即可
    // 如果需要初始尺寸和图片一致，也可通过renderBox.size.width、renderBox.size.height获取对应值
  });
}

你提到的效果参考：
初始错误效果：

期望最终效果：

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