UbuntuUserInterfaceToolkit.ubuntu-layouts7

As mentioned, with Layouts we can achieve to have a single code base supporting different form factors. The following example illustrates how to support different layouts with the same code base.

Default layout

src="https://assets.ubuntu.com/v1/c643406e-1.png" alt="" />

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: nolayout
text: "Non-laid out"
color: "brown"
anchors {
top: greenButton.bottom
left: redButton.right
right: parent.right
bottom: blueButton.top
}
}
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)
}

Conditional layouts

Column layout

src="https://assets.ubuntu.com/v1/e6b8eb2e-layout2.png" alt="" />

ConditionalLayout {
name: "column"
when: layouts.width > units.gu(50) && layouts.width <= units.gu(70)
Column {
anchors.fill: parent
ItemLayout {
item: "red"
height: parent.height / 3
anchors {
left: parent.left
right: parent.right
}
}
ItemLayout {
item: "green"
height: parent.height / 3
anchors {
left: parent.left
right: parent.right
}
}
ItemLayout {
item: "blue"
height: parent.height / 3
anchors {
left: parent.left
right: parent.right
}
}
}
},

Row layout

src="https://assets.ubuntu.com/v1/84af2b6e-layout3.png" alt="" />

ConditionalLayout {
name: "row"
when: layouts.width > units.gu(70) && layouts.width <= units.gu(90)
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
}
}
}
},

Layout hiding element

src="https://assets.ubuntu.com/v1/359958e5-simple-layout4.png" alt="" />

ConditionalLayout {
name: "hiding-element"
when: layouts.width > units.gu(90) && layouts.width < units.gu(100)
Row {
anchors.fill: parent
ItemLayout {
item: "red"
width: parent.width / 2
height: units.gu(20)
}
ItemLayout {
item: "green"
width: parent.width / 2
height: units.gu(20)
}
}
},

Layout showing more

src="https://assets.ubuntu.com/v1/bbc69aad-simple-layout5.png" alt="" />

ConditionalLayout {
name: "showing-more"
when: layouts.width >= units.gu(100)
Flow {
anchors.fill: parent
ItemLayout {
item: "red"
width: units.gu(50)
height: units.gu(20)
}
ItemLayout {
item: "green"
width: units.gu(50)
height: units.gu(20)
}
ItemLayout {
item: "blue"
width: units.gu(50)
height: units.gu(20)
}
Button {
text: "Flow item"
width: units.gu(50)
height: units.gu(20)
}
}
}

The entire code

Layouts {
id: layouts
anchors.fill: parent
layouts: [
ConditionalLayout {
name: "column"
when: layouts.width > units.gu(50) && layouts.width <= units.gu(70)
Column {
anchors.fill: parent
ItemLayout {
item: "red"
height: parent.height / 3
anchors {
left: parent.left
right: parent.right
}
}
ItemLayout {
item: "green"
height: parent.height / 3
anchors {
left: parent.left
right: parent.right
}
}
ItemLayout {
item: "blue"
height: parent.height / 3
anchors {
left: parent.left
right: parent.right
}
}
}
},
ConditionalLayout {
name: "row"
when: layouts.width > units.gu(70) && layouts.width <= units.gu(90)
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
}
}
}
},
ConditionalLayout {
name: "hiding-element"
when: layouts.width > units.gu(90) && layouts.width < units.gu(100)
Row {
anchors.fill: parent
ItemLayout {
item: "red"
width: parent.width / 2
height: units.gu(20)
}
ItemLayout {
item: "green"
width: parent.width / 2
height: units.gu(20)
}
}
},
ConditionalLayout {
name: "showing-more"
when: layouts.width >= units.gu(100)
Flow {
anchors.fill: parent
ItemLayout {
item: "red"
width: units.gu(50)
height: units.gu(20)
}
ItemLayout {
item: "green"
width: units.gu(50)
height: units.gu(20)
}
ItemLayout {
item: "blue"
width: units.gu(50)
height: units.gu(20)
}
Button {
text: "Flow item"
width: units.gu(50)
height: units.gu(20)
}
}
}
]
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: nolayout
text: "Non-laid out"
color: "brown"
anchors {
top: greenButton.bottom
left: redButton.right
right: parent.right
bottom: blueButton.top
}
}
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)
}
}

That's it

You're ready to go. You can find the layouting components under Layouting. For further questions please visit #ubuntu-app-devel irc channel on freenode.