17

バブルの中にテキストを入れたいので、バブルをテキストの幅と同じにしたいのですが、テキストの長さが長すぎる場合は、テキストを自動的に折り返して親の幅と同じにします。

このコードは機能しますが、テキストが長すぎる場合、テキストは折り返されません。

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

これを試してみましたが、テキストの折り返しですが、テキストが小さすぎると、バブルの幅がテキストのサイズと等しくなりません。

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

7 に答える 7

10

あなたは州でこれをほとんどきちんと行うことができます。問題は、親の幅をテキストボックスのpaintedWidthに割り当てて設定しようとすると、QMLがpaintedWidthに影響を与えると検出したテキストボックスの幅を設定することを意味します。これ以上再発することはありませんが、QMLは警告を発します。この問題を回避する1つの方法は、次のようにして、テキストの幅/幅を計算するダミーの非表示のテキストボックスを用意することです。ちょっとしたハックですが、うまく機能します。

ボックスの幅にピクセル制限を設定したい場合は、状態の「when」プロパティを（文字列の長さではなく）ダミーのテキストボックスのサイズに依存するように変更できます。

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
                }
            }
        ]
}
于 2011-06-15T08:37:26.307 に答える
5

Component.onCompletedスクリプトを使用する別の方法があります。他の方法よりも静的なので、何をしたいかによると思います。

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
        }
    }     
}
于 2011-06-15T09:26:10.090 に答える
3

上記のダミーテキストボックスを使用して、次のようなことを試すこともできます。

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

これは、指定されたピクセル幅より大きくない限り、テキストのペイントされたサイズを使用します。

于 2011-08-30T15:19:43.857 に答える
3

パーティーには非常に遅れていますが、クリーンな解決策は、埋め込まれたTextMetricsオブジェクトを使用することです。このような：

...
Text {
  id: textObj
  width: Math.min(textWidth, myThreshold)

  // access to binding-loop-free width and height:
  readonly property alias textWidth: textMetrics.boundingRect.width
  readonly property alias textHeight: textMetrics.boundingRect.height

  TextMetrics {
    id: textMetrics
    font: textObj.font
    text: textObj.text
    elide: textObj.elide
  }
}
于 2020-08-18T15:45:14.997 に答える
2

これを試して：

Text {
    property int MAX_WIDTH: 400
    width: MAX_WIDTH
    onTextChanged: width = Math.min(MAX_WIDTH, paintedWidth)
}
于 2012-11-26T18:31:27.353 に答える
0

状態は使用しませんでしたが、幅を持たせるためにダミーテキストのアイデアを使用します。ありがとう

私のコード：

                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
                  }

            }
于 2011-06-15T12:08:19.130 に答える
0

明らかに数年遅れていますが、私はちょうど同様の問題に遭遇しました（私はラップの代わりにエリドを使用していますが、基本は同じです）。結局、シンプルでクリーンな解決策のように見えるので、他の誰かがこの問題に遭遇した場合、それが役立つかもしれないと考えました。例として元のコードを使用する：

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

この例の唯一の問題は、WordWrapを使用すると、単語が長すぎてテキストアイテムの幅全体に収まらない場合、設定したmaxWidthを超えることです。

于 2014-06-05T16:25:23.330 に答える