如何实现使用QtQuick循环轮播图,并支持用户滑动切换

原创 2016年08月30日 14:03:20

1 建立一个 QtQuick工程

2 在生成的main.qml中,改成如下的:

import QtQuick 2.6

import QtQuick.Window 2.2
import QtGraphicalEffects 1.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    //MainForm {
        //anchors.fill: parent
        //mouseArea.onClicked: {
        //    Qt.quit();
        //}
    //}


3 然后添加上下面的:(Part3来源:Jason


Flickable {
        id: flickableForImage
        z: 6
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: 3
        width: parent.width
        height: (width / 375) * 135
        contentWidth: width * 3
        contentHeight: height
        onMovementStarted: {
            timerForImage.running = false;
            animationForContenX.running = false;
        }
        onMovementEnded: {
            timerForImage.running = true;
            animationForContenX.duration = 500;
            var a = Math.abs( contentX - 0 );
            var b = Math.abs( contentX - width );
            var c = Math.abs( contentX - (width * 2) );
            var d = Math.min( a, b, c );
            if ( a == d)
            {
                animationForContenX.to = 0;
                animationForContenX.running = true;
            }
            else if( b == d )
            {
                animationForContenX.to = width;
                animationForContenX.running = true;
            }
            else if (c == d )
            {
                animationForContenX.to = width * 2;
                animationForContenX.running = true;
            }
        }
        onWidthChanged: {
            if ( animationForContenX.running )
            {
                return;
            }
            contentX = 0;
        }
        onHeightChanged: {
            if ( animationForContenX.running )
            {
                return;
            }
            contentX = 0;
        }
        Timer {
            id: timerForImage
            interval: 6000
            running: !pageForLogin.visible
            repeat: true
            onTriggered: {
                animationForContenX.running = false;
                animationForContenX.duration = 1000;
                if ( flickableForImage.contentX <= 0 )
                {
                    animationForContenX.to = width;
                    animationForContenX.running = true;
                }
                else if ( flickableForImage.contentX <= width )
                {
                    animationForContenX.to = width * 2;
                    animationForContenX.running = true;
                }
                else
                {
                    animationForContenX.to = 0;
                    animationForContenX.running = true;
                }
            }
        }
        NumberAnimation {
            id: animationForContenX
            target: flickableForImage
            property: "contentX"
            easing.type: Easing.OutCubic
        }
        Item {
            width: parent.width
            height: parent.height
            Image {
                width: parent.width / 3
                height: parent.height
                source: "qrc:/Mobile/Menu/TitleImage1.jpg"
            }
            Image {
                x: (parent.width / 3) * 1
                width: parent.width / 3
                height: parent.height
                source: "qrc:/Mobile/Menu/TitleImage2.jpg"
            }
            Image {
                x: (parent.width / 3) * 2
                width: parent.width / 3
                height: parent.height
                source: "qrc:/Mobile/Menu/TitleImage3.jpg"
            }
        }
        RectangularGlow {
            anchors.fill: parent
            z: -1
            width: parent.width
            height: parent.height
            glowRadius: 2
            spread: 0.22
            color: "#30000000"
        }
    }
}

 

4 QML类型说明-Flickable

ImportStatement:   import QtQuick 2.2

Inherits:      Item

InheritedBy:    GridView and ListView.





QML自动循环轮播图

qml轮播图 自动循环滚动图 无限循环展示
  • Samson_Shu
  • Samson_Shu
  • 2017年03月23日 15:21
  • 941

QT-qml轮播图自动循环

  • 2017年03月23日 12:18
  • 205KB
  • 下载

QML 实现图片帧渐隐渐显轮播

  • 2017年09月10日 19:51
  • 46KB
  • 下载

QML Image获取图片资源路径的细节

QML Image获取图片资源路径的细节, 解决QML Image: Cannot open: qrc:///images/Blue hills.jpg ”的错误。...
  • xbmoxia
  • xbmoxia
  • 2014年11月04日 10:55
  • 4500

轮播图广告图自动循环播放左右滑动源码Demo

  • 2015年08月13日 17:00
  • 1.97MB
  • 下载

QML图像、状态和动画--图片、边界图片和动态图片

1. 图片 Image     source: 资源URL,可以用所有Qt支持的格式,PNG、JPEG、SVG等     大小:width、height,图片缩放到这个大小。没有指定,自动使用加载的图...
  • u012419303
  • u012419303
  • 2015年05月11日 16:13
  • 1971

图片轮播效果图

  • 2016年06月02日 21:35
  • 6.78MB
  • 下载

在QML中实现图片翻转的效果

好久没有写blog了,前些日子有点忙,现在稍微闲了一下,开始更新一些成果吧! 借鉴Qt中的扫雷应用程序的代码和前辈们的一些代码示例,贴出一段代码,仅供参考! 首先是,翻转效果的实现文件!  //...
  • sgnh123456
  • sgnh123456
  • 2012年11月05日 09:01
  • 3475

Qt Quick播放Gif动画

Qt Quick提供了一个类 AnimatedImage ,可以播放 Gif 动画,使用简单,这里是一个示例。...
  • foruok
  • foruok
  • 2014年12月02日 12:47
  • 9760

QML 实现图片帧渐隐渐显轮播

前言所谓图片帧渐隐渐显轮播就是,一组图片列表,当前图片逐渐改变透明度隐藏,同时下一张图片逐渐改变透明度显示,依次循环,达到渐隐渐显的效果,该效果常用于图片展示,相比左右自动切换的轮播方式来说,这种方式...
  • luoyayun361
  • luoyayun361
  • 2017年09月10日 19:53
  • 375
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:如何实现使用QtQuick循环轮播图,并支持用户滑动切换
举报原因:
原因补充:

(最多只允许输入30个字)