Mode-View Concepts of QML
← Qt Model-View Example | ● | JNI →
In QML the appearance of each model’s items is provided with a Component. A special behavior of a delegate is, that the models’ properties are auto-magically assigned to the according delegate:
ListModel
{
id: listmodel
ListElement
{
name: "Apple"
cost: 0.2
}
ListElement
{
name: "Banana"
cost: 0.4
}
ListElement
{
name: "Orange"
cost: 0.3
}
}
Component
{
id: listdelegate
Row
{
Text { text: " Fruit: " + name }
Text { text: " Cost: $" + cost }
}
}
ListView
{
model: listmodel
delegate: listdelegate
anchors.fill: parent
}
In the above example, the delegate of the list view is connected to the list model, which means that auto-magically the properties of the model - namely ‘name’ and ‘cost’ become properties of the respective component. Now the component can use the properties to provide a graphical representation of the data. In this example it is just two rows of text.
Here is a more advanced use of Components by means of a stack view. A stack view is a ordered set of views, where the topmost view is visible. Each view is provided as a Component.
In the following example, we show a gallery of images. When clicking on an image, a new view is created on top of the stack that shows the entire image. When double clicking the topmost view is removed again:
id: stack
anchors.fill: parent
initialItem: baseview
property string path: "some file path"
Component {
id: baseview
Gallery {
id: gallery
anchors.fill: parent
folder: "file://" + path
onClicked: {
if (file != "") {
stack.push({item: popupview, properties: {path: file}})
}
}
onDoubleClicked: {
stack.back()
}
}
}
Component {
id: popupview
Rectangle {
id: popup
anchors.fill: parent
property string path
Image {
id: popupimage
source: popup.path
asynchronous: true
width: parent.width
height: parent.height
fillMode: Image.PreserveAspectFit
autoTransform: true
smooth: true
}
BusyIndicator {
anchors.centerIn: parent
running: popupimage.status == Image.Loading
}
}
}
}
← Qt Model-View Example | ● | JNI →