UbuntuUserInterfaceToolkit.ubuntu-layouts4

As mentioned, ItemLayout has control over the size, anchors and visibility of the hosted element. Therefore we can have the blue button with a different size than the other two. Let's have the blue button's width set to 10 GUs and its height to 10 GUs less than the positioner's height.

The code will look as follows:

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

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