需要在qml listListView(水平)中为我的列表项添加垂直分隔符(1px宽度的一行)

Question

我在委托中给出了矩形。这导致分隔线成为列表项本身的一部分(这是不期望的)。请建议如何使分隔符(行)独立于列表项。如果我在委托外写矩形，只会只画直线。

目的是在按钮栏中的按钮(列表项)之间添加一行。我的代码是:

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
}

Answer 1

也许像这样?它是一个垂直的ListView，但它应该很容易适应一个垂直的。如果该行是最后一个元素(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
            }
        }
    }
}

技巧基本上是，不使用按钮作为根元素的委托，而是一个单独的项目，你可以安排你想要它出现的一切。

如果你有任何问题，请提出来。
请不要忘记检查这个答案，如果它是你正在寻找的。

问候- m -

Answer 2

    ListModel {
        id: lm
        ListElement {} ListElement {} ListElement {} ListElement {}
    }
    Rectangle
    {
        width : 200
        height : 100
        anchors.centerIn: parent
    ListView {
        model: lm
        anchors.left: parent.left
        width: 400
        height: 50
        orientation : ListView.Horizontal
        delegate: Item {
            width: 51
            height: 60
            Rectangle {
                anchors.fill: parent
                anchors.rightMargin: 1
                anchors.topMargin : 10
                id: butt
                Rectangle {
                    anchors.centerIn: parent
                width : 50
                height : 50
                color :'blue'
                radius : 10
                }
                Rectangle {
                    id : leftOne
                    height: 50
                    width: 1
                    color: 'red'
                    visible : (index < 3) //last element in the list should not have separator
                    anchors {
                        left: butt.right
                    }
                }
            }
        }
        //spacing : 2
    }
 }