Repeater

Элемент Repeater позволяет повторить некоторый элемент определенное количество раз. Этот элемент применяется, когда надо определить множество однотипных элементов.

Для определения набора элементов тип Repeater предоставляет свойств model, которое может принимать следующие значения:

• числовое значение - указывает на количество создаваемых элементов

• набор данных, по которым создаются элементы. В качестве набора может выступать список объектов, строк или модель типа ListModel или QAbstractItemModel

Например, нам надо определить 3 прямоугольника:

import QtQuick
import QtQuick.Layouts

Window {
    width: 280
    height: 200
    visible: true
    title: "METANIT.COM"

    Row{
        anchors.fill: parent
        padding: 5
        spacing: 5

        Repeater{
            model: 3        // повторяем элемент Rectangle 3 раза
            Rectangle{
                height: 80
                width: 80
                color: "#16a085"
            }
        }
    }
}

Создадим три разноцветных прямоугольника:

import QtQuick
import QtQuick.Layouts

Window {
    width: 280
    height: 200
    visible: true
    title: "METANIT.COM"

    Row{
        anchors.fill: parent
        padding: 5
        spacing: 5

        Repeater{
            model: ["#eb4d4b", "#16a085", "#0984e3"]    // цвет прямоугольников
            Rectangle{
                height: 80
                width: 80
                color: modelData
            }
        }
    }
}

Здесь свойство model представляет массив строк, которые представляют шестнадцатеричные цветовые коды

model: ["#eb4d4b", "#16a085", "#0984e3"]

В массиве 3 элемента, и для каждого из этих элементов создается прямоугольник. Внутри элемента (прямоугольника) мы можем получить текущее значение массива через свойство modelData. В примере выше значение этого свойства присваивается свойству color, то есть устанавливаем цвет прямоугольника.

Другой пример:

import QtQuick
import QtQuick.Layouts

Window {
    width: 280
    height: 200
    visible: true
    title: "METANIT.COM"

    Column {
        spacing: 5
        Repeater {
            model: ["С++", "C#", "Java", "Python", "JavaScript"]
            Text {
                font.pixelSize: 16
                text: "Language: " + modelData
            }
        }
    }
}

Здесь аналогично для каждого значения из массива в model создается элемент Text, для установки текста которого применяется текущее значение из массива: