为啥这个图标被剪掉了?

Posted

技术标签:

【中文标题】为啥这个图标被剪掉了?【英文标题】:Why is this icon being clipped?为什么这个图标被剪掉了? 【发布时间】:2017-06-03 09:55:26 【问题描述】:

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

这是我的代码:

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 是一个由 StatelessWidget 组成的类,它使用 CustomPainter 在屏幕上绘制文本。我认为这与手头的问题无关,仅供参考。

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

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

【问题讨论】:

我将从转储渲染树开始(如果您使用的是flutter run,则为“t”,或者从package:flutter/rendering.dart 调用debugDumpRenderTree())。这可能会让您知道谁在进行剪辑。 该行可能根据 IconButton 自行调整大小(大小在子项布局后设置)。如果您将渲染树转储上传到某个地方,我们可以查看它,看看它是否说明了任何有用的信息。 这里是一个带有渲染树转储的 txt 文件的链接。 Google Docs 无法正确显示行字符,因此如果您在常规文本编辑器中打开它,它会正确显示:drive.google.com/a/google.com/file/d/… 该日志中有很多图标按钮。哪一个有问题? 哦,我明白了。我会发布一个答案。 :-) 【参考方案1】:

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

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

我会改进文档。

【讨论】:

文档很糟糕。我已经根据这次谈话改进了它们。 :-)【参考方案2】:

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

使用固定的heightwidthIconButton 包裹在Container 中可能会导致它像示例中那样被剪辑。

【讨论】:

以上是关于为啥这个图标被剪掉了?的主要内容,如果未能解决你的问题,请参考以下文章

我在 iPHone 上的 Quartz 绘图在旋转后被剪掉了!

Android TextView 的下标被剪掉

我不希望 TextView 的最后一个字被剪掉一半

iOS 13 UITableViewCell |子视图被剪掉

MPAndroidChart - 图例标签被切断

WPF 裁剪问题