QML如何根据State状态仅显示指定组件？

嗨，这问题我熟！你想通过Component按需创建表单组件，只在对应状态下实例化显示，用Loader配合QML的State就能完美解决，既省资源又灵活可控。

直接上实操代码吧，我给你改写成符合需求的版本：

Item {
    id: contentArea
    width: 800
    height: 600

    // 先把各个UI表单封装成Component，初始不会实例化
    Component { id: aFormComp; AForm {} }
    Component { id: bFormComp; BForm {} }
    Component { id: cFormComp; CForm {} }

    // 用Loader来动态加载组件，对应左右两个显示位置
    Loader { id: leftPanel; anchors.top: parent.top }
    Loader { id: rightPanel; anchors.top: parent.top }

    states: [
        State {
            name: "AB" // A+B组合：左A右B
            PropertyChanges { 
                target: leftPanel 
                sourceComponent: aFormComp 
                x: 0 
            }
            PropertyChanges { 
                target: rightPanel 
                sourceComponent: bFormComp 
                x: 400 
            }
        },
        State {
            name: "BA" // B+A组合：左B右A
            PropertyChanges { 
                target: leftPanel 
                sourceComponent: bFormComp 
                x: 0 
            }
            PropertyChanges { 
                target: rightPanel 
                sourceComponent: aFormComp 
                x: 400 
            }
        },
        State {
            name: "BC" // B+C组合：左B右C
            PropertyChanges { 
                target: leftPanel 
                sourceComponent: bFormComp 
                x: 0 
            }
            PropertyChanges { 
                target: rightPanel 
                sourceComponent: cFormComp 
                x: 400 
            }
            // 如果某个状态只需要单个组件，把另一个Loader的sourceComponent设为null即可销毁组件
            // PropertyChanges { target: rightPanel; sourceComponent: null }
        }
    ]

    // 默认状态
    state: "AB"
}

关键说明： #

1. Component封装：把每个A.ui.qml这类文件包装成Component，这样组件不会在启动时就全部实例化，只有被Loader加载时才会创建对象，节省内存。
2. Loader动态加载：Loader是QML专门用来动态加载组件的容器，通过sourceComponent属性指定要加载的Component，切换时会自动销毁旧组件、创建新组件。
3. State控制逻辑：在每个状态里，通过PropertyChanges同时控制Loader的加载目标和位置，实现不同组合的切换。
4. 状态保留技巧：如果需要保留表单的用户输入状态（比如切换状态后不想丢失数据），可以把Loader的active设为false代替sourceComponent: null，这样组件会被隐藏但不会销毁，数据会保留。

这样修改后，你只需要设置contentArea.state = "BA"或者其他状态名，就能自动加载对应组合的表单，完全符合你的需求～

内容的提问来源于stack exchange，提问作者marco