如何用QML在矩形中包装一些文本?

时间:2015-03-28 18:32:16

标签: text qml textwrapping

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

在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也不起作用。

我在这里缺少什么?

3 个答案:

答案 0 :(得分:3)

据我所知,在Qt 5.4中,开发人员可以使用Font指标,因此它们在QML中相对较新。你主要得到FontMetricsTextMetrics。一个简单的用法示例:

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类型不支持衡量包装文字。

答案 1 :(得分:0)

我确定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
                }
            }
        }
    }
}

enter image description here

答案 2 :(得分:0)

您不需要为 Text 项目使用 anchors.fill: parent,因为 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")
    }
}