QML cambiar las vistas en Haga clic en

Question

estoy trabajando en un proyecto con mi equipo. Mi trabajo es crear una Gui con QML y C++ para un sistema integrado.

Tengo para cada Ver un archivo qml.

Pero ahora quiero navegar entre ellos. Esto significa que cuando hago clic en un botón, la vista debe cambiar. Cada vista tendrá un botón de retroceso, por lo que podría volver a mi vista principal.

¿Es esto posible en qml? Si no tengo que solucionarlo con C++

Answer 1

Puede crear una clase que deriva de QDeclarativeView en C++ y uso:

void setSource (const QUrl & url) 

para cambiar el archivo QML que se muestra actualmente. Puede llamar a este método varias veces cuando se hace clic en un botón.

También hay una solución que solo utiliza QML. Echar un vistazo en el elemento de bandeja de carga:

import QtQuick 1.0 
Item { 
    width: 200; height: 200 

    Loader { id: pageLoader } 

    MouseArea { 
    anchors.fill: parent 
    onClicked: pageLoader.source = "Page1.qml" 
    } 
} 

Answer 2

Otra opción es tener un QML principal donde se ejemplariza los puntos de vista de QML, y cambia entre ellos utilizando estados.

Main { 
    View1{id:viewid1} 
    View2{id:viewid2} 
    View3{id:viewid3} 
    states: [ 
    State { 
     name: "" 
    }, 
    State { 
     name: "view1" 
     PropertyChanges {target: viewid1; state: "focused"} 
    }, 
    State { 
     name: "view2" 
     PropertyChanges {target: viewid2; state: "focused"} 
    ... 
    } 
    ] 
} 

La diferencia entre estas opciones y la ya presentada es que éste es permanente, y los otros cargos de su QML cada vez (lo que significa que el análisis y la creación de instancias ...).

Answer 3

Un ejemplo más

import QtQuick 2.1 
import QtQuick.Controls 1.1 
import QtQuick.Window 2.1 

ApplicationWindow { 
    title: qsTr("My super app") 
    width: 640 
    height: 480 

    Button { 
     id: settingsButton 
     x: 370 
     y: 0 
     text: qsTr("Settings") 
     /* just change `visible` property by click */ 
     onClicked: { 
      statusView.visible  = false 
      settingsView.visible = true 
     } 
    } 

    Button { 
     id: statusButton 
     x: 171 
     y: 0 
     text: "Status" 
     /* toggle */ 
     onClicked: { 
      statusView.visible  = true 
      settingsView.visible = false 
     } 
    } 

    Item { 
     /* use id for access */ 
     id: statusView 
     x: 0 
     y: 50 
     width: 640 
     height: 430 
     /* visible: true */ 

     Text { 
      anchors.centerIn: parent 
      text: "status" 
     } 
    } 

    Item { 
     id: settingsView 
     x: 0 
     y: 50 
     width: 640 
     height: 430 
     /* invisible */ 
     visible: false 

     Text { 
      anchors.centerIn: parent 
      text: "settings" 
     } 
    } 
}