Qt Quick - SwipeView

一、概述

SwipeView提供了一个基于滑动的导航模型。经常用在移动端里面，但是像桌面端也会用到，就像网易云音乐里面的推荐页就是用的这个来做的。

二、使用

SwipeView用一组页面填充。一次只能看到一页。用户可以通过横向滑动在页面之间导航。请注意，SwipeView本身是完全非视觉的。建议将其与PageIndicator结合使用，给用户一个有多个页面的视觉线索。

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.5

Window {
    
    
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    SwipeView {
    
    
        id: view

        currentIndex: 1
        anchors.fill: parent

        Item {
    
    
            id: firstPage

            Label{
    
    
                text: "第一页"
                anchors.centerIn: parent
            }
        }
        Item {
    
    
            id: secondPage
            Label{
    
    
                text: "第二页"
                anchors.centerIn: parent
            }
        }
        Item {
    
    
            id: thirdPage
            Label{
    
    
                text: "第三页"
                anchors.centerIn: parent
            }
        }
    }

    PageIndicator {
    
    
        id: indicator

        count: view.count
        currentIndex: view.currentIndex

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

}

如上所示，SwipeView通常使用一组静态页面填充，这些页面被内联定义为视图的子节点。还可以在运行时动态地添加、插入、移动和删除页。

三、注意要点

通常不建议在SwipeView中添加过多的页面。但当页的数量变大，或个别页相对复杂时，可能需要通过卸载用户无法直接访问的页来释放资源。下面的例子展示了如何使用Loader来同时实例化最多3个页面。

  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)
              }
          }
      }
  }

注意:SwipeView接管了添加到视图中的项目的几何管理。不支持在元素上使用锚点，任何指定的 宽度 或 高度 都会被视图覆盖。请注意，这只适用于项的根。指定宽度和高度，或者为其子元素使用锚点，都符合预期。