QML Repeater

brief introduction

Repeater Is a very special and very easy to use class , It's used to create multiple based on Item The components of , Throw it to it parent（ It's usually a locator or a layout manager ） To manage . This is a Repeater and ListView There is a significant difference between the other classes .

Repeater There are three properties ,count Indicates how many bases it has created based on Item The object of ,model Specify the data model , delegate Is the component to be instantiated .delegate Is the default property , In defining Repeater Object is usually not explicitly initialized . itemAt（index） Method returns the corresponding delegate example .

Repeater The object will be created once it is instantiated by itself model All that's decided Item, This may be considered inefficient in some cases . such as model Provides 10000 Data ,Repeater Is instantiated 10000 individual delegate Components . If you're sensitive to this , have access to ListView, It creates Item It's progressive , At first it was just Create a small number of Item, Enough interface to show , When the user scrolls ListView, The ones that weren't visible Item To be displayed To create .

model Properties can take the following values :

• Numbers
• String list
• The object list
• ListModel Such as common model

Let's take a look at them one by one .

model Is the number

model Indicates when it is a number Repeater Create a specific number of components , At this time in delegate Components can access index attribute .

A simple example repeater_number.qml：

import QtQuick 2.2
import QtQuick.Layouts 1.1

Rectangle {
    width: 400
    height: 200
    color: "#EEEEEE"

    RowLayout {
        anchors.fill: parent
        spacing: 4
        Repeater {
            model: 8
            Rectangle {
                width: 46
                height: 30
                color: "steelblue"
                Text {
                    anchors.fill: parent
                    color: "black"
                    font.pointSize: 14
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                    text: index
                }
            }
        }
    }
}

model Value 8,delegate It's a built-in Text Object's Rectangle object ,Text Object display index . I use RowLayout As Repeater Of parent. The effect is shown below ：

model For a list of strings

When using a list of strings as model when ,Repeater Created Item The number depends on the length of the list , stay delegate You can go through modelData Accessing string objects .

import QtQuick 2.2
import QtQuick.Layouts 1.1

Rectangle {
    width: 300
    height: 200
    color: "#EEEEEE"

    Row {
        anchors.centerIn: parent
        spacing: 8
        Repeater {
            model: ["Hello", "Qt", "Quick"]
            Text {
                color: "blue"
                font.pointSize: 18
                font.bold: true
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                text: modelData
            }
        }
    }
}

Use here Row As Repeater Of parent.delegate It's simple , That's it. Text object . Use qmlscene load repeater_stringlist.qml, The effect is shown below ：

model For the list of objects

Use the object list as model Similar to using string lists , It's just modelData representative model Objects in the : Look directly at repeater_objects.qml：

import QtQuick 2.2

Rectangle {
    width: 320
    height: 200
    color: "#EEEEEE"

    Column {
        anchors.fill: parent
        anchors.margins: 4
        spacing: 4
        Repeater {
            model: [
                {"name":"Zhang San", "mobile":"13888888888"},
                {"name":"Wang Er", "mobile":"13999999999"},
                {"name":"Liu Wu", "mobile":"15866666666"},
            ]
            Row {
                height: 30
                Text{
                    width: 100
                    color: "blue"
                    font.pointSize: 13
                    font.bold: true
                    verticalAlignment: Text.AlignVCenter
                    text: modelData.name
                }
                Text{
                    width: 200
                    font.pointSize: 13
                    verticalAlignment: Text.AlignVCenter
                    text: modelData.mobile
                }
            }
        }
    }
}

Be careful , stay delegate within modelData Use as an object , Access its properties directly , The effect is shown below ：

model by ListModel

model It can also be ListModel perhaps QAbstractltemModel The derived class . At this time in delegate You can go through role-name visit model The data in .

repeaterlistmodel.qml Shows how to use ListModel：

import QtQuick 2.2

Rectangle {
    width: 300
    height: 200
    color: "#EEEEEE"

    Column {
        anchors.fill: parent
        anchors.margins: 4
        spacing: 4
        Repeater {
            model: ListModel {
                ListElement{
                    name: "MI4"
                    cost: "1999"
                    manufacturer: "Xiaomi"
                }
                ListElement{
                    name: "MX4"
                    cost: "1999"
                    manufacturer: "Meizu"
                }
                ListElement{
                    name: "iPhone6"
                    cost: "5500"
                    manufacturer: "Apple"
                }
                ListElement{
                    name: "C199"
                    cost: "1599"
                    manufacturer: "Huawei"
                }
            }
            Row {
                height: 30
                Text{
                    width: 120
                    color: "blue"
                    font.pointSize: 14
                    font.bold: true
                    verticalAlignment: Text.AlignVCenter
                    text: name
                }
                Text{
                    width: 100
                    font.pointSize: 14
                    verticalAlignment: Text.AlignVCenter
                    text: cost
                }
                Text{
                    width: 100
                    font.pointSize: 12
                    verticalAlignment: Text.AlignVCenter
                    text: manufacturer
                }
            }
        }
    }
}

The effect is shown below ：