QML实现网页左右滑动的轮播图效果

最新推荐文章于 2021-03-04 12:13:04 发布

缘如风

最新推荐文章于 2021-03-04 12:13:04 发布

阅读量3.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Qt QML

本文链接：https://blog.csdn.net/chyuanrufeng/article/details/82664264

Qt 同时被 2 个专栏收录

70 篇文章

订阅专栏

QML

31 篇文章

订阅专栏

本文介绍如何使用QML实现图片轮播效果，并通过SwipeView组件配合PageIndicator或TabBar进行页面指示与切换。提供了具体代码实例，展示左右滑动动画及不同样式指示器的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网页中有很多的左右滑动的图片轮动的效果。QML实现此效果的两种方式。
PageIndicator和TabBar 也对应两种样式。
其中左右滑动的动画效果是利用SwipeView的默认切换动画效果

import QtQuick 2.9
import QtQuick.Controls 2.2

ApplicationWindow {
    visible= true
    width= 640
    height= 480
    title= qsTr("图片切换")


    SwipeView {
        id= swipeView
        anchors.fill= parent
        currentIndex= indicator.currentIndex

        Rectangle{
            Image {
                //id= name
                source= "./img/0.jpg"
                anchors.fill= parent
            }
        }
        Rectangle{
            Image {
                //id= name
                source= "./img/1.jpg"
                anchors.fill= parent
            }
        }
        Rectangle{
            Image {
                //id= name
                source= "./img/2.jpg"
                anchors.fill= parent
            }
        }
        Rectangle{
            Image {
                //id= name
                source= "./img/3.jpg"
                anchors.fill= parent
            }
        }



    }

    //方法1
    PageIndicator {
          id= indicator
          count= swipeView.count
          currentIndex= swipeView.currentIndex
          interactive= true //可以点击
          anchors.bottom= swipeView.bottom
          anchors.horizontalCenter= parent.horizontalCenter
      }


    //方法2
//    TabBar {
//        id= indicator
//        currentIndex= swipeView.currentIndex
//        anchors.bottom= parent.bottom
//        anchors.right= parent.right
//        width= 400
//        opacity = 0.5


//        TabButton {
//            text= qsTr("Page 1")
//        }
//        TabButton {
//            text= qsTr("Page 2")
//        }
//        TabButton {
//            text= qsTr("Page3")
//        }
//        TabButton {
//            text= qsTr("Page 4")
//        }
//    }
}