スワイプビューの実装方法QtQuick 2.5

Question

私はQT 5.5を持っていて、それはSwipeViewをサポートしません。私はlistViewでやろうとしましたが、私は期待したものを得られません。 QT 5.6に書かれている以下のコードのような、QT 5.5にも同様の機能コードが必要です。助けてください

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クイックは2 was introduced in Qt 5.7を制御します

のQtクイックはQtのクイックでの完全なインターフェースを構築するために使用することができるコントロールのセットを提供して2を制御します。モジュールはQt 5.7で導入されました。

Qt Labs ControlsはQt 5.6で導入されたので、参照したコードはQt 5.6で動作させるためにQt.labs.controls 1.0インポートを使用する必要があります。

新しいQtバージョン（5.6またはそれ以上）を使用する必要があります。

Answer 2

Qtバージョンを更新できない場合は、ListView、VisualItemModel、およびdefault qml propertyを使用して実際にスワイプビューを概算できます。

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