main
zhuzihcu 2023-03-15 14:49:33 +08:00
parent 926132a285
commit 1e4f939de7
4 changed files with 132 additions and 70 deletions

View File

@ -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()
}
}
}

View File

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

View File

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

View File

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