c++ - クリックで QML 変更ビュー

Question

私は自分のチームと一緒にプロジェクトに取り組んでいます。私の仕事は、組み込みシステム用の QML と C++ を使用して GUI を作成することです。

ビューごとにqmlファイルがあります。

しかし今、私はそれらの間をナビゲートしたいと思っています。これは、ボタンをクリックすると、ビューが切り替わることを意味します。すべてのビューには戻るボタンがあるため、メイン ビューに戻ることができます。

これはqmlで可能ですか？そうでない場合は、C ++で解決する必要があります

Answer 1

QDeclarativeViewC++から派生したクラスを作成し、以下を使用できます。

void setSource ( const QUrl & url )

現在表示されているqmlファイルを変更します。ボタンがクリックされたときに、このメソッドを複数回呼び出すことができます。

---

QML のみを使用したソリューションもあります。Loader要素を見てみましょう。

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

   Loader { id: pageLoader }

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

Answer 2

もう 1 つのオプションは、これらの 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

もう1つの例

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