Bisakah satu target SDK Ubuntu sentuh dan desktop dengan tata letak terpisah?

Saya tahu bahwa aplikasi sentuh akan berjalan di desktop dengan UI yang sama, tetapi saya bertanya-tanya apakah mungkin untuk aplikasi Ubuntu SDK tunggal untuk memiliki antarmuka multi-jendela dengan elemen UI gaya desktop saat berjalan dalam mode desktop, sementara juga menyediakan UI sentuh terpisah saat dijalankan pada platform sentuh.

Mengubah aspek tata letak tergantung pada ukuran jendela dapat dilakukan dengan beberapa cara. Pada tingkat paling dasar, Anda bisa mengatur properti ke nilai yang berbeda berdasarkan dimensi. Berikut adalah contoh minimal yang menggambar kotak abu-abu yang berubah menjadi oranye jika Anda membuat jendela lebih besar:

Jalankan dengan 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
    }
}

Tentu saja, jika Anda memiliki elemen yang lebih kompleks pada aplikasi Anda, ini bisa sedikit membosankan. Untuk membantu dengan ini, Ubuntu Toolkit menyediakan komponen ConditionalLayout di mana Anda dapat menentukan tata letak yang berbeda yang akan diaktifkan ketika suatu kondisi terpenuhi. Ini terjadi secara dinamis, dan Anda dapat melihat perubahan saat mengubah ukuran jendela.

Berikut adalah contoh yang lebih kompleks menggunakan 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

Ketika dalam ukuran standar seperti telepon, tampilannya seperti:

Ketika diperluas ke ukuran tablet atau seperti desktop, sepertinya:

Saya pikir Anda dapat memperoleh hasil ini menggunakan Tata Letak Bersyarat .