QML 클릭하면보기가 변합니다.

Question

저는 팀과 함께 프로젝트 작업을하고 있습니다. 내 임무는 임베디드 시스템 용 QML 및 C++로 Gui를 만드는 것입니다.

각보기에는 qml 파일이 있습니다.

하지만 지금은 그들 사이를 탐색하고 싶습니다. 버튼을 클릭하면보기가 전환됩니다. 모든보기에는 뒤로 버튼이있어서 메인보기로 돌아갈 수 있습니다.

qml로 가능합니까? 내가

Answer 1

C++로 해결해야 하지 않으면 당신은 QDeclarativeView에서 C++에서 사용 파생 클래스를 만들 수 있습니다

void setSource (const QUrl & url) 

현재 표시되는 QML 파일을 변경할 수 있습니다. 단추를 클릭 할 때이 메서드를 여러 번 호출 할 수 있습니다.

QML 만 사용하는 솔루션도 있습니다.

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

    Loader { id: pageLoader } 

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

Answer 2

또 다른 옵션은 당신이 그 QML 뷰의 인스턴스를 어디 주요 QML을 가지고, 당신은 상태를 사용하여 사이에서 변경 : 로더 요소에서 살펴 보자.

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"} 
    ... 
    } 
    ] 
} 

이러한 옵션을 이미 제시 한 차이점이 하나가 영구적이다, 다른 요금 당신의 QML (구문 분석 및 인스턴스를 의미합니다 ...)마다.

Answer 3

한 답변에 대한

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