Posts Tagged "navigation"

Création d’une application ubuntu – jour 4

Navigation sous ubuntu touch Dans le projet que nous venons d’ouvrir il y a des exemples d’utilisation de presque tous les composants ubuntu, mais pas pour la navigation. Nous allons donc voir comment faire un système de navigation. Il existe deux façon de naviguer sur ubuntu touch : PageStack et Tabs. Nous allons étudiez chacun des deux composants. Utiliser la navigation avec le composant PageStack Pour utiliser pageStack il faut aller sur la documentation officiel pour prendre connaissance des règles de design (comme indiqué sur l’image ci-dessous) : Maintenant passons à l’exemple pratique (issue de la documentation) : JavaScript import QtQuick 2.0 import Ubuntu.Components 1.1 import Ubuntu.Components.ListItems 1.0 as ListItem MainView { width: units.gu(48) height: units.gu(60) PageStack { id: pageStack Component.onCompleted: push(page0) Page { id: page0 title: i18n.tr("Root page") visible: false Column { anchors.fill: parent ListItem.Standard { text: i18n.tr("Page one") onClicked: pageStack.push(page1, {color: UbuntuColors.orange}) progression: true } ListItem.Standard { text: i18n.tr("External page") onClicked: pageStack.push(Qt.resolvedUrl("MyCustomPage.qml")) progression: true } } } Page { title: "Rectangle" id: page1 visible: false property alias color: rectangle.color Rectangle { id: rectangle anchors { fill: parent margins: units.gu(5) } } } } } 123456789101112131415161718192021222324252627282930313233343536373839404142 import QtQuick 2.0import Ubuntu.Components 1.1import Ubuntu.Components.ListItems 1.0 as ListItemMainView {    width: units.gu(48)    height: units.gu(60)    PageStack {        id: pageStack        Component.onCompleted: push(page0)        Page {            id: page0            title: i18n.tr("Root page")            visible: false            Column {                anchors.fill: parent                ListItem.Standard {                    text: i18n.tr("Page one")                    onClicked: pageStack.push(page1, {color: UbuntuColors.orange})                    progression: true                }                ListItem.Standard {                    text: i18n.tr("External page")                    onClicked: pageStack.push(Qt.resolvedUrl("MyCustomPage.qml"))                    progression: true                }            }        }        Page {            title: "Rectangle"            id: page1            visible: false            property alias color: rectangle.color            Rectangle {                id: rectangle                anchors {                    fill: parent                    margins: units.gu(5)                }            }        }    }} Qu’est-ce qu’il se passe ? Toutes les pages doivent être à l’intérieur d’un PageStack (et il ne peux y avoir qu’un seul PageStack sinon le système ne sais plus où il en est). Au chargement du composant on « push » la page0 (ça sera la page afficher par défaut). Utiliser la navigation avec le composant Tabs Comme pour le composant PageStack, je vous invite à prendre connaissance des règles de design sur la documentation officiel pour avoir plus de détails Voici un exemple d’utilisation tiré de la documentation officiel JavaScript import QtQuick 2.0 import Ubuntu.Components 1.1 import Ubuntu.Components.ListItems 1.0 as ListItem MainView { width: units.gu(48) height: units.gu(60) Tabs { id: tabs Tab { title: i18n.tr("Simple page") page: Page { Label { id: label anchors.centerIn: parent text: "A centered label" } tools: ToolbarItems { ToolbarButton { text: "action" onTriggered: print("action triggered") } } } } Tab { id: externalTab title: i18n.tr("External") page: Loader { parent: externalTab anchors { left: parent.left right: parent.right bottom: parent.bottom } source: (tabs.selectedTab ===...