diff --git a/docs/ch04-qmlstart/positioning.md b/docs/ch04-qmlstart/positioning.md index 6e3d89d9..dcaec5f1 100644 --- a/docs/ch04-qmlstart/positioning.md +++ b/docs/ch04-qmlstart/positioning.md @@ -29,7 +29,7 @@ The `Grid` element arranges its children in a grid. By setting the `rows` and `c <<< @/docs/ch04-qmlstart/src/positioners/GridExample.qml#global -The final positioner is `Flow`. It adds its child items in a flow. The direction of the flow is controlled using `flow` and `layoutDirection`. It can run sideways or from the top to the bottom. It can also run from left to right or in the opposite direction. As the items are added in the flow, they are wrapped to form new rows or columns as needed. In order for a flow to work, it must have a width or a height. This can be set either directly, or though anchor layouts. +The final positioner is `Flow`. It adds its child items in a flow. The direction of the flow is controlled using `flow` and `layoutDirection`. It can run sideways or from the top to the bottom. It can also run from left to right or in the opposite direction. As the items are added in the flow, they are wrapped to form new rows or columns as needed. In order for a flow to work, it must have a width or a height. This can be set either directly, or through anchor layouts. ![](./assets/flow.png) @@ -43,7 +43,7 @@ An element often used with positioners is the `Repeater`. It works like a for-lo In this repeater example, we use some new magic. We define our own `colorArray` property, which is an array of colors. The repeater creates a series of rectangles (16, as defined by the model). For each loop, it creates the rectangle as defined by the child of the repeater. In the rectangle we chose the color by using JS math functions: `Math.floor(Math.random()*3)`. This gives us a random number in the range from 0..2, which we use to select the color from our color array. As noted earlier, JavaScript is a core part of Qt Quick, and as such, the standard libraries are available to us. -A repeater injects the `index` property into the repeater. It contains the current loop-index. (0,1,..15). We can use this to make our own decisions based on the index, or in our case to visualize the current index with the `Text` element. +A repeater injects the `index` property into the delegate. It contains the current loop-index. (0, 1, .. 15). We can use this to make our own decisions based on the index, or in our case to visualize the current index with the `Text` element. ::: tip While the `index` property is dynamically injected into the Rectangle, it is a good practice to declare it as a required property to ease readability and help tooling. This is achieved by the `required property int index` line.