Tek bir Ubuntu SDK, ayrı düzenlerle dokunma ve masaüstünü hedefleyebilir mi?

Dokunmatik uygulamaların masaüstünde aynı kullanıcı arayüzüyle çalışacağını biliyorum, ancak tek bir Ubuntu SDK uygulamasının masaüstü modunda çalışırken masaüstü tarzı UI öğelerine sahip çok pencereli bir kullanıcı arayüzüne sahip olup olmayacağını merak ediyordum. dokunmatik platformlarda çalışırken ayrı bir dokunmatik kullanıcı arayüzü sağlar.

Pencerenin boyutuna bağlı olarak mizanpajın yönlerini değiştirmek çeşitli yollarla gerçekleştirilebilir. En temel düzeyde, özellikleri boyutlara göre farklı değerlere ayarlayabilirsiniz. Pencereyi büyütürseniz turuncuya dönen gri bir kare çizen minimal bir örnek:

Şununla koş: 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
    }
}

Tabii ki, uygulamanız için daha karmaşık unsurlarınız varsa, bu biraz sıkıcı olabilir. Bu konuda yardımcı olmak için Ubuntu Toolkit, bir koşul karşılandığında etkinleştirilecek farklı düzenleri tanımlayabileceğiniz bir ConditionalLayout bileşeni sağlar . Bu dinamik olarak gerçekleşir ve pencereyi yeniden boyutlandırırken değişiklikleri görebilirsiniz.

İşte daha karmaşık bir örnek 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

Varsayılan telefon benzeri boyuttayken, şuna benzer:

Tablet veya masaüstü benzeri bir boyuta genişletildiğinde şöyle görünür:

Bu sonucu Koşullu Düzenleri kullanarak elde edebileceğinizi düşünüyorum .