Un singolo SDK Ubuntu può essere indirizzato a touch e desktop con layout separati?

So che le app touch verranno eseguite sul desktop con la stessa interfaccia utente, ma mi chiedevo se sarebbe possibile per una singola app Ubuntu SDK avere un'interfaccia utente multi-finestra con elementi dell'interfaccia utente in stile desktop quando si esegue in modalità desktop, ma anche fornendo un'interfaccia utente touch separata quando si esegue su piattaforme touch.

La modifica degli aspetti del layout in base alle dimensioni della finestra può essere realizzata in diversi modi. Al livello più semplice, puoi semplicemente impostare le proprietà su valori diversi in base alle dimensioni. Ecco un esempio minimo che disegna un quadrato grigio che diventa arancione se ingrandisci la finestra:

Corri con 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
    }
}

Naturalmente, se hai elementi più complessi nella tua applicazione, questo può diventare un po 'noioso. A tale scopo, Ubuntu Toolkit fornisce un componente ConditionalLayout in cui è possibile definire diversi layout che verranno attivati ​​quando viene soddisfatta una condizione. Questo accade in modo dinamico e puoi vedere le modifiche mentre ridimensioni la finestra.

Ecco un esempio più complesso usando 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

Quando ha le dimensioni predefinite del telefono, sembra che:

Quando viene espanso in un tablet o in una dimensione simile a un desktop, appare come:

Penso che puoi ottenere questo risultato usando Layout condizionali .