SwipeView QML 类型

允许用户通过水平滑动进行页面导航。 更多...

• 所有成员列表，包括继承成员

属性

• horizontal : bool (自 QtQuick.Controls 2.3 (Qt 5.10) 开始)
• interactive : bool (自 QtQuick.Controls 2.1 (Qt 5.8) 开始)
• orientation : 枚举 (自 QtQuick.Controls 2.2 (Qt 5.9) 开始)
• vertical : bool (自 QtQuick.Controls 2.3 (Qt 5.10) 开始)

附加属性

• index : int
• isCurrentItem : bool
• isNextItem : bool (自 QtQuick.Controls 2.1 (Qt 5.8) 开始)
• isPreviousItem : bool (自 QtQuick.Controls 2.1 (Qt 5.8) 开始)
• view : SwipeView

详细描述

SwipeView 提供了一个基于滑动的导航模式。

SwipeView 通过一系列页面填充。一次只显示一个页面。用户可以通过水平滑动在页面之间导航。请注意，SwipeView 本身是完全非视觉的。建议与 PageIndicator 结合使用，使用户能够获得多个页面的视觉提示。

SwipeView {
    id: view

    currentIndex: 1
    anchors.fill: parent

    Item {
        id: firstPage
    }
    Item {
        id: secondPage
    }
    Item {
        id: thirdPage
    }
}

PageIndicator {
    id: indicator

    count: view.count
    currentIndex: view.currentIndex

    anchors.bottom: view.bottom
    anchors.horizontalCenter: parent.horizontalCenter
}

如上图所示，SwipeView 通常通过在视图的子元素中定义静态页面集合来填充。也可以在运行时动态地 添加、插入、移动 和 删除 页面。

当 SwipeView 与另一个容器，例如 TabBar 相结合时，需要在每个控制的 currentIndex 属性之间进行双向绑定。为此，为了避免中断绑定，请避免直接设置 currentIndex，而应使用 setCurrentIndex()，例如。有关更多信息，请参阅 管理当前索引。

要执行在 currentIndex 发生变化时执行的操作，请使用 onCurrentIndexChanged 属性改变信号处理器

onCurrentIndexChanged: {
    print("currentIndex changed to", currentIndex)
    // ...
}

通常不建议向SwipeView添加过多的页面。然而，当页面的数量增长较大或单个页面相对复杂时，通过卸载用户当前无法触及的页面，可以释放资源。以下示例展示了如何使用Loader来同时实例化最多三个页面。

SwipeView {
    Repeater {
        model: 6
        Loader {
            active: SwipeView.isCurrentItem || SwipeView.isNextItem || SwipeView.isPreviousItem
            sourceComponent: Text {
                text: index
                Component.onCompleted: console.log("created:", index)
                Component.onDestruction: console.log("destroyed:", index)
            }
        }
    }
}

另请参阅：TabBar、PageIndicator、自定义SwipeView、导航控件、容器控件以及Qt Quick Controls 中的焦点管理。

属性文档

附加属性文档