Flutter Transform.scale缩放组件后下方组件无法对齐到其底部问题

问题根源 #

Flutter 中的 Transform 属于绘制阶段变换，仅会修改组件渲染的视觉效果，不会改变组件在布局阶段所占的尺寸空间。你代码中的琥珀色 Container 原始布局尺寸为 100100，即使通过 scale:2 放大到 200200，Column 在布局计算时仍然认为它仅占用 100 高度，因此后续蓝色组件会从 y=100 的位置开始绘制，自然和放大后的琥珀色组件下半部分重叠。 #

解决方案 #

不需要在两个组件中间加间距组件，也不需要修改蓝色组件的任何属性，只需要给 Transform.scale 套一个尺寸和缩放后实际尺寸一致的父容器，让布局阶段能正确识别第一个组件的占用高度即可。如果不想用 SizedBox，换成带宽高属性的 Container 逻辑完全一致。
修改后的完整代码如下：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: Colors.white),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(
          children: [
            // 父容器尺寸和缩放后实际尺寸一致，属于第一个组件的一部分，不属于额外间距
            SizedBox(
              width: 200,
              height: 200,
              child: Transform.scale(
                  alignment: const Alignment(-1, -1),
                  scale: 2,
                  child: Container(width: 100, height: 100, color: Colors.amber)),
            ),
            Container(width: 50, height: 50, color: Colors.blue)
          ],
        ),
      ),
    );
  }
}

效果说明 #

父容器的尺寸为缩放后的实际尺寸 200*200，Column 布局时会按 200 高度计算第一个组件的占位，蓝色组件自然会排在缩放后的琥珀色容器正下方，完全符合要求。

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