时间戳

首页 > 解决方案 > 容器中的图标按钮溢出

flutter - 容器中的图标按钮溢出

问题描述

我正在编写一个简单的红色容器，里面有一个简单的图标，一切正常。

Container(
  color: Colors.red,
  child: Padding(
      padding: EdgeInsets.fromLTRB(170, 0, 0, 0),
      child: Icon(Icons.wifi_lock, color: Colors.lightBlue, size: 150)
  ),
),

带有背景颜色的图标

但是，如果我将其与 IconButton 一起使用，则此按钮会溢出容器。

Container(
  color: Colors.red,
  child: Padding(
      padding: EdgeInsets.fromLTRB(170, 0, 0, 0),
      child: IconButton(
          icon: Icon(Icons.wifi_lock, color: Colors.lightBlue, size: 150),
          onPressed: (){}
      )
  ),
),

带有背景颜色的图标按钮

我不明白这种行为以及如何解决它。感谢你！

标签： flutter

解决方案

因此，您正在做的是在图标内设置大小，如下所示：

Container(
  color: Colors.red,
  child: Padding(
      padding: EdgeInsets.fromLTRB(170, 0, 0, 0),
      child: IconButton(
          icon: Icon(Icons.wifi_lock, color: Colors.lightBlue, size: 150),
          onPressed: (){}
      )
  ),
),

所以这是增加图标而不是按钮的大小，这就是为什么有溢出并且图标在容器之外的原因。但是，如果您需要修复它，请改用以下代码

Container(
  color: Colors.red,
  child: Padding(
      padding: EdgeInsets.fromLTRB(170, 0, 0, 0),
      child: IconButton(
          iconSize: 150,
          icon: Icon(Icons.wifi_lock, color: Colors.lightBlue,),
          onPressed: (){}
      )
  ),
),

删除size: 150图标内的参数，而是将参数放在语句iconSize: 150上方或下方的按钮内。icon: Icon(Icons.wifi_lock, color: Colors.lightBlue),这应该可以解决问题，您将获得所需的结果。您不需要移除填充，因为它不会影响容器外的溢出。

推荐阅读