QML自动循环轮播图

最新推荐文章于 2025-11-02 10:07:29 发布

原创最新推荐文章于 2025-11-02 10:07:29 发布 · 4.5k 阅读

2 ·

CC 4.0 BY-SA版权

QT 专栏收录该内容

3 篇文章

订阅专栏

本文分享了使用QT-QML为移动端APP制作自动循环轮播图的方法，包括使用ListView作为图片容器，通过Timer实现自动滚动，并介绍了如何处理手动滑动时的逻辑，以实现无限循环滚动效果。提供了代码示例和下载链接。

由于最近用QT-qml做移动端app，网络上资料较少，自己研究后整理出来的，希望给大家带来帮助。

listview做图片容器。没什么好说的，直接上代码；

 ListView
    {
      id:listPage
      width: rWidth;
      height: rHeight;
      model: imageModel;
      delegate: imageDelegate;
      orientation: ListView.Horizontal;
      snapMode: ListView.SnapOneItem;
      highlightRangeMode: ListView.StrictlyEnforceRange;
      cacheBuffer: imageArr.length;
      boundsBehavior: Flickable.StopAtBounds;
      keyNavigationWraps: true;
      onChildrenChanged: console.log("cur::"+listPage.currentIndex);
      onCurrentIndexChanged:
      {

      }

      onMovementEnded:
      {
//           console.log("移动结束::"+listPage.currentIndex);
          if(listPage.currentIndex==imageModel.count-1)
          {
              imageModel.move(listPage.currentIndex,0,1);
              listPage.currentIndex = 0;
          }
          if(isOpenTimer)
              myTimer.start()

      }
      onMovingChanged:
      {
//         console.log("移动movingchanged");
      }
      MouseArea
      {
        anchors.fill: parent;
        onClicked:
        {
                console.log("====>"+listPage.currentIndex);
        }
        onPressed:
        {
//             console.log("pressed");
            if(isOpenTimer)
                 myTimer.stop();
        }
        onReleased:
        {
//             console.log("released");
            if(isOpenTimer)
               myTimer.start();
        }
      }



    }

    PageIndicator
    {
        anchors.bottom: root.bottom;
        anchors.horizontalCenter: root.horizontalCenter;
        currentIndex: listPage.currentIndex
        count: listPage.count
    }

timer来处理自动循环滚动效果；

 Timer {
        id: myTimer;
        interval: 5000;
        repeat: true;
        running: false;
        triggeredOnStart: true;
        onTriggered:
        {
           console.log("当前page:"+listPage.currentIndex);
            if(listPage.currentIndex==imageModel.count-1)
            {
                imageModel.move(listPage.currentIndex,0,1);
                listPage.currentIndex = 0;
            }
           aotoCycle();
        }
    }

最后这里主要说下自动循环加手动循环的思想：首选listview加载所有要循环的图片，设置listview的边界及大小就可控制只显示一张，然后滑动就可以到第二及后面的图片；然后就是设置一个timer,间隔1秒然后将currentindex自动加加，图片就会自动滚动，这里得注意的就是，当currentindex等于所加载图片总数也就是最后一张时，要讲model数据里面最后一张和第一张交换位置，这样就可以实现无限自动循环滚动了。主要思想是替换model源。当然要做到和原生移动应用一样的效果，这时就必须在按下，手指滑动的时候做一下逻辑判断及处理了。具体的这里就不多做说明，有兴趣的可以直接去下面地址下载