如何在 QML 视图之间动态更改

Posted 2023-02-16

【中文标题】如何在 QML 视图之间动态更改

【英文标题】：How to change between QML views dynamically

【发布时间】：2020-04-16 07:11:05

【问题描述】：

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

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"
    

香蕉.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_())

【参考方案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。

【讨论】：

谢谢！

好答案。在这种情况下，当您想在来回切换时保留状态（而不是在每次切换时重新实例化组件）时，StackLayout 也很有用。