QML Textwrap (maximale Breite)

Question

Ich möchte Text in eine Blase einfügen, und ich möchte, dass meine Blase gleich der Textbreite ist, aber wenn die Textlänge zu lang ist, möchte ich, dass der Text automatisch einwickelt und gleich der übergeordneten Breite ist.

Dieser Code funktioniert, aber der Text ist nicht umwickelt, wenn der Text zu lang ist:

Rectangle {
    id:messageBoxCadre
    width: (modelData.messageLength>25)? (wrapper.width - 20): messageBox.width+10
    height: messageBox.height+5
    color: modelData.myMessage ? "#aa84b2":"#380c47"
    radius: 10

    Text {
        id:messageBox
        text: '<b><font color=purple>'+modelData.message+'</font></b> '
        wrapMode: "WordWrap"
    }
}

Und ich habe es versucht, Textverpackung, aber wenn der Text zu klein ist, ist die Blasenbreite nicht gleich der Textgröße:

Rectangle {
    id:messageBoxCadre
    width: (modelData.messageLength>25)? (wrapper.width - 20): messageBox.width+10
    height: messageBox.height+5
    color: modelData.myMessage ? "#aa84b2":"#380c47"
    radius: 10

    Text {
        id:messageBox
        width: (modelData.messageLength>25)? (wrapper.width - 20): messageBox.width
        text: '<b><font color=purple>'+modelData.message+'</font></b> '
        wrapMode: "WordWrap"
    }
}

Answer 1

Du kannst fast Machen Sie dies ordentlich mit Staaten. Das Problem ist, dass der Versuch, die Breite des Elternteils einzustellen, indem sie der Painted -Width des Textfelds zugewiesen wird, bedeutet, dass die Breite des Textfelds, das die QML als Beeinflussung der Maltbreite erkennt. Es würde sich nicht weiter aufnehmen, aber QML macht immer noch Warnungen aus. Eine Möglichkeit, das Problem zu umgehen, besteht darin, wie folgt zu tun und ein unsichtbares Textfeld für Dummy zu haben, das nur herausstellt, wie weit der Text sein sollte/sollte. Es ist ein bisschen ein Hack, aber es funktioniert gut.

Sie können die Eigenschaft "When" des Status so ändern, dass sie von der Größe des Dummy -Textfelds (anstelle der Länge der Zeichenfolge) abhängig sein, wenn Sie eine Pixelgrenze für die Breite des Box bevorzugen.

import QtQuick 1.0

Rectangle {
    id: containing_rect
    property string text

    text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"
    //text: "a short string"

    Text {
        id: text_field
        anchors.top: parent.top
        anchors.left: parent.left

        height: parent.height
        width: parent.width
        text: parent.text
        wrapMode: Text.WordWrap

    }

    Text {
        id: dummy_text
        text: parent.text
        visible: false
    }

    states: [
            State {
                name: "wide text"
                when: containing_rect.text.length > 20
                PropertyChanges {
                    target: containing_rect
                    width: 200
                    height: text_field.paintedHeight
                }
            },
            State {
                name: "not wide text"
                when: containing_rect.text.length <= 20
                PropertyChanges {
                    target: containing_rect
                    width: dummy_text.paintedWidth
                    height: text_field.paintedHeight
                }
            }
        ]
}

Answer 2

Hier ist eine andere Möglichkeit, die das Skript von Komponenten verwendet. Es ist statischer als meine andere Methode, also denke ich, dass es davon abhängt, was Sie damit machen möchten.

import QtQuick 1.0

Rectangle {
    id: containing_rect
    property string text

    height: text_field.paintedHeight

    text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"
    //text: "a short string"

    Text {
        id: text_field
        anchors.top: parent.top
        anchors.left: parent.left

        height: parent.height
        width: parent.width

        text: parent.text
        wrapMode: Text.WordWrap
    }

    Component.onCompleted: {
        if (text_field.paintedWidth > 200) {
            width = 200
        } else {
            width = text_field.paintedWidth
        }
    }     
}

Answer 3

Sie können auch so etwas ausprobieren, indem Sie das oben erwähnte Dummy -Textfeld verwenden:

width: Math.min(dummy_text.paintedWidth, 250)

Dadurch wird die gemalten Größe des Textes verwendet, es sei denn, er ist größer als Ihre angegebene Pixelbreite.

Answer 4

Versuche dies:

Text {
    property int MAX_WIDTH: 400
    width: MAX_WIDTH
    onTextChanged: width = Math.min(MAX_WIDTH, paintedWidth)
}

Answer 5

Ich habe keinen Zustand verwendet, aber ich benutze die Idee des Dummy -Textes, um eine Breite zu haben. Danke

Mein Code:

                Rectangle{
                id:messageBoxCadre
                width: (modelData.messageLength>25)? (wrapper.width - 20): messageBox.width+10
                height: messageBox.height+5
                color: modelData.myMessage ? "#aa84b2":"#380c47"
                radius: 10

                Text {
                    id:messageBox
                    width: (modelData.messageLength>25)? (wrapper.width - 20): dummy_text.dummy_text
                    text: '<b><font color=purple>'+modelData.message+'</font></b> '
                    wrapMode: "WordWrap"
                }

                Text {
                      id: dummy_text
                      text: '<b><font color=purple>'+modelData.message+'</font></b> '
                      visible: false
                  }

            }

Answer 6

Offensichtlich ein paar Jahre zu spät, aber ich bin gerade auf ein ähnliches Problem gestoßen (obwohl ich Elide anstelle von Wrap verwende, aber die Grundlagen sind gleich). Am Ende hatte ich eine einfache und saubere Lösung, also dachte ich, wenn jemand anderes dieses Problem eingeht, kann es vielleicht helfen. Verwenden Sie den ursprünglichen Code als Beispiel:

        property int maxWidth: 100  // however you want to define the max width

        Rectangle{
            id:messageBoxCadre
            width: messageBox.paintedWidth+10  // width of the actual text, so your bubble will change to match the text width
            height: messageBox.height+5
            color: modelData.myMessage ? "#aa84b2":"#380c47"
            radius: 10

            Text {
                id:messageBox
                text: '<b><font color=purple>'+modelData.message+'</font></b> '
                width: maxWidth  // max width that your text can reach before wrapping
                wrapMode: "WordWrap"
            }
        }

Das einzige Problem für dieses Beispiel ist, dass bei WordWrap, wenn ein Wort zu lang ist, um die gesamte Breite des Textelements anzupassen, überall, was auch immer Sie gesetzt haben.