如何在 QML swipeview 中实现翻页按钮

Question

我必须在 SwipeView 中使用 QML 组件（例如项目 1、项目 2、项目 3）而不使用中继器来实现页面，并且还需要实现如下所示的翻页器。 getPreviousPage Rectangle 应该将视图移动到上一页，类似于 getNextPage Rectangle。

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.0

Window {
  visible: true
  color:"black"
  width: 400+100
  height: 200

  Rectangle
  {
      id:getPreviousPage
      color:"red"
      x:0
      y:0
      width:50
      height:200
      MouseArea
      {
          anchors.fill:parent
          onClicked:
          {
              //turn to previous page
          }
      }
  }

  Rectangle
  {
      id:getNextPage
      color:"green"
      width:50
      x:450
      y:0
      height:200
      MouseArea
      {
          anchors.fill:parent
          onClicked:
          {
              //turn to next page
          }
      }
  }




  Pane {
      id: pane
      width: 400
      height: 200
      x:50
      y:0

      SwipeView {
          id: view
          currentIndex: 1
          anchors.fill: parent

          Repeater {
              model: 3

              Pane {
                  width: view.width
                  height: view.height

                  Column {
                      spacing: 40
                      width: parent.width

                      Label {
                          width: parent.width
                          wrapMode: Label.Wrap
                          horizontalAlignment: Qt.AlignHCenter
                          text: view.currentIndex
                      }


                  }
              }
          }
      }


  }
    }

Answer 1

import QtQuick 2.6
import QtQuick.Controls 2.0
import QtQuick.Window 2.0
Window {
    visible: true
    width: 200
    height: 400
    title: qsTr("Hello World")

    id: page

    SwipeView {
        id: swipeView
        anchors.fill: parent
        currentIndex: 0
        Page {
                    Label {
                        text: qsTr("First page")
                        anchors.centerIn: parent
                    }
                }
        Page {
                    Label {
                        text: qsTr("Second page")
                        anchors.centerIn: parent
                    }
                }
        Page {
                    Label {
                        text: qsTr("Third page")
                        anchors.centerIn: parent
                    }
                }
        Page {
                    Label {
                        text: qsTr("Fourth page")
                        anchors.centerIn: parent
                    }
                }
        Page {
                    Label {
                        text: qsTr("Fifth page")
                        anchors.centerIn: parent
                    }
                }
    }



    Rectangle
    {
        id:minus
        width:parent.width/2
        height:100
        anchors.left:parent.left
        anchors.bottom:parent.bottom
        color:"red"
        MouseArea
        {
            anchors.fill:parent
            onClicked:{
                if(swipeView.currentIndex>0)
                    swipeView.currentIndex--
            }
        }
    }
    Rectangle
    {
        id:plus
        width:parent.width/2
        height:100
        anchors.right:parent.right
        anchors.bottom:parent.bottom
        color:"green"
        MouseArea
        {
            anchors.fill:parent
            onClicked:{
                if(swipeView.currentIndex<4)
                    swipeView.currentIndex++
            }
        }
    }


}

您可以只使用 Page Qml 类型而不是 Repeater。上面给出的代码有 Page Turners 的示例实现。

如何在 QML swipeview 中实现翻页按钮

How to implement page turner buttons in QML swipeview

qml

qtquick2

swipeview

qtquickcontrols2