QML - Creating a re-usable ListView header component - qt

Question

I've got 3 list views on a single page and I want to create a single ListView header component that I can use with each list.
So I have a ListView:
ListView {
id: listOne
spacing: 5
header: headerComponent
model: ListOneModel
}
It references the following header component:
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"
}
}
}
}
How can I make the header component re-usable so that when I connect the ListView to the header I can also pass in a different title?
I know I can change the header component and add a titleText property, like so:
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"
}
}
}
}
But how do I specify the titleText' property when using the header component in my ListView?

Answer 1

You could set a property within each listview then access that property from within the Header component.
For example:-
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

Create new file call ListHeader.qml contains your header:
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"
}
}
}
And use it like this:
ListView {
header: ListHeader{
name: "ListOneNewName"
}
}
QML docs about importing and custom types.