Row of Text items in ListView

[IntruderExcluder]

The best way is to use ItemDelegate as delegate for ListView from QtQuick.Controls 2 with Row or RowLayout as contentItem and listen onClicked signal.

[Bob64]

Thanks - some ideas to try there.

Couple of notes:

1. TapHandler doesn't appear to be available in the version of Qt I am currently constrained to use (5.9.6).
2. Although I have ended up using RowLayout (and SplitView and such like) in some other places I always try to avoid QTQuick 1 dependencies if possible. Am I being unreasonable? Are layouts one of those things that are completely OK to mix with QtQuick 2?

[IntruderExcluder]

While Layouts are importing looks like 1.x this doesn't means that they are from Quick 1, it is because of weird versioning in QML. The one thing you should avoid is QuickControls 1.x since they are deprecated at least (and also ugly and slow).

[Bob64]

@IntruderExcluder Understood. Unfortunately I do have to use SplitView and TreeView from Controls 1 as there are no alternatives.

[GrecKo]

@Bob64 There is a SplitView in Qt Quick Controls 2 since Qt 5.13

[Bob64]

@GrecKo unfortunately I am stuck on 5.9.6 for the time being. Also, judging by some of the questions in this forum, it looks like the new SplitView isn't quite ready for production use yet anyway.

[Bob64]

I think I have tried out all of the possible ideas in this thread but they all fail in one way or another. Either they are not available to me in Qt 5.9.6, or the text stops wrapping, or the mouse area stops capturing the list item selection, or the list row heights become a uniform height rather than each one adjusting itself according to its text. This last behaviour is something that is essential for me to preserve. The best I have been able to come up with is a variation on my original code with two separate mouse areas. To avoid the small dead spot in the space between row items, I have set the spacing to 0 and instead added a leftMargin to the Text item.

[GrecKo]

@Bob64 said in Row of Text items in ListView:

I think I have tried out all of the possible ideas in this thread but they all fail in one way or another. Either they are not available to me in Qt 5.9.6, or the text stops wrapping, or the mouse area stops capturing the list item selection, or the list row heights become a uniform height rather than each one adjusting itself according to its text.

IntruderExcluder's solution should work:

import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

Window {
    id: root
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    ListModel {
        id: messageModel
        ListElement {
            message: "sadasdasdad"
            level: 1
        }
        ListElement {
            message: "sadasdaasdasdasdasdasdad"
            level: 2
        }
        ListElement {
            message: "sadasdaasdasdqweqweqwesdad"
            level: 3
        }
        ListElement {
            message: "sadasdarwerwerwerwerwerwerwerwerwesdadsadasdarwerwerwerwerwerwerwerwerwesdad"
            level: 4
        }
    }

    ListView {
        anchors.fill: parent
        model: messageModel

        delegate: ItemDelegate {
            width: root.width
            padding: 5
            contentItem: RowLayout {
                spacing: 5
                Text {
                    text: model.level
                }
                Text {
                    text: model.message
                    Layout.fillWidth: true
                    wrapMode: Text.Wrap
                }
            }
            onClicked: print(model.index)
        }
    }
}

[Bob64]

@GrecKo Thank you. That is almost there. For longer text items, the rows will adjust their height as required. However the default height of each row makes the list too spaced out for brief text items (seems to default to 40 for me). This seems like it should be a simple tweak but I haven't been able to find it yet!

[GrecKo]

That's because the implicitHeight of the ItemDelegate is based on the max of the one from its background and its contentItem.

You can ignore the background implicitHeight by adding: implicitHeight: implicitContentHeight + topPadding + bottomPadding

[Bob64]

@GrecKo Thank you so much for your help but it seems implicitContentHeight is not available in my version of Qt.

[IntruderExcluder]

@Bob64 said in Row of Text items in ListView:

@GrecKo Thank you so much for your help but it seems implicitContentHeight is not available in my version of Qt.

Use implicitHeight: contentItem.implicitHeight + topPadding + bottomPadding then.

[Bob64]

@IntruderExcluder Thank you! I thought I had tried that one but obviously not. Anyway, it works well. Thank you for this and for your original suggestion.