উইন্ডোর আকারের উপর নির্ভর করে বিন্যাসের দিকগুলি পরিবর্তন করা বিভিন্ন উপায়ে সম্পন্ন করা যায়। সর্বাধিক প্রাথমিক স্তরে, আপনি মাত্রাগুলির উপর ভিত্তি করে বিভিন্ন মানগুলিতে বৈশিষ্ট্য সেট করতে পারেন। এখানে একটি ন্যূনতম উদাহরণ যা একটি উইন্ডো স্কোয়ার আঁকে যা আপনি উইন্ডোটি বড় করে তুললে কমলা রঙে পরিণত হয়:
সাথে চালাও 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
}
}
অবশ্যই আপনার আবেদনে আরও জটিল উপাদান থাকলে এটি কিছুটা ক্লান্তিকর হতে পারে। এটির সাথে সহায়তার জন্য, উবুন্টু টুলকিট একটি শর্তসাপেক্ষ লেআউট উপাদান সরবরাহ করে যেখানে আপনি শর্ত পূরণ করার পরে সক্রিয় করা হবে এমন বিভিন্ন লেআউট সংজ্ঞায়িত করতে পারেন। এটি গতিশীলভাবে ঘটে এবং আপনি উইন্ডোটির আকার পরিবর্তন করার সাথে সাথে পরিবর্তনগুলি দেখতে পাবেন।
এখানে আরও জটিল উদাহরণ ব্যবহার করে 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
যখন ডিফল্ট ফোনের মতো আকারে থাকে তখন মনে হয়:
এটি যখন কোনও ট্যাবলেট বা ডেস্কটপ-মতো আকারে প্রসারিত হয় তখন মনে হয়: