Layouts - Changing the order

So far we have seen how to define the default layout, a conditional layout and how to place items into those.

As mentioned in the ConditionalLayout documentation, items hosted by the container are laid out based on the order they are hosted by the ItemLayout.

So let's change the order the buttons are laid out so that we have blue, red and green order.

ConditionalLayout {
    name: "row"
    when: layouts.width > units.gu(50)
    Row {
        anchors.fill: parent
        ItemLayout {
            item: "blue"
            width: parent.width / 3
            anchors {
                top: parent.top
                bottom: parent.bottom
            }
        }
        ItemLayout {
            item: "red"
            width: parent.width / 3
            anchors {
                top: parent.top
                bottom: parent.bottom
            }
        }
        ItemLayout {
            item: "green"
            width: parent.width / 3
            anchors {
                top: parent.top
                bottom: parent.bottom
            }
        }
    }
}

The layout after resizing the window width to exceed 50 GU will look as follows:

Note that when resizing the window width to < 50 GU, you will get all your components back to their original (default) positions and anchors.