Flutter：IconButton() 部分渲染在它的 Container() 之外

Question

在谈到我的 Flutter 布局/尺寸知识时，我正在努力提高自己的水平，而这篇文章是我最近观察到的让我感到困惑的东西。

我有一个 Container()，它有一个 IconButton()，它有一个来自股票 Flutter 图标集的图标，其大小作为参数传递给函数。

代码如下：

  Widget buttonGallery(double size) {
    return Container(
      color: Colors.yellow,
      child: IconButton(
        icon: Icon(
          Icons.photo,
          size: size,
          color: Colors.blue,
        ),
        onPressed: (){}, 
        },
      ),
    );
  }

大小设置为 75 后，我注意到 IconButton() 部分呈现在其父 Container() 之外。 （此行为是可见的，因为我明确地将 Container() 颜色设置为黄色以便能够看到父客户区）。见下图：

这是我的问题：

• 父小部件（在此是一个 Container()）不是应该包裹它的子小部件，这意味着子小部件不应该溢出它的父小部件吗？ （我知道应该允许这种行为的 OverflowBox() 小部件，但我不认为这里是这种情况。）
• 如果子级太大而无法容纳其父级的客户区，Flutter 不应该裁剪子级并显示指示这种情况的黄色危险线吗？
• 在处理了很多 Container() 之后，我的印象是它应该适合其子项的尺寸。我很困惑为什么它现在不这样做。

非常感谢所有帮助/建议。

/小何塞

Answer 1

IconButton 小部件根据属性 iconSize 自行调整大小。默认为 24​​，这是传递给容器的大小。

这应该为你做：

 Widget buttonGallery(double size) {
  return Container(
   color: Colors.yellow,
   child: IconButton(
    iconSize: size,
    icon: Icon(
      Icons.photo,
      size: size,
      color: Colors.blue,
    ),
    onPressed: (){}, 
    },
  ),
 );
}