QML 界面切换的方法

在 QML 中实现界面切换有多种方法，具体选择取决于应用场景和需求。以下是几种常用的方法及示例：

1. 使用 Loader 动态加载组件

原理：通过动态加载不同的 QML 文件或组件实现界面切换，适合需要按需加载的场景。

// Main.qml
Item {
    Loader {
        id: pageLoader
        anchors.fill: parent
        source: "Page1.qml" // 初始页面
    }

    Button {
        text: "切换页面"
        onClicked: {
            pageLoader.source = "Page2.qml" // 切换为 Page2
        }
    }
}

优点：节省内存（卸载不需要的组件），适合复杂界面。
缺点：需要手动管理资源。

2. 使用 StackView 堆栈导航

原理：通过堆栈管理页面（类似浏览器导航），支持前进/后退过渡动画。

// Main.qml
StackView {
    id: stackView
    initialItem: Page1 {} // 初始页面

    // 切换到新页面（压入堆栈）
    Button {
        text: "跳转到 Page2"
        onClicked: stackView.push("Page2.qml")
    }

    // 返回上一页（弹出堆栈）
    Button {
        text: "返回"
        onClicked: stackView.pop()
    }
}

优点：内置导航逻辑和动画，适合多层级界面。
缺点：需要维护堆栈状态。

3. 通过 visible 属性切换可见性

原理：在同一父元素下切换子元素的可见性，适合简单场景。

// Main.qml
Item {
    Page1 { id: page1; visible: true }
    Page2 { id: page2; visible: false }

    Button {
        text: "切换页面"
        onClicked: {
            page1.visible = !page1.visible;
            page2.visible = !page2.visible;
        }
    }
}

优点：实现简单，无需动态加载。
缺点：所有界面常驻内存，不适合复杂应用。

4. 使用 SwipeView 滑动切换

原理：通过左右滑动切换页面，适合向导或轮播界面。

// Main.qml
SwipeView {
    id: swipeView
    anchors.fill: parent
    currentIndex: 0

    Page1 {}
    Page2 {}
}


// 显示当前页码
Text {
    text: `${swipeView.currentIndex + 1}/${swipeView.count}`
}

5. 状态（States）与过渡（Transitions）

原理：通过定义不同状态和过渡动画切换界面。

Item {
    id: container
    state: "State1"

    // 状态定义
    states: [
        State {
            name: "State1"
            PropertyChanges { target: page1; visible: true }
            PropertyChanges { target: page2; visible: false }
        },
        State {
            name: "State2"
            PropertyChanges { target: page1; visible: false }
            PropertyChanges { target: page2; visible: true }
        }
    ]

    // 切换按钮
    Button {
        text: "切换状态"
        onClicked: container.state = (container.state === "State1" ? "State2" : "State1")
    }
}

选择建议

• 简单切换：使用 visible 或 Loader。

• 导航需求（如返回逻辑）：优先选择 StackView。

• 滑动效果：使用 SwipeView。

• 动态加载大组件：选择 Loader 避免内存浪费。

根据具体需求灵活组合这些方法，还可以通过自定义动画（如 NumberAnimation）提升用户体验。