如何在不影响布局的情况下增加 Container 的大小？答案

【问题标题】：How do I increase the size of a Container without affecting the layout?如何在不影响布局的情况下增加 Container 的大小？
【发布时间】：2021-03-29 02:54:09
【问题描述】：

我有这个自定义键盘：

当一个键被按下时，我希望它增大而不影响它周围其他键的位置。

键盘的结构如下：

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(),
  ),
);

【问题讨论】：

标签： flutter dart mobile flutter-layout

【解决方案1】：

您可以使用Transform.scale Widget 构造函数来缩放child Widget:

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

【讨论】：