From 1e4f939de7347ecaea5881956254856da6fa72f0 Mon Sep 17 00:00:00 2001 From: zhuzihcu Date: Wed, 15 Mar 2023 14:49:33 +0800 Subject: [PATCH] update --- src/controls/FluCarousel.qml | 197 +++++++++++++++++++---------- src/controls/FluRectangle.qml | 2 +- src/controls/FluScrollablePage.qml | 1 + src/controls/FluShadow.qml | 2 +- 4 files changed, 132 insertions(+), 70 deletions(-) diff --git a/src/controls/FluCarousel.qml b/src/controls/FluCarousel.qml index 7f26307c..475bd882 100644 --- a/src/controls/FluCarousel.qml +++ b/src/controls/FluCarousel.qml @@ -1,100 +1,161 @@ 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 } - ListView{ - id:list_view + FluRectangle{ 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 + radius: [control.radius,control.radius,control.radius,control.radius] + FluShadow{ + radius:control.radius + } + ListView{ + id:list_view + anchors.fill: parent + snapMode: ListView.SnapOneItem + clip: true + boundsBehavior: ListView.StopAtBounds + model:content_model + maximumFlickVelocity: 4 * (list_view.orientation === + Qt.Horizontal ? width : height) + delegate: Item{ + width: ListView.view.width + height: ListView.view.height - 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: 100 - 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 + property int displayIndex: { + if(index === 0) + return content_model.count-3 + if(index === content_model.count-1) + return 0 + return index-1 } - if(contentX<=minY){ - contentX = minY + + Image { + anchors.fill: parent + source: model.url + fillMode:Image.PreserveAspectCrop + } + + } + + preferredHighlightBegin: 0 + preferredHighlightEnd: 0 + highlightMoveDuration: 0 + + onMovementEnded:{ + 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*(currentIndex+1),list_view.count*list_view.width) + var minY = Math.max(0,(list_view.width*(currentIndex-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) - + orientation : ListView.Horizontal } } + 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() + + } + } + } diff --git a/src/controls/FluRectangle.qml b/src/controls/FluRectangle.qml index 2673d23e..4ddf836d 100644 --- a/src/controls/FluRectangle.qml +++ b/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 diff --git a/src/controls/FluScrollablePage.qml b/src/controls/FluScrollablePage.qml index 37ca60ea..e0cd5364 100644 --- a/src/controls/FluScrollablePage.qml +++ b/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 diff --git a/src/controls/FluShadow.qml b/src/controls/FluShadow.qml index f1167c0b..7e8863a1 100644 --- a/src/controls/FluShadow.qml +++ b/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