QML use remaining width of last line in a Flow with multi-line Text

user_5100603 0
Viewed 860

In QML, I want to fit some text into a limited amount of space. This text contains a localised, static and a variable part (a filename). The variable part is potentially too long to fit into the space I have and should be elided if that happens. The first part is allowed to wrap to a new line and being localised might do so or not.

My problem right now is the following: Both texts are in a Flow container, with the aim of appending the filename to the static text. However, if the first text part wraps, the whole text has the maximum width I have available and the filename will be put on a new line, even though the last line of the first part doesn't completely fill the space. See this image:

filename wrapping to new line, even though last line is not filled

The code: 

Flow {
    width: parent.width
    spacing: 4
    Text {
        width: (contentWidth <= parent.width) ? contentWidth : parent.width
        text: qsTr("A string that might or might not wrap, depending on localisation")
        wrapMode: Text.WordWrap
    }
    Text {
        width: (contentWidth <= parent.width) ? contentWidth : parent.width
        text: fileName
        color: customColor
        elide: Text.ElideMiddle
        // ... more options
        MouseArea {
            anchors.fill: parent
            onClicked: //stuff
        }
    }
}

Is it possible to use the remaining space of the last line?

EDIT: This is how it's supposed to look:

how the text should be formatted

qml string-formatting formatting qt text
1 Answers

The only way I came up with is very hacky.

The problem is, the Text is one object, with a rectangular bounding box around. This bounding box is used by the Flow for the positioning.

The idea behind my hacky solution is, to break up the text in single words, that are then positioned by the Flow. Now the Flow knows where the last word ended and therefore is able to place the next Text right behind that.

Flow {
    id: flw
    property string text: "Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    width: 300
    spacing: fnt.advanceWidth(' ')

    FontMetrics {
        id: fnt
    }

    Repeater {
        id: rep
        model: flw.text.split(' ')
        delegate: Text {
            font: fnt.font
            text: modelData
        }
    }

    Text {
        text: "C:/Some/Path/To/The/File/In/Question/File.extension"
        color: 'green'
        width: {
            var neighbor = rep.itemAt(rep.count - 1)
            parent.width - neighbor.x - neighbor.width - parent.spacing
        }
        elide: Text.ElideMiddle
    }
}
user_20564520
Related