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



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

    可以互动的轮播图,就是用户以滑动的方式主动切换图片。然后这个轮播图还是可以头尾循环的那种,我现在只想到 PathView。但是不熟悉。



  • @qyvlik 我认为Qt的ListView也是可以达到效果的,通过ListView和ObjectModel,可以实现你所说的轮播图的效果。至于头尾循环,可以编程通过控制Flickable::contentX来实现。



  • 我有做过一个轮播,不过是完全自己写的,可以滑动,可以自动播放。



  • @Jason 可以循环吗?就是头尾相连的那种效果。



  • @qyvlik
    无限循环?



  • @qyvlik
    我做的就是播放到最后一个图片时候,回到第一个图片



  • @Jason 有没有具体的动态效果图啊?或者说源码?



  • @qyvlik

    写的很一般,见谅哈。
    另外这是我从代码段里抠出来的,可能要改一下才能跑

        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"
            }
        }
    


  • @Jason 你的这段代码跑成功了吗?



  • @Jason 我先研究研究。



  • 这段代码很有用。下面是一个完整实现。

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



  • @Michael 你写的?



  • @qyvlik 是我整合了Jason的关键部分代码o(^▽^)o


 

最近的回复

  • 这个很有意思 ^_^

    阅读更多
  • 思路:
    1.把官方时钟demo改了,加了秒针,加了壁纸,加了小萝莉
    2.QWindow窗口嵌入到桌面

    0_1533891238039_20180810_164211.gif

    改版

    去掉秒针,把小萝莉正过来,沿着表盘走

    0_1533893719543_20180810_173309.gif

    源代码

    Fork me on Gitee

    阅读更多
  • 思路:
    1.识别鼠标移动事件
    2.QPropertyAnimation实现移动动画
    3.QLabel和QMovie使用gif

    0_1533808278715_20180809_174840.gif

    阅读更多
  • 很多小软件,实现了很好的功能。给你点赞!

    阅读更多

关注我们

微博
QQ群











召唤伊斯特瓦尔