• Layouts - Changing the order
  • Layouts - Lay out a single item differently from others
  • 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.

  • Layouts - Lay out a single item differently from others