[Interest] Text elide with custom layout

Dmitry Volosnykh dmitry.volosnykh at gmail.com
Mon Jan 19 16:22:11 CET 2015


Hello, everyone!

What I am trying to achieve is making a some kind of details widget which
contains an image located at the top right corner and remaining area is
used to display a list of properties, i.e. grid with left column containing
name of the property and the right one contains its value. Since the number
of properties may be very large there are two modes for details widget,
say, 'concise' and 'more'. 'Concise' mode allows each property to have only
one line of text, and the 'more' mode allows a bigger number of lines. In
any case, it is possible that the text does not fit in the number of lines
provided. So, elide mode is always on.

With text's width set in a straightforward manner eliding works okay for
one line and for several lines per text element. However, when I try to
implement custom layout via lineLaidOut handler (I need this to wrap image
nicely to take an advantage of the space below it), ellipsis appears only
when the last word fits only partially. But I need it every time the full
string does not fit in the number of lines provided.

Here is an example. Press space to toggle 'concise' and 'more' modes. The
difference in behavior I am talking about may be seen comparing rendering
results with customLayout property being set to 'false' and 'true'
accordingly.

import QtQuick 2.2

ListView {
    readonly property bool customLayout: false

    property bool concise: true
    focus: true

    model: ListModel {
        ListElement {
            text: "one two three four five six seven eight night ten eleven
twelve"
        }
        ListElement {
            text: "one two three four five six seven eight night ten eleven
twelve"
        }
        ListElement {
            text: "one two three four five six seven eight night ten eleven
twelve"
        }
        ListElement {
            text: "one two three four five six seven eight night ten eleven
twelve"
        }
        ListElement {
            text: "one two three four five six seven eight night ten eleven
twelve"
        }
    }

    delegate: Text {
        text: model.text
        width: customLayout ? parent.width : (index + 1) * 30
        wrapMode: Text.Wrap
        maximumLineCount: concise ? 1 : 3
        elide: Text.ElideRight
        onLineLaidOut:
            if (customLayout) {
                line.width = (index + 1) * 30
                console.log("index:", index, "width:", line.width)
            }

        Rectangle {
            anchors.fill: parent
            z: -1
            color: Qt.rgba((index + 1) * 0.1, 0, 0, 0.5)
        }
    }

    Keys.onSpacePressed: concise = !concise
}

The question is whether this is right behavior and, thus, I've missed
something, or is this a bug?
What I expected is that the results will be identical in respect of
ellipsis being present or not.

Regards,
Dmitry.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20150119/253e5976/attachment.html>


More information about the Interest mailing list