update

src/controls/FluCarousel.qml

@@ -1,23 +1,31 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
+import FluentUI 1.0
 
-Rectangle {
+Item {
 
 
     id:control
 
-    property int position: 1
-
     property bool flagXChanged: true
+    property int radius : 5
+    property int loopTime: 2000
+    property bool showIndicator: true
+
 
     width: 400
     height: 300
 
-
     ListModel{
         id:content_model
     }
 
+    FluRectangle{
+        anchors.fill: parent
+        radius: [control.radius,control.radius,control.radius,control.radius]
+        FluShadow{
+            radius:control.radius
+        }
         ListView{
             id:list_view
             anchors.fill: parent
@@ -25,10 +33,11 @@ Rectangle {
             clip: true
             boundsBehavior: ListView.StopAtBounds
             model:content_model
-        delegate: Rectangle{
+            maximumFlickVelocity: 4 * (list_view.orientation ===
+                                       Qt.Horizontal ? width : height)
+            delegate: Item{
                 width: ListView.view.width
                 height: ListView.view.height
-            color:model.color
 
                 property int displayIndex: {
                     if(index === 0)
@@ -38,32 +47,40 @@ Rectangle {
                     return index-1
                 }
 
-            Text{
-                color:"red"
-                text: displayIndex
-                font.pixelSize: 32
-                anchors.centerIn: parent
+                Image {
+                    anchors.fill: parent
+                    source: model.url
+                    fillMode:Image.PreserveAspectCrop
                 }
 
             }
-        Timer{
-            id:tiemr
-            interval: 100
-            onTriggered: {
-                control.position = list_view.contentX/list_view.width
-            }
-        }
+
+            preferredHighlightBegin: 0
+            preferredHighlightEnd: 0
+            highlightMoveDuration: 0
+
             onMovementEnded:{
-            flagXChanged = false
-            tiemr.restart()
+                currentIndex = list_view.contentX/list_view.width
+                if(currentIndex === 0){
+                    currentIndex = list_view.count-2
+                }else if(currentIndex === list_view.count-1){
+                    currentIndex = 1
                 }
+                flagXChanged = false
+                timer_run.start()
+            }
+
             onMovementStarted: {
                 flagXChanged = true
+                timer_run.stop()
             }
+
             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)))
+                    var maxX = Math.min(list_view.width*(currentIndex+1),list_view.count*list_view.width)
+                    var minY = Math.max(0,(list_view.width*(currentIndex-1)))
                     if(contentX>=maxX){
                         contentX = maxX
                     }
@@ -74,27 +91,71 @@ Rectangle {
             }
             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
+        list_view.currentIndex = 1
+        timer_run.restart()
+    }
+
+    Row{
+        spacing: 10
+        anchors{
+            horizontalCenter: parent.horizontalCenter
+            bottom: parent.bottom
+            bottomMargin: 20
+        }
+        visible: showIndicator
+        Repeater{
+            model: list_view.count
+            Rectangle{
+                width: 8
+                height: 8
+                radius: 4
+                visible: {
+                    if(index===0 || index===list_view.count-1)
+                        return false
+                    return true
+                }
+                layer.samples: 4
+                layer.enabled: true
+                layer.smooth: true
+                border.width: 1
+                border.color: FluColors.Grey100
+                color:   list_view.currentIndex === index ?  FluTheme.primaryColor.dark : Qt.rgba(1,1,1,0.5)
+            }
         }
     }
 
+
+
+    Timer{
+        id:timer_anim
+        interval: 250
+        onTriggered: {
+            list_view.highlightMoveDuration = 0
+            if(list_view.currentIndex === list_view.count-1){
+                list_view.currentIndex = 1
+            }
+        }
+    }
+
+    Timer{
+        id:timer_run
+        interval: control.loopTime
+        repeat: true
+        onTriggered: {
+            list_view.highlightMoveDuration = 250
+            list_view.currentIndex = list_view.currentIndex+1
+            timer_anim.start()
+
+        }
+    }
+
+}
+

src/controls/FluRectangle.qml

@@ -9,7 +9,7 @@ Item{
     property color borderColor:"red"
     property int borderWidth: 1
     property bool shadow: true
-    default property alias contentItem: container.children
+    default property alias contentItem: container.data
 
     Rectangle{
         id:container

src/controls/FluScrollablePage.qml

@@ -22,6 +22,7 @@ Item {
         width: parent.width
         contentWidth: parent.width
         contentHeight: container.height
+        boundsBehavior: Flickable.StopAtBounds
         ScrollBar.vertical: ScrollBar { }
         anchors{
             top: text_title.bottom

src/controls/FluShadow.qml

@@ -6,7 +6,7 @@ Item {
     anchors.margins: -4
     property color color: FluTheme.isDark ? "#FFFFFF" : "#000000"
 
-    property var radius: 4
+    property int radius: 4
 
     Rectangle{
         width: root.width