Um único SDK do Ubuntu pode ser direcionado ao toque e à área de trabalho com layouts separados?

Eu sei que os aplicativos de toque serão executados na área de trabalho com a mesma interface do usuário, mas eu queria saber se será possível que um único aplicativo Ubuntu SDK tenha uma interface de usuário de várias janelas com elementos de interface de usuário no estilo da área de trabalho ao executar no modo área de trabalho, enquanto também fornecendo uma interface de usuário de toque separada ao executar em plataformas de toque.

A alteração dos aspectos do layout, dependendo do tamanho da janela, pode ser realizada de várias maneiras. No nível mais básico, você pode apenas definir propriedades para diferentes valores com base nas dimensões. Aqui está um exemplo mínimo que desenha um quadrado cinza que fica laranja se você aumentar a janela:

Correr com 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
    }
}

Obviamente, se você tiver elementos mais complexos em seu aplicativo, isso pode ser um pouco tedioso. Para ajudar com isso, o Ubuntu Toolkit fornece um componente ConditionalLayout, onde você pode definir diferentes layouts que serão ativados quando uma condição for atendida. Isso acontece dinamicamente e você pode ver as alterações conforme redimensiona a janela.

Aqui está um exemplo mais complexo 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 no tamanho padrão do telefone, ele se parece com:

Quando é expandido para um tamanho de tablet ou desktop, é semelhante a:

Eu acho que você pode ter esse resultado usando layouts condicionais .