QML 页面指示符PageIndicator

最新推荐文章于 2024-05-15 09:53:20 发布

缘如风

最新推荐文章于 2024-05-15 09:53:20 发布

阅读量2.4k

点赞数

分类专栏： QML 文章标签： qml

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

版权

QML 专栏收录该内容

31 篇文章 11 订阅

订阅专栏

很多网站都有页面指示符QML现在也能轻松实现啦
这里写图片描述

具体代码如下：

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

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

    SwipeView {
         id: view

         currentIndex: indicator.currentIndex
         anchors.fill: parent

         Rectangle {
             id: firstPage
             color: "red"
         }
         Rectangle {
             id: secondPage
             color: "blue"

         }
         Rectangle {
             id: thirdPage
             color: "black"
         }
     }

    //默认效果
     PageIndicator {
         id: indicator
         interactive: true
         count: view.count
         currentIndex: view.currentIndex

         anchors.bottom: view.bottom
         anchors.horizontalCenter: parent.horizontalCenter
     }

    //自定义效果
//    PageIndicator {
//          id: indicator
//          interactive: true
//          count: view.count
//          currentIndex: view.currentIndex
//          anchors.bottom: view.bottom
//          anchors.horizontalCenter: parent.horizontalCenter

//          delegate: Rectangle {
//              implicitWidth: 8
//              implicitHeight: 8
//              radius: width / 2
//              color: "#21be00"

//              opacity: index === indicator.currentIndex ? 0.95 : pressed ? 0.7 : 0.45

//              Behavior on opacity {
//                  OpacityAnimator {
//                      duration: 200
//                  }
//              }
//          }
//      }
    Timer{
        interval: 5000; running: true; repeat: true
        onTriggered: {
                        if(indicator.currentIndex < indicator.count) indicator.currentIndex++;
                        else indicator.currentIndex = 0;
                      }
    }
}