如何实现使用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


 

走马观花

最近的回复

  • @chinasmu Webkit网络的部分可能不是受到Qt控制的,扩展性较差,所以呢,还不能通过代码的方式侦听网络收发数据。但是WebEngine就可以。如果可以的话,试试Qt WebEngine。😺

    阅读更多
  • C

    我用qt建了个对话框程序,里面加了个webkit,请问有办法获取该控件的全部网络封包通信数据吗?
    不采用windows hook recv和send函数的形式,或者有没有第三方的控件可以这样做

    阅读更多
  • 这个错误不是编译器的错误,而是IntelliSense的错误。
    这种情况,可以不用太担心。

    如果你使用MSVC编译应用程序,那么最好安装Qt Visual Studio Addon,使用这个插件同步开发Qt应用程序。
    不过一个小小的建议,就是Qt Creator写Qt程序非常直观,不需要在Visual Studio中那么麻烦,而且Qt Creator是强制安装的,基本上你安装了Qt 5.12,就可以在安装的目录中找到它。QAxContainer是Qt的模块activeQt中的,需要在pro文件中写QT += axcontainer,才会找到这个类。

    阅读更多
  • C

    VS2017 Qt5.12
    新建一个空的QWidget对话框,编译执行
    可以成功生成并执行,但是错误列表里显示

    傲游截图20190217212931.png

    exe文件能够成功生成。

    另外的问题:我在vs2017编译环境中使用qt,需要用到 QAxContainer,我看帮助文档里说要在.pro中加入CONFIG+=qaxcontainer,但是vs2017创建的程序中没有.pro这个文件,那这句话应该加在哪里呢?

    还有我想建一个有浏览器控件的对话框程序,如果想在5.12版本中加入QtWebKit应该如何使用

    阅读更多

关注我们

微博
QQ群











召唤伊斯特瓦尔