diff --git a/example/T_Carousel.qml b/example/T_Carousel.qml index 29a2070..a2df607 100644 --- a/example/T_Carousel.qml +++ b/example/T_Carousel.qml @@ -9,7 +9,14 @@ FluScrollablePage{ title:"Carousel" + + FluCarousel{ + id:carousel + + Component.onCompleted: { + carousel.setData([{color:"#000000"},{color:"#FFFFFF"},{color:"#666666"}]) + } } } diff --git a/src/controls/FluCarousel.qml b/src/controls/FluCarousel.qml index 02909d4..cf63a2f 100644 --- a/src/controls/FluCarousel.qml +++ b/src/controls/FluCarousel.qml @@ -1,7 +1,100 @@ import QtQuick 2.15 +import QtQuick.Controls 2.15 -Item { +Rectangle { + id:control + property int position: 1 + + property bool flagXChanged: true + + width: 400 + height: 300 + + + ListModel{ + id:content_model + } + + ListView{ + id:list_view + anchors.fill: parent + snapMode: ListView.SnapOneItem + clip: true + boundsBehavior: ListView.StopAtBounds + model:content_model + delegate: Rectangle{ + width: ListView.view.width + height: ListView.view.height + color:model.color + + property int displayIndex: { + if(index === 0) + return content_model.count-3 + if(index === content_model.count-1) + return 0 + return index-1 + } + + Text{ + color:"red" + text: displayIndex + font.pixelSize: 32 + anchors.centerIn: parent + } + + } + Timer{ + id:tiemr + interval: 50 + onTriggered: { + control.position = list_view.contentX/list_view.width + } + } + onMovementEnded:{ + flagXChanged = false + tiemr.restart() + } + onMovementStarted: { + flagXChanged = true + } + onContentXChanged: { + if(flagXChanged){ + var maxX = Math.min(list_view.width*(control.position+1),list_view.count*list_view.width) + var minY = Math.max(0,(list_view.width*(control.position-1))) + if(contentX>=maxX){ + contentX = maxX + } + if(contentX<=minY){ + contentX = minY + } + } + } + orientation : ListView.Horizontal + } + + onPositionChanged: { + if(control.position === 0){ + position = list_view.count-2 + list_view.positionViewAtIndex(list_view.count-2, ListView.Beginning) + + } + if(control.position === list_view.count-1){ + position = 1 + list_view.positionViewAtIndex(1, ListView.Beginning) + + } + } + + function setData(data){ + content_model.clear() + content_model.append(data[data.length-1]) + content_model.append(data) + content_model.append(data[0]) + list_view.positionViewAtIndex(1, ListView.Beginning) + position = 1 + } } +