Flutter中使用Transform缩放后如何消除留白区域

问题核心：Transform组件的缩放是视觉层面的变换，不会改变父布局的约束空间。当你将子组件整体缩放到0.9倍时，原本设置为全屏的红色容器会被缩小至原尺寸的90%，自然在四周出现留白。

方案1：将背景容器移出Transform（推荐） #

把红色背景容器放在Transform外层作为独立背景层，让它不受缩放影响始终保持全屏，需要缩放的内容单独包裹在Transform内部。

修改后的完整代码：

Stack(
  children: [
    // 红色背景：不受缩放影响，始终铺满屏幕
    Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      color: Colors.red,
    ),
    // 需要缩放的内容包裹在Transform中
    Transform(
      alignment: FractionalOffset.center,
      transform: Matrix4.diagonal3Values(
        isKeyboardVisible || controller.isBottomVisible.value
            ? _scale * 0.90
            : _scale,
        isKeyboardVisible || controller.isBottomVisible.value
            ? _scale * 0.90
            : _scale,
        1.0,
      )..translate(
          _position.dx * (isKeyboardVisible || controller.isBottomVisible.value ? 0.90 : 1.0),
          _position.dy * (isKeyboardVisible || controller.isBottomVisible.value ? 0.90 : 1.0),
        ),
      child: Stack(
        children: [
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 20),
            child: AspectRatio(
              aspectRatio: 5 / 7,
              child: Padding(
                padding: const EdgeInsets.only(top: 8.0),
                child: Container(
                  alignment: isKeyboardVisible || controller.isBottomVisible.value
                      ? Alignment.topCenter
                      : Alignment.center,
                  color: Colors.white,
                ),
              ),
            ),
          ),
          ...GlobalState.movableAllWidgets,
        ],
      ),
    ),
  ],
)

方案2：反向缩放背景容器尺寸 #

如果必须把红色容器留在Transform内部，可以通过反向计算尺寸抵消缩放的影响：当缩放比例为0.9时，将容器宽高设为原尺寸除以0.9，这样缩放后实际显示尺寸刚好等于屏幕大小。

修改后的红色容器代码：

Container(
  width: MediaQuery.of(context).size.width / 
    (isKeyboardVisible || controller.isBottomVisible.value ? 0.9 : 1.0),
  height: MediaQuery.of(context).size.height / 
    (isKeyboardVisible || controller.isBottomVisible.value ? 0.9 : 1.0),
  color: Colors.red,
)

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