Mengubah aspek tata letak tergantung pada ukuran jendela dapat dilakukan dengan beberapa cara. Pada tingkat paling dasar, Anda bisa mengatur properti ke nilai yang berbeda berdasarkan dimensi. Berikut adalah contoh minimal yang menggambar kotak abu-abu yang berubah menjadi oranye jika Anda membuat jendela lebih besar:
Jalankan dengan qmlscene path/to/file.qml
import QtQuick 2.0
import Ubuntu.Components 0.1
MainView {
id: root
width: units.gu(50)
height: units.gu(50)
Rectangle {
id: hello
color: parent.width > units.gu(60) ? UbuntuColors.orange : UbuntuColors.warmGrey
anchors.fill: parent
}
}
Tentu saja, jika Anda memiliki elemen yang lebih kompleks pada aplikasi Anda, ini bisa sedikit membosankan. Untuk membantu dengan ini, Ubuntu Toolkit menyediakan komponen ConditionalLayout di mana Anda dapat menentukan tata letak yang berbeda yang akan diaktifkan ketika suatu kondisi terpenuhi. Ini terjadi secara dinamis, dan Anda dapat melihat perubahan saat mengubah ukuran jendela.
Berikut adalah contoh yang lebih kompleks menggunakan ConditionalLayout
:
import QtQuick 2.0
import Ubuntu.Components 0.1
import Ubuntu.Components.ListItems 0.1 as ListItem
import Ubuntu.Layouts 0.1
MainView {
id: root
width: units.gu(50)
height: units.gu(75)
Page {
anchors.fill: parent
Layouts {
id: layouts
anchors.fill: parent
layouts: [
ConditionalLayout {
name: "flow"
when: layouts.width > units.gu(60)
Flow {
anchors.fill: parent
flow: Flow.LeftToRight
ItemLayout {
item: "sidebar"
id: sidebar
anchors {
top: parent.top
bottom: parent.bottom
}
width: parent.width / 3
}
ItemLayout {
item: "colors"
anchors {
top: parent.top
bottom: parent.bottom
right: parent.right
left: sidebar.right
}
}
}
}
]
Column {
id: sidebar
anchors {
left: parent.left
top: parent.top
right: parent.right
}
Layouts.item: "sidebar"
ListItem.Header {
text: "Ubuntu Color Palette"
}
ListItem.Standard {
id: orangeBtn
text: "Ubuntu Orange"
control: Button {
text: "Click me"
onClicked: {
hello.color = UbuntuColors.orange
}
}
}
ListItem.Standard {
id: auberBtn
text: "Canonical Aubergine"
control: Button {
text: "Click me"
onClicked: {
hello.color = UbuntuColors.lightAubergine
}
}
}
ListItem.Standard {
id: grayBtn
text: "Warm Grey"
control: Button {
text: "Click me"
onClicked: {
hello.color = UbuntuColors.warmGrey
}
}
}
} // Column
Rectangle {
id: hello
Layouts.item: "colors"
color: UbuntuColors.warmGrey
anchors {
top: sidebar.bottom
bottom: parent.bottom
left: parent.left
right: parent.right
}
Label {
anchors.centerIn: parent
text: "Hello (ConditionalLayout) World!"
color: "black"
fontSize: "large"
}
}
} // Layouts
} // Page
} // Main View
Ketika dalam ukuran standar seperti telepon, tampilannya seperti:
Ketika diperluas ke ukuran tablet atau seperti desktop, sepertinya: