QML UI Component Of Flat UI

Introduce the usage and application scenarios of the Repeater.

The Repeater control is used to create a large number of similar items . Similar to other view controls (ListView, PathView). Simply using the Repeater control does not have much effect, and it is generally used with layout controls (Row, Column, Grid).

simple example

• Use the Repeater to create three Rectangles, and expose data to them through the model array, and finally use the Row horizontal layout to display.

Row {
    Repeater {
        model: ["yellow", "yellow", "yellow"]

        Rectangle {
            width: 80; height: 50
            color: modelData
        }
    }
}

• Effect:

Documentation

1. Attributes:

• count: How many instance items in total.
• delegate: The delegate item used for interface display (this tag can be omitted when there is only one control under the Repeater).
• model: data model item, used to provide data support for delegate.

1. Signal:

• itemAdded(int index, Item item): This signal is triggered when an item is added to the Repeater.
• itemRemoved(int index, Item item): This signal is triggered when an item in the Repeater is removed.

1. method:

• Item itemAt(index): Find the item of Repeater by subscript.

scenes to be used

• Repeater is more useful for displaying multiple repetitions, not for interaction (sliding).
• It is only used in the case of relatively few items, and using Repeater instead of ListView and other view items will improve performance.

complex example

ListModel {
    /* data item*/
    id: myModel
    ListElement { colour: "red"; }
    ListElement { colour: "blue"; }
    ListElement { colour: "green"; }
}

Component {
    /* surrogate (instance)*/
    id: myDelegate
    Rectangle {
        width: 80; height: 50
        color: colour /* Obtained through data item (model) mapping。*/

        MouseArea {
            anchors.fill: parent
            /* Click to add a data item, and the interface will display one more item。*/
            onClicked: myModel.append({colour: "lightblue"})
        }
    }
}

Row {
    Repeater {
        id: repeater
        model: myModel
        delegate: myDelegate
        onItemAdded: console.log("Add Item.", index, item.color)
        onItemRemoved: console.log("Remove Item.", index, item.color)
    }
}