为什么这个图标被剪掉了？

Question

如您所见，右侧的人脸图标被裁剪了，我不确定为什么。

这是我的代码：

new Container(
  padding: new EdgeInsets.fromLTRB(style.wideMargin, style.wideMargin * 2,
      style.wideMargin, style.wideMargin),
  decoration: new BoxDecoration(backgroundColor: Colors.white),
  child: new Row(
    crossAxisAlignment: CrossAxisAlignment.end,
    children: [
      new Expanded(
        child: new Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            new PrecisionTextOverflow(
                'Name of a thing',
                lineWidth: style.longLineWrappingWidth,
                mainTextStyle: style.blackParagraphText),
            // Because PrecisionTextOverflow paints itself directly, the UI
            // doesn't know its size so we use a blank Text object to make the
            // column center itself correctly.
            new Text(' '),
          ],
        ),
      ),
      new Transform(
        transform:
            new Matrix4.translationValues(0.0, -style.defaultMargin, 0.0),
        child: new IconButton(
          padding: EdgeInsets.zero,
          icon: new Icon(Icons.face,
              size: style.headingText.fontSize,
              color: style.favoriteColor[isItemFavorite]),
          onPressed: favoritePressed,
        ),
      ),
    ],
  ),
)

PrecisionTextOverflow 是 class 我制作的 StatelessWidget，它使用 CustomPainter 在屏幕上绘制文本。我不认为这与手头的问题有关，仅供参考。

我试过从外容器中取出填充物，但没有用。我试过调整转换以将图标向左移动，但它只是将其以裁剪形式移动。我究竟做错了什么？我该如何纠正？

编辑： 好的，我做了一个渲染树转储，看起来封闭的行将其高度设置为 24.0，它向下传递给 IconButton，它给自己一个大小 (24.0, 24.0)。有没有办法增加行的高度？或者我应该重新考虑我的整个结构？

Answer 1

您在图标上设置 size，而不是 IconButton。如果将 size 参数移动到 IconButton，它应该可以工作。

发生的事情是 IconButton 默认为 24.0，并且由于您在无界 space 中拥有它，因此它通过 LimitedBox size-limited 变为 24.0 .然后它尝试通过 IconTheme 继承的小部件将该大小传递给 Icon，但是 Icon 已被告知忽略它并且无论如何都将大小设置为 30.0。

我会改进文档。

Answer 2

我出于不同的原因遇到了同样的问题

用固定的 height 和 width 将 IconButton 包裹在 Container 中会导致它像示例中那样剪辑。

为什么这个图标被剪掉了？

Why is this icon being clipped?

flutter