如何根据文本的大小在QML中制作标签大小？

Question

我无法让标签的高度正好和字体的高度一致，底部有空隙。你能告诉我如何删除它吗？ my label image

Label
{
  id: autoLabel
  leftInset: 0
  topInset: 0
  bottomInset: 0

  background: Rectangle
  {
    anchors.bottomMargin: 0
    color: "white"
    border.width: 0
  }

  Text
  {
    id: autoText
    anchors.fill: autoLabel
    anchors.leftMargin: 0
    anchors.topMargin: 0
    anchors.bottomMargin: 0
    color: PendulumStyle.primaryTextColor
    text: "AUTO"
    font.family: PendulumStyle.fontFamily
    font.pixelSize: 35
    font.styleName: "Bold"
    padding: 0
  }
  width: autoText.contentWidth
  height: autoText.contentHeight

  x: mainRectangle.x + 30
  y: checkBox.y - checkBox.height / 2
}

Answer 1

标签实际上是你字体的大小。您正在使用的文本只是不显示它。字体具有基线上方和下方 ascent 和 descent 的概念。

ascent 是从基线到最高字符顶部的距离，descent 是从基线到最低字符底部的距离。（这些可能不是技术定义，但至少我是如何看待它们的。即可能仍然有填充等）因此，字体的总高度应该是 (ascent + descent).

在您的例子中，您使用了“AUTO”这个词。 None 这些字符低于基线。但是无论您使用什么文字，字体高度都保持不变。

如果您仍然希望您的矩形刚好适合单词“AUTO”，那么它应该只使用上升高度，而忽略下降。为此，QML 提供了一个可以帮助您的 FontMetrics 对象。

    Label
    {
        id: autoLabel
        width: autoText.contentWidth
        height: fm.ascent

        FontMetrics {
            id: fm
            font: autoText.font
        }

        background: ...

        Text
        {
            id: autoText
            text: "AUTO"
            font.family: PendulumStyle.fontFamily
            font.pixelSize: 35
            font.styleName: "Bold"
        }
    }

如何根据文本的大小在QML中制作标签大小？

How to make the label size in QML according to the size of the text?

label

qml