QML에서 일부 텍스트를 사각형으로 감싸는 방법은 무엇입니까?

내가 아는 한 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부터는 잘 작동하는 것으로 보입니다. 일명이 :

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: 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 의 최소 크기 때문에 여전히 맞습니다.  이 설정되고 텍스트에 앵커에 의해 정의 된 명확한 맞춤 정책과 명확한 경계가 있습니다.

라벨 구성 요소가 작업을 수행 할 것이라고 확신합니다.

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