Question

我必须在SwipeView中使用QML组件（例如Item 1，Item 2，Item 3）来实现页面而不使用Repeater，并且还实现页面转换器，如下所示。对于getNextPage Rectangle，getPreviousPage 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中实现页面调整器按钮

1 个答案: