如何在 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 更改文本时矩形的大小都会正确。在 Text 项中使用 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 类型不支持测量换行文本。

---

编辑

对于什么是有价值的，我从来没有需要在 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 的最小大小，并且文本具有明确的拟合策略和明确的边界，由锚定定义。

Answer 2

我确信 Label 组件会完成这项工作：

import QtQuick 2.1
import QtQuick.Controls 2.4

ApplicationWindow {
    visible: true

    Column {
        Repeater {
            model: [
                {"color": "red", "radius": 1},
                {"color": "green", "radius": 2},
                {"color": "blue", "radius": 3}
            ]
            Label {
                padding: 0
                text: modelData.color
                font.family: "Helvetica"
                font.pointSize: 50
                background: Rectangle {
                   color: modelData.color
                   radius: modelData.radius
                }
            }
        }
    }
}

Answer 3

您不需要将anchors.fill: parent 用于 Text 项，因为 Text 父项的大小取决于 Text 本身的大小。这是导致绑定循环。

这一定可以正常工作。

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

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