Flutter使用Transform.scale缩放Stack后部分对齐按钮无法响应点击问题

问题根因 #

1. Transform.scale 仅在绘制阶段对子组件做缩放，不会修改子组件的布局尺寸和点击命中测试的计算规则。缩放后显示的按钮，点击事件的判定还是用未缩放的原始布局坐标，要么点击位置和实际按钮位置偏移，要么原始布局位置超出Stack边界的按钮直接判定为不在点击区域，无法响应事件。
2. Stack默认仅对布局边界内的子组件做命中测试，超出边界的组件哪怕设置不裁剪可见，也无法触发点击。

解决方案 #

方案1：适配Transform.scale的布局逻辑

给Stack扩大布局边界、放开裁剪规则，确保所有按钮的原始布局位置都在Stack的边界内：

Transform.scale(
  scale: 0.5,
  // 外层套SizedBox手动给足够大的尺寸，保证所有Align的子组件都落在Stack布局范围内，尺寸根据你的alignment最大范围调整
  child: SizedBox(
    width: 1000,
    height: 1000,
    child: Stack(
      clipBehavior: Clip.none, // 允许子组件超出边界绘制
      children: List.generate(data.length, (int index) {
        Alignment alignment = alignments[index];
        String message = messages[index];
        return Align(
          alignment: Alignment(alignment.x, alignment.y),
          child: SizedBox(
            width: 100.0,
            height: 100.0,
            child: MaterialButton(
              onPressed: () {
                print("Specific message: "+message.toString());
              },
              child: Container(
                width: 100.0,
                height: 100.0,
                color: Colors.pink,
                child: Text("message: "+message.toString()),
              ),
            ),
          ),
        );
      }),
    ),
  ),
)

方案2：替换为FittedBox做缩放（更推荐）

FittedBox会在布局阶段就完成尺寸调整，点击命中测试会基于缩放后的实际坐标计算，不会出现偏移或者点不到的问题：

FittedBox(
  // 根据需求选择适配模式，scaleDown是仅缩小不放大，contain是完全容纳等比缩放
  fit: BoxFit.contain,
  child: SizedBox(
    // 这里填你设计按钮布局时的原始画布尺寸
    width: 2000,
    height: 2000,
    child: Stack(
      clipBehavior: Clip.none,
      children: List.generate(data.length, (int index) {
        Alignment alignment = alignments[index];
        String message = messages[index];
        return Align(
          alignment: Alignment(alignment.x, alignment.y),
          child: SizedBox(
            width: 100.0,
            height: 100.0,
            child: MaterialButton(
              onPressed: () {
                print("Specific message: "+message.toString());
              },
              child: Container(
                width: 100.0,
                height: 100.0,
                color: Colors.pink,
                child: Text("message: "+message.toString()),
              ),
            ),
          ),
        );
      }),
    ),
  ),
)

优化提示 #

当前代码给SizedBox和MaterialButton都加了UniqueKey()，没有特殊的局部刷新需求可以删除，不必要的UniqueKey会导致组件频繁重建，影响性能。

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