Чи може одна ціль Ubuntu SDK торкатися та настільних ПК з окремими макетами?

Я знаю, що сенсорні програми працюватимуть на робочому столі з тим самим інтерфейсом, але мені було цікаво, чи можливо для одного додатка 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

Коли розмір телефону за замовчуванням має розмір телефону, він виглядає так:

Коли він розширюється до розміру планшетного ПК або настільного ПК, він виглядає так:

Я думаю, що ви можете отримати цей результат, використовуючи умовні макети .