CODEWITHSUNDEEP
qtqmlqt5qtquick2
Dmitrii Volosnykh
Dmitrii Volosnykh

Reputation: 1185

How to set custom separator between items of ListView

Is there a way to use custom delegate as a separator between every two consecutive items of ListView just like header and footer properties?

Upvotes: 7

Views: 5585

Answers (3)

Israel Lins Albuquerque
Israel Lins Albuquerque

Reputation: 94

Put your item inside a ColumnLayout with a Rectangle like this above:

ListView {
    id: list
    clip: true
    model: ...
    spacing: 3
    Layout.fillHeight: true
    Layout.fillWidth: true

    delegate: ColumnLayout {
        width: list.width
        spacing: list.spacing

        MyItemDelegate {
            ...
        }

        Rectangle {
            color: "#999999"
            Layout.preferredHeight: 1
            Layout.fillWidth: true
            visible: (index !== (list.count - 1))
        }
    }
}

This ensures the separator appears between items, rather than just after the last item. Additionally, this approach allows you to maintain the intended functionality of the sections.

Upvotes: 4

BaCaRoZzo
BaCaRoZzo

Reputation: 7682

A ListView can be divided in sections, aka groups. The documentation provides a nice example here.

Basically you define a Component, much like you do for Header and Footer, and set it in the section.delegate subproperty. In code:

ListView {
        id: view
        [...]

        section.property: "size"                    // <--- the splitting property name
        section.criteria: ViewSection.FullString    // <--- specify the way section is created (see the provided link)
        section.delegate: sectionDelegate           // <--- your delegate
    }

Upvotes: 4

ianbroad
ianbroad

Reputation: 111

I just added:

Text {
    text: "____________________________________________"
    color: "black"
}

To the end of my Item.

Upvotes: 0

Related Questions