• Layouts - Changing the order
  • Layouts - The first conditional layout

    As first let's create the following default layout, with anchored buttons to each other.

    Defined by the following code:

    Button {
        id: redButton
        text: "Item #1"
        color: "red"
        Layouts.item: "red"
        anchors {
            left: parent.left
            top: parent.top
            bottom: parent.bottom
        }
        width: units.gu(15)
    }
    Button {
        id: greenButton
        text: "Item #2"
        color: "green"
        Layouts.item: "green"
        anchors {
            top: parent.top
            left: redButton.right
            right: parent.right
        }
        height: units.gu(10)
    }
    Button {
        id: blueButton
        text: "Item #3"
        color: "blue"
        Layouts.item: "blue"
        anchors{
            left: redButton.right
            right: parent.right
            bottom: parent.bottom
        }
        height: units.gu(10)
    }

    Walkthrough

    Import

    First of all, in order to use the layouting abilities, you need to import Lomiri.Layouts.

    import Lomiri.Layouts 1.0

    This layout will have the red button anchored to the parent's left, top and bottom, having a width of 15 grid units. The green and blue buttons are anchored left to the red button, righ to their parent, top and bottom to the parent top respectively to the parent bottom and both having a height of 10 grid units.

    This layout looks good in small form factors, however as the width, height and grid unit changes, this layout will start to look cumbersome.

    Every component we wan to lay out must be marked. This "marking" is done by attaching the Layouts.item property to erach item participating in the layouting. Therefore we mark each button with a unique name, "red", "green" and "blue".

    Define the conditional layout

    Let's define a column layout for the case when the layout block width passes 50 GU, and move the items into a Row container in the following order: "red", "green" and "blue". We also need to specify the size these components will have, so let's set the width to one third of the container's width and top and bottom anchored to the row's top and bottom.

    ConditionalLayout {
        name: "row"
        when: layouts.width > units.gu(50)
        Row {
            anchors.fill: parent
            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
                }
            }
            ItemLayout {
                item: "blue"
                width: parent.width / 3
                anchors {
                    top: parent.top
                    bottom: parent.bottom
                }
            }
        }
    }

    Note the way the container is defined. Items are laid out using ItemLayout host items. The items will be laid out in the order the ItemLayout hosts are declared. Beside this ItemLayout also drives the size, scale, rotation, availability (enabled) visibility and opacity of the hosted item.

    The conditional layout is given a name so it can be identified when the layout is set through Layouts.curentLayout property. This, beside debugging abilities, gives additional possibilities to configure properties that are not directly updated by the layouting.

    Combining this with the default layout we will see the following layout when width exceeds 50 GU:

    import QtQuick 2.4
    import Lomiri.Components 1.2
    import Lomiri.Layouts 1.0
    
    Item {
        id: root
        width: units.gu(30)
        height: units.gu(30)
    
        Layouts {
            objectName: "layouts"
            id: layouts
            anchors.fill: parent
    
            layouts: [
                ConditionalLayout {
                    name: "row"
                    when: layouts.width > units.gu(50)
                    Row {
                        anchors.fill: parent
                        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
                            }
                        }
                        ItemLayout {
                            item: "blue"
                            width: parent.width / 3
                            anchors {
                                top: parent.top
                                bottom: parent.bottom
                            }
                        }
                    }
                }
            ]
            Button {
                id: redButton
                text: "Item #1"
                color: "red"
                Layouts.item: "red"
                anchors {
                    left: parent.left
                    top: parent.top
                    bottom: parent.bottom
                }
                width: units.gu(15)
            }
            Button {
                id: greenButton
                text: "Item #2"
                color: "green"
                Layouts.item: "green"
                anchors {
                    top: parent.top
                    left: redButton.right
                    right: parent.right
                }
                height: units.gu(10)
            }
            Button {
                id: blueButton
                text: "Item #3"
                color: "blue"
                Layouts.item: "blue"
                anchors{
                    left: redButton.right
                    right: parent.right
                    bottom: parent.bottom
                }
                height: units.gu(10)
            }
        }
    }
  • Layouts - Changing the order