text - 如何在 QML 的矩形中包装一些文本？

Question

我必须执行一个非常简单的任务:我想在一个矩形内显​​示一段文本，该矩形的大小应该正好是文本的宽度。

在 C++ 中，这很容易做到。只需定义 QString 并应用 QFontMetrics 即可获得其宽度。然后定义矩形图形元素以具有该大小。它在五分钟内完成。

我听说 QML 更容易使用。因此，我期待在不到五分钟的时间内解决这个问题。我没有，我仍然坚持它。这是我尝试过的:

Rectangle {
    width: myText.contentWidth
    height: myText.contentHeight

    Text {
        anchors.fill:parent
        id: myText
        font.family: "Helvetica"
        font.pointSize: 50
        text:  qsTr("The string I want to display")
    }
}

由于某种我不明白的原因，这不起作用。我找到了一种不完全符合我需要的方法:

Rectangle {
    width: 100
    height: 100

    MouseArea {
       id: myMouseArea
       anchors.fill: parent
       onClicked: parent.width=myText.contentWidth 
       hoverEnabled: true
     }

    Text {
        anchors.fill:parent
        id: myText
        font.family: "Helvetica"
        font.pointSize: 50
        text:  qsTr("The string I want to display")
    }
}

在这种情况下，当我单击矩形时，它会获得正确的宽度。尽管如此，我对这个解决方案不感兴趣，因为我不想点击以获得正确大小的矩形。

我希望矩形的大小在 myText 更改文本时获得正确的大小。在文本项中使用 onTextChanged 也不起作用。

我在这里缺少什么？

Answer 1

据我所知，字体指标在 Qt 5.4 中提供给开发人员，所以它们在 QML 中相对较新。你主要有 FontMetrics 和 TextMetrics 。一个简单的使用示例:

import QtQuick 2.4
import QtQuick.Window 2.2

Window {
    visible: true
    width: 280; height: 150

    TextMetrics {
        id: textMetrics
        font.family: "Arial"
        font.pixelSize: 50
        text: "Hello World"
    }

    Rectangle {
        width: textMetrics.width
        height: textMetrics.height
        color: "steelblue"

        Text {
            text: textMetrics.text
            font: textMetrics.font
        }
    }
}

正如下面评论中的 Phrogz 所指出的， TextMetrics 类型不支持测量换行文本。

编辑
对于什么是有值(value)的，我从来没有需要在 QML 中使用指标。对我来说 content* 或 painted* 属性达到了目的，从 Qt 5.12 开始，它们似乎工作正常。又名以下两种解决方案生成正确的视觉行为:

// solution 1
Rectangle {
    width: myText.contentWidth
    height: myText.contentHeight

    Text {
        anchors.fill:parent
        id: myText
        font.family: "Helvetica"
        font.pointSize: 50
        text:  qsTr("The string I want to display")
    }
}

// solution 2
Rectangle {
    width: myText.paintedWidth
    height: myText.paintedHeight

    Text {
        anchors.fill:parent
        id: myText
        font.family: "Helvetica"
        font.pointSize: 50
        text:  qsTr("The string I want to display")
    }
}

我更喜欢这些解决方案，而不是像 OP 提出的那样，在这样一个简单的用例中使用指标。对于相反的情况 - 以特定大小拟合文本 - 属性组合可以解决问题，例如:

Rectangle {
    anchors.centerIn: parent
    width: 200
    height: 30

    Text {
        anchors.fill: parent
        text: "Wonderful Text"
        minimumPixelSize: 2
        fontSizeMode: Text.Fit
        font.pixelSize: 200
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
    }
}

这里像素大小只是超出了顶部，但文本仍然适合，因为设置了 2 的最小大小，并且文本具有清晰的拟合策略和清晰的边界，由 anchor 定定义。