qmlBook learning: 02_1 Basic Model: Column
The most basic way to separate data and display is to use the Repeater element. It is used to instantiate a set of element
items and is easily combined with a locator used to populate the user interface.
The most basic implementation example, the repeater element is used to implement the label of the child element. Each child element has an
accessible property index , which is used to distinguish different child elements. In the example below, a repeater element
creates 10 children, and the number of children is controlled by the model attribute. For each child Rectangle contains
a Text element, you can set the text property to the value of index , so you can see that the number of children is
0~9 .
This is a nice numbered list, sometimes we want to display some more complex data. Using a
JavaScript sequence to replace the value of the integer variable model can achieve our purpose. Sequences can use any
type of content, be it strings, integers, or objects. In the example below, a linked list of
strings . We still use the value of index as a variable, and we also access the data for each modelData
Expose the data as a set of sequences, and you can quickly find the information you need by labeling. Imagine
a sketch of this model. This is the simplest model, and the most commonly used model , ListModel . A linked list model consists of many ListElements . Within each linked list element, you can bind values to properties. For example, in the following example, each element is provided with a name and a color. The property bindings in each element are attached to the children instantiated by the repeater . This means that the variables name and surfaceColor can be referenced by every Rectangle and Text item created by the repeater . Not only does this make it easier to access the data, it also makes the source code easier to read. surfaceColor is the color of the circle to the left of the name, not the blurred data sequence column i or row j . Each child of the content of the repeater is instantiated with the default property delegate (delegate ). This means example 1
The code (first code snippet) is the same as shown below. Note that the only difference is the
delegate property name, which will be explained in detail later.
