¿Puede un solo SDK de Ubuntu apuntar al tacto y al escritorio con diseños separados?

Sé que las aplicaciones táctiles se ejecutarán en el escritorio con la misma interfaz de usuario, pero me preguntaba si sería posible que una sola aplicación SDK de Ubuntu tuviera una interfaz de usuario de múltiples ventanas con elementos de interfaz de usuario de estilo de escritorio cuando se ejecuta en modo de escritorio, mientras que también proporcionando una IU táctil separada cuando se ejecuta en plataformas táctiles.

Cambiar los aspectos del diseño según el tamaño de la ventana se puede lograr de varias maneras. En el nivel más básico, puede establecer propiedades a diferentes valores en función de las dimensiones. Aquí hay un ejemplo mínimo que dibuja un cuadrado gris que se vuelve naranja si agranda la ventana:

Corre 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
    }
}

Por supuesto, si tiene elementos más complejos para su aplicación, esto puede ser un poco tedioso. Para ayudar con esto, Ubuntu Toolkit proporciona un componente ConditionalLayout donde puede definir diferentes diseños que se activarán cuando se cumpla una condición. Esto sucede dinámicamente y puede ver los cambios a medida que cambia el tamaño de la ventana.

Aquí hay un ejemplo más complejo 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

Cuando está en el tamaño de teléfono predeterminado, se ve así:

Cuando se expande a una tableta o tamaño de escritorio, se ve así:

Creo que puede obtener este resultado utilizando diseños condicionales .