Question

我在一个页面上有3个列表视图，我想创建一个var a = "abc"; function a1() { var a = "efg"; console.log(window.a); } a1()标题组件，我可以将其用于每个列表。

所以我有一个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

但是如何指定titleText＆＃39;在ListView中使用标题组件时的属性？

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

Answer 2

创建新文件调用ListHeader.qml包含您的标题：

import QtQuick 2.0
import QtQuick.Controls 1.1

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

并像这样使用它：

ListView {
    header: ListHeader{
        name: "ListOneNewName"
    }
}

关于importing和custom types的QML文档。

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

2 个答案: