listviewqmllistitem

How to add a vertical separator (a line of 1px width) for my list items in a horizontal ListView


I have put a rectangle within the delegate, which resulted in separator lines being part of tge list items themselves (which is not expected). How do I make the separators (line) independent of list items?

If I put the rectangle out of the delegate, only one line is drawn.

The purpose is to add a line between buttons (list items) in buttonbar.

My code is:

ChinoListCatalog {
    objectName : "alertButtonBar"
    id: alertButtonBar
    anchors.horizontalCenter: parent.horizontalCenter
    width: 730
    height: 66

    orientation: ListView.Horizontal
            
    delegate: AlertButton { //a separate file which returns buttons  
        id: alertButton
        width: 100
        onSignalButtonAction: alertButtonBar.onSignalButtonAction(index, action)

        Rectangle { // Separator
            colour : "white"
            height: parent.height
            visible : true
        }
    }
    boundsBehavior: Flickable.StopAtBounds
    pressDelay: 100
}

Solution

  • Maybe like this? It is a vertical ListView, but it should be easy to adapt it to a vertical one. You can also omit the line if it is the last element (height: (index === lm.count - 1 ? 0 : 1)).

    ListModel {
        id: lm
    
        ListElement {}
        ListElement {}
        ListElement {}
        ListElement {}
        ListElement {}
        ListElement {}
        ListElement {}
        ListElement {}
    }
    
    ListView {
        model: lm
    
        width: 100
        height: 200
    
        delegate: Item {
            width: 100
            height: 42
            Rectangle {
                anchors.fill: parent
                anchors.topMargin: 1
                anchors.bottomMargin: 1
                id: butt
                Text {
                    anchors.centerIn: parent
                text: index
                }
            }
            Rectangle {
                height: 1
                color: 'green'
                anchors {
                    left: butt.left
                    right: butt.right
                    top: butt.bottom
                }
            }
        }
    }
    

    The trick is, basically, not to use the button as the root element for the delegate but a separate Item in which you can arrange everything as you want it to appear.