Using a List on QML is a neat way to organize options, information ect.
First we start with the Flickable (It doesn't really need one but it let's you scroll when you run our of space):
This includes a Column to keep it in shape, this one is simple anchors to fill the parent component.
Flickable {
id: flickable1
anchors.fill: parent
contentHeight: list.height
contentWidth: list.width
Column {
id: list
}
}
Now after that you can make a ListHeading as so, this one has the text anchored to the center of the ListHeading:
ListHeading {
id: head
ListItemText {
id: headingText
anchors.centerIn: parent
role: "Heading"
text: "TEXT GOES HERE"
}
}
Now you can add a ListItem with Text, again this one is anchored to center into the Item (Looks better in my opinion)
ListItem {
id: list1
enabled: true
onClicked:{ Console.log("List clicked)
}
ListItemText {
role: "Title"
text: "Click Me"
anchors.centerIn: parent
}
}
You need to place the ListItem's between the Column like so:
Flickable {
id: flickable1
anchors.fill: parent
contentHeight: list.height
contentWidth: list.width
Column {
id: list
ListHeading {
id: head
ListItemText {
id: headingText
anchors.centerIn: parent
role: "Heading"
text: "TEXT GOES HERE"
}
}
ListItem {
id: list1
enabled: true
onClicked:{ Console.log("List clicked)
}
ListItemText {
role: "Title"
text: "Click Me"
anchors.centerIn: parent
}
}
}
}