Shellfish

Class: Repeater

core.Repeater

Class representing a repeater.

The repeater is a lightweight element that creates a dynamic set of children from its delegate template according to a list model.

The repeater is not a visual element. The children are created within the parent container.

Example: Shui code

Box {
    Repeater {
        model: ListModel { data: sequence(0, 3) }
        delegate: template Label {
            text: "Label #" + modelData.index
        }
    }
}

Usually the repeater creates all of its child elements at once. However, by changing the dynamicItems property, you can make it create or destroy elements dynamically.

Example: Create children dynamically

Box {
    overflowBehavior: "scroll"

    // reserve space for contents
    Box {
      width: theme.itemWidthLarge
      height: 150 * theme.itemHeightMedium
    }

    Repeater {
        model: ListModel { data: sequence(0, 150) }

        // create children that are inside the viewport
        dynamicItems: model.data.map((v, idx) => idx).filter(
            idx => (idx + 1) * theme.itemHeightMedium > thisBox.contentY &&
                   idx * theme.itemHeightMedium < thisBox.contentY + thisBox.bboxHeight
        )

        delegate: template Label {
            position: "free"
            y: modelData.index * theme.itemHeightMedium
            text: "Label #" + modelData.index
        }
    }
}

new core.Repeater ()

repeater.js:94
Properties:
Name Type Description
count number

[readonly] The amount of items.
delegate fengshui.Template

(default: null) The delegate template. This does not need to be a visual element.
dynamicItems Array.<number>

(default: null) A list of the index numbers of children to be created dynamically. Children not in this list get destroyed. If null, all children get created at once.
items Array.<core.Object>

[readonly] The list of items.
model core.ListModel

(default: null) The list model. You may pass a number value to implicitly create a simple model.

Extends