क्या एक एकल उबंटू एसडीके टच और डेस्कटॉप को अलग-अलग लेआउट के साथ लक्षित कर सकता है?
जवाबों:
खिड़की के आकार के आधार पर लेआउट के पहलुओं को बदलना कई तरीकों से पूरा किया जा सकता है। सबसे बुनियादी स्तर पर, आप आयामों के आधार पर विभिन्न मूल्यों के गुणों को निर्धारित कर सकते हैं। यहाँ एक न्यूनतम उदाहरण है जो एक ग्रे वर्ग खींचता है जो अगर खिड़की को बड़ा बनाता है तो नारंगी हो जाता है:
साथ दौड़ो 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
}
}
बेशक, यदि आपके पास अपने आवेदन के लिए अधिक जटिल तत्व हैं तो यह थोड़ा थकाऊ हो सकता है। इसकी सहायता के लिए, Ubuntu टूलकिट एक ConditionalLayout घटक प्रदान करता है जहां आप विभिन्न लेआउट्स को परिभाषित कर सकते हैं जो किसी शर्त के पूरा होने पर सक्रिय हो जाएंगे। यह गतिशील रूप से होता है, और आप विंडो के आकार में परिवर्तन देख सकते हैं।
यहाँ एक और अधिक जटिल उदाहरण दिया गया है 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
जब डिफ़ॉल्ट फोन-जैसे आकार में, यह ऐसा दिखता है:
जब इसे टेबलेट या डेस्कटॉप जैसी आकृति में विस्तारित किया जाता है, तो यह ऐसा दिखता है:
मुझे लगता है कि आपके पास सशर्त लेआउट का उपयोग करके यह परिणाम हो सकता है ।