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

Rea*_*nkm 5 flutter

在此处输入图片说明

如您所见,右侧的人脸图标被剪掉了,我不知道为什么。

这是我的代码:

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,
        ),
      ),
    ],
  ),
)
Run Code Online (Sandbox Code Playgroud)

PrecisionTextOverflow 是一个由 StatelessWidget 组成的类,它使用 CustomPainter 在屏幕上绘制文本。我不认为它与手头的问题有关,但仅供参考。

我试过从外部容器中去除填充物,但没有帮助。我已经尝试调整转换以将图标向左移动,但它只是将其以剪切形式移动。我究竟做错了什么?我该如何纠正?

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

Ian*_*son 7

您在sizeIcon 上设置,而不是IconButton. 如果您将size参数移到IconButton它应该工作。

发生的事情IconButton是默认为 24​​.0,并且由于您将它置于无限空间中,因此通过LimitedBox. 然后它尝试Icon通过IconTheme继承的小部件将该大小传递给,但Icon已被告知忽略该大小并无论如何都将大小设为 30.0。

我会改进文档。

  • 文档很糟糕。我已经根据这次谈话改进了它们。:-) (2认同)