QML - 创建可重用的ListView标头组件

Question

我在一个页面上有3个列表视图,我想创建一个ListView可以与每个列表一起使用的单个标题组件.

所以我有一个ListView:

            ListView {
                id: listOne
                spacing: 5
                header: headerComponent
                model: ListOneModel
            }

它引用了以下标头组件:

            Component {
                id: headerComponent

                Rectangle {
                    width: ListView.view.width
                    height: 50
                    Label {
                        text: "List One"
                        font.pixelSize: 20
                        elide: Label.ElideRight
                        width: ListView.view.width
                        padding: {
                            left: 14
                        }
                        background: Rectangle {
                            color: "red"
                        }
                    }
                }
            }

如何使标题组件可重用,以便当我连接ListView到标题时,我还可以传入不同的标题？

我知道我可以更改标题组件并添加titleText属性,如下所示:

            Component {
                id: headerComponent

                property string titleText: "My Title"

                Rectangle {
                    width: ListView.view.width
                    height: 50
                    Label {
                        text: titleText
                        font.pixelSize: 20
                        elide: Label.ElideRight
                        width: ListView.view.width
                        padding: {
                            left: 14
                        }
                        background: Rectangle {
                            color: "red"
                        }
                    }
                }
            }

但是如何在ListView中使用标题组件时指定titleText'属性？

Answer 1

您可以在每个列表视图中设置属性,然后从Header组件中访问该属性.

例如:-

ListView {
    id: listOne
    property string headertitle: "list one header"
    spacing: 5
    header: headerComponent
    model: ListOneModel
}

ListView {
    id: listTwo
    property string headertitle: "list two header"
    spacing: 5
    header: headerComponent
    model: ListTwoModel
}

ListView {
    id: listThree
    property string headertitle: "list three header"
    spacing: 5
    header: headerComponent
    model: ListThreeModel
}


Component {
    id: headerComponent

    Rectangle {
        width: ListView.view.width
        height: 50
        Label {
            text: ListView.view.headertitle
            font.pixelSize: 20
            elide: Label.ElideRight
            width: ListView.view.width
            padding: {
                left: 14
            }
            background: Rectangle {
                color: "red"
            }
        }
    }
}