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,100 +1,161 @@
import QtQuick 2.15 import QtQuick 2.15
import QtQuick.Controls 2.15 import QtQuick.Controls 2.15
import FluentUI 1.0
Rectangle { Item {
id:control id:control
property int position: 1
property bool flagXChanged: true property bool flagXChanged: true
property int radius : 5
property int loopTime: 2000
property bool showIndicator: true
width: 400 width: 400
height: 300 height: 300
ListModel{ ListModel{
id:content_model id:content_model
} }
ListView{ FluRectangle{
id:list_view
anchors.fill: parent anchors.fill: parent
snapMode: ListView.SnapOneItem radius: [control.radius,control.radius,control.radius,control.radius]
clip: true FluShadow{
boundsBehavior: ListView.StopAtBounds radius:control.radius
model:content_model }
delegate: Rectangle{ ListView{
width: ListView.view.width id:list_view
height: ListView.view.height anchors.fill: parent
color:model.color 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: { property int displayIndex: {
if(index === 0) if(index === 0)
return content_model.count-3 return content_model.count-3
if(index === content_model.count-1) if(index === content_model.count-1)
return 0 return 0
return index-1 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
} }
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
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){ function setData(data){
content_model.clear() content_model.clear()
content_model.append(data[data.length-1]) content_model.append(data[data.length-1])
content_model.append(data) content_model.append(data)
content_model.append(data[0]) content_model.append(data[0])
list_view.positionViewAtIndex(1, ListView.Beginning) list_view.currentIndex = 1
position = 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 color borderColor:"red"
property int borderWidth: 1 property int borderWidth: 1
property bool shadow: true property bool shadow: true
default property alias contentItem: container.children default property alias contentItem: container.data
Rectangle{ Rectangle{
id:container id:container

View File

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

View File

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