Un seul SDK Ubuntu cible-t-il un bureau et un bureau avec des dispositions distinctes?

Je sais que les applications tactiles s'exécuteront sur le bureau avec la même interface utilisateur, mais je me demandais s'il serait possible pour une seule application SDK Ubuntu d'avoir une interface utilisateur multi-fenêtres avec des éléments d'interface utilisateur de style bureau lors de l'exécution en mode bureau, tout en étant également fournissant une interface utilisateur tactile distincte lors de l'exécution sur des plates-formes tactiles.

La modification d'aspects de la disposition en fonction de la taille de la fenêtre peut être effectuée de plusieurs manières. Au niveau le plus élémentaire, vous pouvez simplement définir des propriétés sur différentes valeurs en fonction des dimensions. Voici un exemple minimal qui dessine un carré gris qui devient orange si vous agrandissez la fenêtre:

Courir avec 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
    }
}

Bien sûr, si vous avez des éléments plus complexes dans votre application, cela peut devenir un peu fastidieux. Pour vous aider, Ubuntu Toolkit fournit un composant ConditionalLayout dans lequel vous pouvez définir différentes dispositions qui seront activées lorsqu'une condition est remplie. Cela se produit dynamiquement et vous pouvez voir les modifications lorsque vous redimensionnez la fenêtre.

Voici un exemple plus complexe utilisant 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

Lorsqu'il a la taille par défaut du téléphone, il ressemble à ceci:

Lorsqu'il est étendu à une taille de tablette ou de bureau, il ressemble à:

Je pense que vous pouvez obtenir ce résultat en utilisant des dispositions conditionnelles .