Qt5 QtQuick 2.0 (Qt Quick Application) 在一个窗口中切换视图(QML 文件)

Question

在传统的Qt（QWidget）中，我有一个QMainWindow和一些动态创建的QWidgets内容，我将它们更改为在主窗口中看到的QWidgets。当我有几个qml文件并且我希望能够在例如单击按钮时在它们之间切换时，可以实现什么方法。

Answer 1

至少有 3 个选项可以解决此问题：

1. 您可以使用为此目的准备的组件 StackView。关键是您将一次创建 2 个组件，您可以通过单击按钮来更改它们。

例：

import QtQuick 2.12
import QtQuick.Controls 2.5
ApplicationWindow {
    id: window
    visible: true
    width: 640
    height: 480
    title: qsTr("Stack")
    header: ToolBar {
        contentHeight: toolButton.implicitHeight
        ToolButton {
            id: toolButton
            text: stackView.depth > 1 ? "u25C0" : "u2630"
            font.pixelSize: Qt.application.font.pixelSize * 1.6
            onClicked: {
                if (stackView.depth > 1) {
                    stackView.pop()
                } else {
                    drawer.open()
                }
            }
        }
        Label {
            text: stackView.currentItem.title
            anchors.centerIn: parent
        }
    }
    Drawer {
        id: drawer
        width: window.width * 0.66
        height: window.height
        Column {
            anchors.fill: parent
            ItemDelegate {
                text: qsTr("Page 1")
                width: parent.width
                onClicked: {
                    stackView.push("Page1Form.qml")
                    drawer.close()
                }
            }
            ItemDelegate {
                text: qsTr("Page 2")
                width: parent.width
                onClicked: {
                    stackView.push("Page2Form.qml")
                    drawer.close()
                }
            }
        }
    }
    StackView {
        id: stackView
        initialItem: "HomeForm.qml"
        anchors.fill: parent
    }
}

2. 在这里使用加载器，您将在执行过程中动态加载文件，此方法的缺点是，如果您经常切换，它将非常耗时。

例：

import QtQuick 2.0
Item {
    width: 200; height: 200
    Loader { id: pageLoader }
    MouseArea {
        anchors.fill: parent
        onClicked: pageLoader.source = "Page1.qml"
    }
}

3. 您可以在C++中创建一个类，该类将提供给已初始化的 QML 对象以空的 qml 形式。 因此，Mono 将单个组件放入库中并将它们用作插件（使用 QQML组件）。

Answer 2

我会使用一个简单的Loader，带有一个按钮，单击该按钮时会更改Loader的源文件。这样：

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
Window {
    id: root
    Rectangle {
        id: page_main
        color: "#202020"
        anchors.fill : parent
        Button {
            id: button_page_1
            width: 105
            text: qsTr("Page 1")
            anchors {
                left: parent.left
                top: parent.top
                leftMargin: 6
                topMargin: 0
            }
            checkable: true
            onClicked: {
               if (loader_main.source == "/page_1.qml") {
                   loader_main.source = ""
               } else {
                   loader_main.source = "/page_1.qml"
                   button_page_2.checked = false
                   button_page_3.checked = false
               }
           }
        }
        Button {
            id: button_page_2
            width: 105
            text: qsTr("Page 2")
            anchors {
                left: button_auto.right
                top: parent.top
                leftMargin: 6
                topMargin: 0
            }
            checkable: true
            onClicked: {
               if (loader_main.source == "/page_2.qml") {
                   loader_main.source = ""
               } else {
                   loader_main.source = "/page_2.qml"
                   button_page_1.checked = false
                   button_page_3.checked = false
               }
           }
        }
        Button {
            id: button_page_3
            width: 105
            text: qsTr("Page 3")
            anchors {
                left: button_manual.right
                top: parent.top
                leftMargin: 6
                topMargin: 0
            }
            checkable: true
            onClicked: {
               if (loader_main.source == "/page_page_3.qml") {
                   loader_main.source = ""
               } else {
                   loader_main.source = "/page_page_3.qml"
                   button_page_1.checked = false
                   button_page_2.checked = false
               }
           }
        }
    }
    Loader {
        id: loader_main
        y: 60
        visible: true
        anchors {
            top: parent.top
            bottom: parent.bottom
            right: parent.right
            left: parent.left
            topMargin: 48
            bottomMargin: 0
            leftMargin: 0
            rightMargin: 0
        }
    }
}