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