Как обернуть некоторый текст в прямоугольник в QML?

text qml wrap

4352 просмотра

2 ответа

Я должен выполнить очень простую задачу: я хочу отобразить фрагмент текста внутри прямоугольника, и размер этого прямоугольника должен быть точно шириной текста.

В 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 в элементе Text также не работает.

Что мне здесь не хватает?

Спасибо за вашу помощь ...

Автор: Laurent Michel Источник Размещён: 17.05.2019 04:01

Ответы (2)


3 плюса

Решение

Насколько мне известно, метрики шрифтов были доступны разработчикам в 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типе не поддерживает измерения выделенного текста.

Автор: BaCaRoZzo Размещён: 28.03.2015 07:36

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

введите описание изображения здесь

Автор: Senyai Размещён: 17.10.2018 04:59
Вопросы из категории :
32x32