Flutter中如何在不影响布局的前提下增大自定义键盘按键的Container尺寸

需求背景 #

• 已完成一款自定义键盘开发，按键效果参考：
  
• 交互目标：按键被按下时尺寸增大，整个过程不挤占、偏移周围其他按键的固定位置。

现有代码结构 #

单按键组件 keyboard_key.dart #

return GestureDetector(
  onTapDown: _handleOnTapDown,
  onTapUp: _handleOnTapUp,
  onTapCancel: _handleOnTapCancel,
  child: Container(
    height: keyHeight,
    width: keyWidth,
    margin: EdgeInsets.all(keySpacing),
    decoration: _boxDecoration(),
    child: Center(
      child: Text(
        letter,
        style: _textStyle(),
      ),
    ),
  ),
);

按键行容器 keyboard_row.dart #

return Container(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: rowLetters.split('').map<Widget>((String ch) {
      return KeyboardKey(ch);
    }).toList(),
  ),
);

键盘整体容器 keyboard.dart #

return Container(
  padding: EdgeInsets.only(
    left: 1.0,
    right: 1.0,
    top: 8.0,
  ),
  child: Column(
    children: _rows.map<Widget>((row) => KeyboardRow(row)).toList(),
  ),
);

问题解决方案 #

如果直接修改按键的width/height属性实现放大，会触发整个Row的重新布局计算——这类属性属于布局占位参数，尺寸变化会直接挤压相邻按键的位置，无法实现需求。
正确的实现思路是跳过布局计算环节，直接在绘制层做缩放变换：

1. 在按键组件内维护_isPressed状态标记，在手势回调中同步更新标记值
2. 使用AnimatedScale组件包裹原按键Container，根据按下状态动态设置缩放比例
3. 内置的动画过渡效果可以让缩放更顺滑，不需要额外编写动画逻辑

修改后的按键组件参考代码：

// 组件内新增状态变量
bool _isPressed = false;

return GestureDetector(
  onTapDown: (details) {
    setState(() => _isPressed = true);
    _handleOnTapDown(details);
  },
  onTapUp: (details) {
    setState(() => _isPressed = false);
    _handleOnTapUp(details);
  },
  onTapCancel: () {
    setState(() => _isPressed = false);
    _handleOnTapCancel();
  },
  child: AnimatedScale(
    // 按下时放大10%，松开恢复原尺寸
    scale: _isPressed ? 1.1 : 1.0,
    duration: const Duration(milliseconds: 100),
    child: Container(
      height: keyHeight,
      width: keyWidth,
      margin: EdgeInsets.all(keySpacing),
      decoration: _boxDecoration(),
      child: Center(
        child: Text(
          letter,
          style: _textStyle(),
        ),
      ),
    ),
  ),
);

这种实现下，缩放效果只作用于最终的像素绘制环节，完全不改变按键的实际占位尺寸，周围的按键组件不会感知到变化，自然不会出现位置偏移。

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