[Solved] Background for Text in QML

[Iktwo]

Hi, I wanted to implement background for a Text element, I tried different things, I got one solution working, but it is not optimal.

First idea was a rectangle filling the Text, this might sound like a solution, doesn't work for more than 1 line.

So a friend suggested splitting the string into characters, and then filling that Text element, which will be only 1 character with a Rectangle, then getting all this in a Flow, and this works fine, but then it will wrap at the Flow's width, so text will be messed up.

Then I was very happy that there's a lineLaidout signal, I was even more excited when I saw you can get the line number, x, y, width and height, but I was quickly dissapointed when I saw the actual implementation, x will always be 0, according to docs this is ment for repositioning lines, but let's say you have aligning by horizontally center, x will still be 0, y will be fine, source code says that it's just line number * line height, width, if your Text has width, it will be that, if not, it will be maximum integer (INT_MAX), so my original idea was that if I could the line's width I would be able to have a Repeater in a Column, I would construct the model with number and data of lines, and position my background, but with lineLaidout this is not possible, it is also not possible to get the line's text.

Those were my attemps, does anyone have a suggestion?

this is the effect I'm trying to achieve, http://imgur.com/ed23CO4 obviously with wrapping by word, not at any point.

Thanks!

[Gennon]

Ok, how about using the TextEdit controller instead of Text:

http://qt-project.org/doc/qt-5/qml-qtquick-textedit.html#selectionColor-prop

Then you could set selectionColor and set selectionStart = 0 and selectionEnd = text.length.

Have not tried it, but it might work.

[p3c0]

How about this ?
@
Item {
width: 400
height: 400

property string mytext: "This is a sample text\nThis is a\nsample text\nThis is a sample\ntext"

Repeater {
    model: mytext.split("\n").length
    Rectangle {
        width: t.width
        height: t.height
        y: index*height
        color: "red"
        Text {
            id: t
            text: mytext.split("\n")[index]
            anchors.centerIn: parent
        }
    }
}

}
@

The only problem here is you have to introduce at split character (here \n) between the original string.

[Iktwo]

[quote author="Gennon" date="1407135401"]Ok, how about using the TextEdit controller instead of Text:

http://qt-project.org/doc/qt-5/qml-qtquick-textedit.html#selectionColor-prop

Then you could set selectionColor and set selectionStart = 0 and selectionEnd = text.length.

Have not tried it, but it might work. [/quote]

Thanks! it looks exactly as I need it, now I only need to block all mouse interaction, I don't want to put a mouse area filling this, do you have any suggestions on what else is missing? I have this and selection is still lost when I click on it

@
readOnly: true
persistentSelection: true
selectByKeyboard: false
cursorVisible: false
activeFocusOnPress: false
@

[Gennon]

Hi again.

If you are not going do to anything with the text, then you could try to just set enabled = false.

@
TextEdit {
enabled: false
text: qsTr("Hello World")
anchors.centerIn: parent
selectedTextColor: "yellow"
selectionColor: "black"

    Component.onCompleted: selectAll();

}
@

At least that worked fine for me.