代码
import QtQuick
import QtQuick.Controls
import FluentUIItem {property bool autoPlay: trueproperty int loopTime: 2000property var modelproperty Component delegateproperty bool showIndicator: trueproperty int indicatorGravity : Qt.AlignBottom | Qt.AlignHCenterproperty int indicatorMarginLeft: 0property int indicatorMarginRight: 0property int indicatorMarginTop: 0property int indicatorMarginBottom: 20property int indicatorSpacing: 10property alias indicatorAnchors: layout_indicator.anchorsproperty Component indicatorDelegate : com_indicatorid:controlwidth: 400height: 300ListModel{id:content_model}QtObject{id:dproperty bool flagXChanged: trueproperty bool isAnimEnable: control.autoPlay && list_view.count>3function setData(data){if(!data){return}content_model.clear()content_model.append(data[data.length-1])content_model.append(data)content_model.append(data[0])list_view.highlightMoveDuration = 0list_view.currentIndex = 1list_view.highlightMoveDuration = 250if(d.isAnimEnable){timer_run.restart()}}}ListView{id:list_viewanchors.fill: parentsnapMode: ListView.SnapOneItemclip: trueboundsBehavior: ListView.StopAtBoundsmodel:content_modelmaximumFlickVelocity: 4 * (list_view.orientation === Qt.Horizontal ? width : height)preferredHighlightBegin: 0preferredHighlightEnd: 0highlightMoveDuration: 0Component.onCompleted: {d.setData(control.model)}interactive: list_view.count>3Connections{target: controlfunction onModelChanged(){d.setData(control.model)}}orientation : ListView.Horizontaldelegate: Item{id:item_controlwidth: ListView.view.widthheight: ListView.view.heightproperty int displayIndex: {if(index === 0)return content_model.count-3if(index === content_model.count-1)return 0return index-1}FluLoader{property int displayIndex : item_control.displayIndexproperty var model: list_view.model.get(index)anchors.fill: parentsourceComponent: {if(model){return control.delegate}return undefined}}}onMovementEnded:{currentIndex = list_view.contentX/list_view.widthif(currentIndex === 0){currentIndex = list_view.count-2}else if(currentIndex === list_view.count-1){currentIndex = 1}d.flagXChanged = falsetimer_run.restart()}onMovementStarted: {d.flagXChanged = truetimer_run.stop()}onContentXChanged: {if(d.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}}}}Component{id:com_indicatorRectangle{width: 8height: 8radius: 4FluShadow{radius: 4}scale: checked ? 1.2 : 1color: checked ? FluTheme.primaryColor : Qt.rgba(1,1,1,0.7)border.width: mouse_item.containsMouse ? 1 : 0border.color: FluTheme.primaryColorMouseArea{id:mouse_itemhoverEnabled: trueanchors.fill: parentonClicked: {changedIndex(realIndex)}}}}Row{id:layout_indicatorspacing: control.indicatorSpacinganchors{horizontalCenter:(indicatorGravity & Qt.AlignHCenter) ? parent.horizontalCenter : undefinedverticalCenter: (indicatorGravity & Qt.AlignVCenter) ? parent.verticalCenter : undefinedbottom: (indicatorGravity & Qt.AlignBottom) ? parent.bottom : undefinedtop: (indicatorGravity & Qt.AlignTop) ? parent.top : undefinedleft: (indicatorGravity & Qt.AlignLeft) ? parent.left : undefinedright: (indicatorGravity & Qt.AlignRight) ? parent.right : undefinedbottomMargin: control.indicatorMarginBottomleftMargin: control.indicatorMarginBottomrightMargin: control.indicatorMarginBottomtopMargin: control.indicatorMarginBottom}visible: showIndicatorRepeater{id:repeater_indicatormodel: list_view.countFluLoader{property int displayIndex: {if(index === 0)return list_view.count-3if(index === list_view.count-1)return 0return index-1}property int realIndex: indexproperty bool checked: list_view.currentIndex === indexsourceComponent: {if(index===0 || index===list_view.count-1)return undefinedreturn control.indicatorDelegate}}}}Timer{id:timer_animinterval: 250onTriggered: {list_view.highlightMoveDuration = 0if(list_view.currentIndex === list_view.count-1){list_view.currentIndex = 1}}}Timer{id:timer_runinterval: control.loopTimerepeat: d.isAnimEnableonTriggered: {list_view.highlightMoveDuration = 250list_view.currentIndex = list_view.currentIndex+1timer_anim.start()}}function changedIndex(index){d.flagXChanged = truetimer_run.stop()list_view.currentIndex = indexd.flagXChanged = falseif(d.isAnimEnable){timer_run.restart()}}
}
效果
参考
https://github.com/zhuzichu520/FluentUI
GitHub - zhuzichu520/FluentPlayer
GitHub - zhuzichu520/QtHub
https://blog.51cto.com/u_6343747/5465068
Felgo简介--Qt开发者的福音-CSDN博客