Я знаю, что сенсорные приложения будут работать на рабочем столе с тем же интерфейсом, но мне было интересно, возможно ли, чтобы одно приложение Ubuntu SDK имело многооконный интерфейс с элементами интерфейса в стиле рабочего стола при работе в режиме рабочего стола , также предоставляя отдельный сенсорный интерфейс при работе на сенсорных платформах.
Изменение аспектов расположения в зависимости от размера окна может быть выполнено различными способами. На наиболее базовом уровне можно просто установить свойства на различные значения на основе размеров. Вот минимальный пример, который тянет серый квадрат, который становится оранжевым, если Вы делаете окно больше:
Выполненный с 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
Когда в подобном телефону размере по умолчанию, это похоже:
Когда это расширено до планшета или подобного рабочему столу размера, это похоже:
Я думаю, что вы можете получить этот результат, используя Условные макеты .