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

Question

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

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

I have heard that QML is easier to use. Therefore, I was expecting to solve that problem in less than five minutes. I didn't, and I'm still stuck at it. Here's what I have tried:

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")
    }
}

This doesn't work for some reason I don't understand. I have found a way to do it in a way that doesn't exactly suits my needs:

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")
    }
}

In this case, when I click the rectangle, it gets the correct width. Nevertheless, I am not interested in this solution, because I don't want to have to click to get a rectangle with the correct size.

I want that the rectangle's size gets the correct size whenever myText changes text. The use of onTextChanged in the Text item doesn't work either.

What am I missing here?

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并且文本具有清晰的拟合策略和清晰的边界，由锚定定义。