如何在 QML 视图之间动态切换

Question

我想要实现的行为是通过从下拉框中进行选择，您将看到不同的 QML 组件。因此，如果用户选择 "Apple" 则将查看 Apple 组件，否则将查看 "Banana" 组件。到目前为止，我的方法是使用带有 Loader 委托的 ListView，如下所示，但是我的组件根本没有显示。有没有更好的方法来实现我所追求的行为？

view.qml

import QtQuick 2.0
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.12
import QtQuick.Window 2.12

ApplicationWindow {
    id: page
    width: 400
    height: 400
    visible: true

    ColumnLayout {

        ListModel {
            id: nullmodel
        }

        ComboBox {
            id: selector
            currentIndex: 1
            model: ListModel {
                id: cbItems
                ListElement { text: "Apple"; }
                ListElement { text: "Banana"; }
            }
            onCurrentIndexChanged: viewer.selected = cbItems.get(currentIndex).text
        }

        ListView {
            model: nullmodel
            id: viewer
            property string selected: "Apple" 

            delegate: Loader {

                sourceComponent: {

                    switch(selected)
                    {
                        case "Apple": {
                            console.log("Apples!")
                            return Apple
                        }
                        case "Banana": {
                            console.log("Bananas!")
                            return Banana
                        }
                        default:
                            console.log("Neither")
                           return Apple
                    }
                }
            } 
        }
    }
}

Apple.qml

import QtQuick 2.0
Item {

    Text {
        text: "Hi, I'm an Apple"
    }
}

Banana.qml

import QtQuick 2.0
Item {
    Text {
        text: "Hi, I'm a Banana"
    }
}

如果有任何相关性，我正在使用 PySide2 来显示

main.py

import sys
from os.path import abspath, dirname, join

from PySide2.QtCore import QObject, Slot
from PySide2.QtGui import QGuiApplication
from PySide2.QtQml import QQmlApplicationEngine

if __name__ == '__main__':
    app = QGuiApplication(sys.argv)
    engine = QQmlApplicationEngine()

    qmlFile = join(dirname(__file__), 'view.qml')
    engine.load(abspath(qmlFile))

    if not engine.rootObjects():
        sys.exit(-1)

    sys.exit(app.exec_())

Answer 1

考虑这段代码：

ColumnLayout {

    ComboBox {
        id: selector

        model: ListModel {
            id: cbItems
            ListElement { text: "Apple"; }
            ListElement { text: "Banana"; }
        }

        onCurrentIndexChanged: {
            viewer.source = cbItems.get(currentIndex).text + ".qml";
        }
    }

    Loader {
        y: 50
        id: viewer
        source: "Apple.qml"

        onSourceChanged: {
            console.log(source);
        }
    }
}

为了实现目标，寂寞Loader就够了。但是你可以把它放在任何你想要的地方，例如。在 ListView.

如何在 QML 视图之间动态切换

How to change between QML views dynamically

python

qt

qml

qtquick2

pyside2