QML 使用多行文本流中最后一行的剩余宽度答案

【问题标题】：QML use remaining width of last line in a Flow with multi-line TextQML 使用多行文本流中最后一行的剩余宽度
【发布时间】：2017-11-13 16:35:15
【问题描述】：

在 QML 中，我想将一些文本放入有限的空间中。此文本包含本地化、静态和可变部分（文件名）。可变部分可能太长而无法放入我拥有的空间，如果发生这种情况应该省略。第一部分允许换行，并且本地化可能会这样做，也可能不会。

我现在的问题如下：两个文本都在 Flow 容器中，目的是将文件名附加到静态文本。但是，如果第一个文本部分换行，则整个文本将具有我可用的最大宽度，并且文件名将放在新行上，即使第一部分的最后一行没有完全填满空间。看这张图片：

代码：

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

是否可以使用最后一行的剩余空间？

编辑：这就是它的外观：

【问题讨论】：

你能在你想要的样子上添加一张图片吗？
我更新了问题

标签： qt text formatting qml string-formatting

【解决方案1】：

我想出的唯一方法是非常hacky。

问题是，Text 是一个对象，周围有一个矩形边界框。 Flow 使用此边界框进行定位。

我的 hacky 解决方案背后的想法是，将文本分解为单个单词，然后由 Flow 定位。现在Flow 知道最后一个单词在哪里结束，因此可以将下一个Text 放在后面。

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

【讨论】：