qml之轮播效果
前言：
这是一个阳光明媚的上午，温暖的阳光以45度的夹角斜射在我2k高清显示屏上，我深吸了一口经过微波炉加热后弥漫着饭菜味道的空气，望了一眼左手边美女UI的卡姿兰大眼睛，手指不停的点击着鼠标，时而发出叹气的声音，也许是给产品页配图而烦恼吧，我帮不上什么忙，也不知道该怎么温言软语的安慰她，毕竟我也不能用我老年人的审美去给她提什么建设性的意见，好吧，我终于打开了我许久未写的csdn博客页。
该博客用于记录qml（5.6.0版本）实现图片的轮播滚动效果，实现细节不复杂，共两种实现方法，第一种主要用到了Timer定时器和NumberAnimation 动画效果，第二种用到了SwipeView和PageIndicator控件。以下是具体的实现代码，复制粘贴后可以直接运行，当然了图片路径要替换成自己的，废话不多说，直接上干货！
先上效果图：
完整代码：
方法一：
import QtQuick 2.0
import QtQuick.Window 2.2
import QtQuick.Layouts 1.3
import QtQml 2.2
Window {
id:id_root
visible: true
width: 800
height: 500
Rectangle{
id: id_bk
color: "black"
anchors.fill: parent
Rectangle{
id: id_bk2
color: "black"
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
width: 600
clip: true
ListModel {
id:id_model
ListElement {
_source:"file:///C:/Users/admin/Pictures/1.png"
}
ListElement {
_source:"file:///C:/Users/admin/Pictures/2.png"
}
ListElement {
_source:"file:///C:/Users/admin/Pictures/3.png"
}
ListElement {
_source:"file:///C:/Users/admin/Pictures/4.png"
}
}
Image{
id:id_img_last
width: id_img_cur.width
anchors.right: id_img_cur.left
anchors.rightMargin: 0
anchors.top: id_img_cur.top
anchors.bottom: id_img_cur.bottom
fillMode: Image.PreserveAspectFit
}
Image{
id:id_img_cur
x:(id_bk2.width - id_img_cur.width)/2
width: 600
fillMode: Image.PreserveAspectFit
anchors.verticalCenter: parent.verticalCenter
source: id_rp.count ? id_rp.model.get(0)._source : undefined
NumberAnimation {
id: anim
target: id_img_cur
properties: "x"
from: id_bk2.width - 30
to: (id_bk2.width - id_img_cur.width)/2
duration: 2000
easing.type: Easing.OutQuint
easing.amplitude: 2.0
easing.period: 1.5
onStopped: {
id_img_last.source = id_img_cur.source
}
}
}
Row {
id:id_list
height: 20
anchors.top: id_img_cur.bottom
anchors.topMargin: 5
anchors.horizontalCenter: id_bk2.horizontalCenter
spacing: 10
property var curIndex: id_rp.count ? 0 : -1
Repeater {
id:id_rp
model: id_model
Rectangle {
width: 20
height: 20
radius: 10
color: id_list.curIndex === index ? "gray" : "transparent"
border.width: 1
border.color: "white"
MouseArea{
id:id_mouse
anchors.fill: parent
cursorShape:Qt.PointingHandCursor
onClicked: {
if(id_list.curIndex !== index)
{
if(anim.running)
anim.stop()
id_list.curIndex = index
id_img_cur.source = _source
anim.start()
}
}
}
}
}
}
Timer {
id: id_timer
interval: 4000
repeat: true
onTriggered: {
if(!anim.running)
{
var count = id_rp.count
if(count > 1)
{
id_list.curIndex = id_list.curIndex + 1 >= count ? 0 : id_list.curIndex + 1
id_img_cur.source = id_rp.model.get(id_list.curIndex)._source
anim.start()
}
}
}
}
Component.onCompleted: id_timer.start()
}
}
}
方法二：
import QtQuick 2.0
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.3
import Qt.labs.controls 1.0
import QtQml 2.2
Window {
id:id_root
visible: true
width: 800
height: 500
Rectangle{
id: id_bk
color: "white"
anchors.fill: parent
Rectangle {
id:userwindow
anchors.fill: parent
//图片地址数组↓
property var imagelist: ["file:///C:/Users/slf/Pictures/dd/1.png"
,"file:///C:/Users/slf/Pictures/dd/2.png"
,"file:///C:/Users/slf/Pictures/dd/3.png"
,"file:///C:/Users/slf/Pictures/dd/4.png"];
property var i: 0;
//图片组件
Component{
id:swipeImage;
Image{
asynchronous: true;
}
}
Rectangle{
id:rect;
width: parent.width/2;
height: parent.height/2;
anchors.top: parent.top;
anchors.topMargin: 20;
anchors.horizontalCenter: parent.horizontalCenter;
clip: true; //截断多出来的部分
SwipeView{
id:swipeview;
anchors.fill: parent;
Timer{//3.5秒后切换图片
id:imageSwitch;
interval: 3500;
repeat: true;
onTriggered: {
swipeview.currentIndex=(swipeview.currentIndex+1)%4;
indicator.currentIndex=swipeview.currentIndex;
}
}
}
PageIndicator{
id:indicator;
count:userwindow.imagelist.length
interactive: true;
anchors.bottom: rect.bottom;
anchors.bottomMargin: -6;
anchors.horizontalCenter: rect.horizontalCenter;
onCurrentIndexChanged: {
swipeview.currentIndex=currentIndex;
}
delegate: Rectangle{
width: 10;height: 10
radius: 5
color: indicator.currentIndex === index ? "green" : "gray"
}
}
}
Component.onCompleted: {
for(i;i<userwindow.imagelist.length;i++)
{
swipeImage.createObject(swipeview,{"source":userwindow.imagelist[i],"x":swipeview.x,"y":swipeview.y,
"width":swipeview.width,"height":swipeview.height});
}
swipeview.currentIndex=0;
imageSwitch.start();
}
}
}
}