Wie zu implementieren swipeview QtQuick 2.5

Question

Ich habe QT 5.5 und SwipeView wird nicht unterstützt. Ich habe versucht, mit ListView zu tun, aber ich bekomme nicht, was ich erwartet habe. Ich möchte einen ähnlichen Funktionscode in QT 5.5 wie den unten angegebenen Code, der in QT 5.6 geschrieben ist. Bitte helfen

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


} 

Answer 1

Qt Quick Controls 2 was introduced in Qt 5.7:

Qt Quick Controls 2 eine Reihe von Steuerelementen, die komplette Schnittstellen in Qt Schnell bauen verwendet werden kann. Das Modul wurde in Qt 5.7 eingeführt.

Qt Labs Controls wurde in Qt 5.6, eingeführt, so der Code, den Sie würde die Qt.labs.controls 1.0 Import um mit Qt 5.6 laufen verwenden verwiesen haben.

Sie müssen eine neuere Qt-Version (5.6 oder neuer) verwenden.

Answer 2

Wenn Sie Ihre Qt-Version nicht aktualisieren können, können Sie tatsächlich eine SwipeView mit einem ListView, einem VisualItemModel und einem default qml property approximieren.

SwipeView.qml

ListView 
{ 
    id: root 

    // Allow to add pages as you would for a QtQuick.Controls 2 SwipeView 
    // Each item you declare in your SwipeView will be reparented to itemModel 
    default property alias items: itemModel.children 

    // SwipeView is horizontal 
    orientation: Qt.Horizontal 

    // Hide out of bounds pages 
    clip: true 

    // Do not stop between two pages 
    snapMode: ListView.SnapToItem 

    // Update currentIndex as you swipe through the pages 
    highlightRangeMode: ListView.StrictlyEnforceRange 

    model: VisualItemModel { 
     id: itemModel 
     // Used to bind the pages size to the swipeView size 
     onChildrenChanged: { 
      for(var i=0;i<children.length; i++) 
      { 
       children[i].width = Qt.binding(function(){return root.width}) 
       children[i].height = Qt.binding(function(){return root.height}) 
      } 
     } 
    } 

} 

Page.qml

Item { 
    property string title 

    Rectangle 
    { 
     anchors.fill: parent 
     border.width: 1 
    } 

    Text 
    { 
     anchors.horizontalCenter: parent.horizontalCenter 
     anchors.top: parent.top 
     anchors.topMargin: 20 
     text: title 
    } 
} 

PageIndicator.qml

Row 
{ 
    id: root 

    property int count 
    property int currentIndex 
    property Component delegate: bullet 
    property bool interactive 
    spacing: 5 

    Component 
    { 
     id: bullet 
     Rectangle 
     { 
      height: 10 
      width: height 
      radius: height/2 
      color:"black" 
      opacity: currentIndex==index?0.8:0.2 
     } 
    } 

    Repeater 
    { 
     model: root.count 
     Loader 
     { 
      property int index: model.index 
      sourceComponent: delegate 
     } 
    } 
} 

main.qml

import QtQuick 2.5 
import QtQuick.Controls 1.4 

ApplicationWindow 
{ 
    id: window 
    visible: true 
    width: 300 
    height: 300 

    SwipeView 
    { 
     id: swipeView 
     anchors.fill: parent 
     Page 
     { 
      title: "Page 1" 
     } 
     Page 
     { 
      title: "Page 2" 
     } 
     Page 
     { 
      title: "Page 3" 
     } 
    } 

    PageIndicator 
    { 
     id: pageIndicator 
     anchors.bottom: swipeView.bottom 
     anchors.bottomMargin: 10 
     anchors.horizontalCenter: swipeView.horizontalCenter 
     count: swipeView.count 
     currentIndex: swipeView.currentIndex 
    } 
}