Qt/QML：ListView使用外部Delegate实现垂直页面切换的问题咨询

我明白你想要的是类似垂直版SwipeView的效果，用ListView加载独立QML页面并通过垂直滑动切换。你的代码已经有了雏形，但几个关键配置没做好，导致无法正常滚动切换。下面我给你完整的解决方案：

问题分析 #

你之前的代码有两个核心问题：

• 第一个示例中，Loader的source被硬编码成了"Page1.qml"，没有绑定到ListModel的数据源，所以只会加载同一个页面；
• ListView的尺寸配置和delegate的尺寸匹配没做好，导致滑动区域不对或者页面没有占满整个视图。

完整解决方案 #

我们需要让ListView占满父容器，用ListModel存储每个页面的QML路径，再通过Loader动态加载每个页面，同时确保每个delegate（页面）的尺寸和ListView一致。

1. 主页面main.qml

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 400
    height: 600
    visible: true
    title: qsTr("Vertical Page Swipe")

    ListView {
        id: verticalSwipeView
        anchors.fill: parent  // 让ListView占满整个窗口
        orientation: Qt.Vertical  // 明确设置垂直方向（默认就是垂直，但显式写更清晰）
        snapMode: ListView.SnapOneItem  // 滑动后自动对齐到完整页面
        highlightRangeMode: ListView.StrictlyEnforceRange  // 禁止滑动到页面间隙
        boundsBehavior: Flickable.StopAtBounds  // 滑动到边界时停止

        // 存储所有要加载的页面路径
        model: ListModel {
            ListElement { pageSource: "Page1.qml" }
            ListElement { pageSource: "Page2.qml" }
            ListElement { pageSource: "Page3.qml" }
        }

        // 委托：用Loader加载外部QML页面
        delegate: Loader {
            width: verticalSwipeView.width  // 宽度匹配ListView
            height: verticalSwipeView.height  // 高度匹配ListView，确保每个页面全屏
            source: model.pageSource  // 绑定到model里的页面路径
        }
    }
}

2. 示例页面Page1.qml

import QtQuick 2.15

Rectangle {
    width: parent.width
    height: parent.height
    color: "#f0f0f0"

    Text {
        anchors.centerIn: parent
        font.pixelSize: 48
        text: "Page 1"
        color: "#333"
    }
}

3. 示例页面Page2.qml

import QtQuick 2.15

Rectangle {
    width: parent.width
    height: parent.height
    color: "#e6f7ff"

    Text {
        anchors.centerIn: parent
        font.pixelSize: 48
        text: "Page 2"
        color: "#1890ff"
    }
}

关键细节说明 #

• ListView尺寸：通过anchors.fill: parent确保ListView占满整个父容器，这样滑动区域足够大；
• Delegate尺寸：Loader的宽高直接绑定到ListView的宽高，保证每个加载的页面都是全屏的，滑动时切换的是整个页面；
• Model配置：用pageSource字段存储每个页面的QML文件路径，这样可以灵活添加/修改页面；
• 滑动行为：snapMode和highlightRangeMode的组合确保滑动后停在完整页面，不会出现半页的情况。

如果你想用组件而不是文件路径（比如提前注册的QML组件），也可以修改Model为存储sourceComponent：

model: ListModel {
    ListElement { pageComponent: Page1 }
    ListElement { pageComponent: Page2 }
}

delegate: Loader {
    width: verticalSwipeView.width
    height: verticalSwipeView.height
    sourceComponent: model.pageComponent
}

这种方式需要确保Page1、Page2等组件在main.qml中已经导入或者注册。

这样配置后，你就可以通过垂直滑动在不同的外部QML页面之间切换了，效果和垂直版的SwipeView完全一致！

内容的提问来源于stack exchange，提问作者Bozhidar Ivaylov Peychev