我在一个页面上有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'属性?
您可以在每个listView中设置属性,然后从标题组件中访问该属性。
例如: -
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"
}
}
}
}
创建新文件调用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"
}
}
QML文档有关导入和自定义类型。