QML 页面指示符PageIndicator

来源：互联网发布：光电转换器淘宝网编辑：程序博客网时间：2024/06/01 17:09

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

具体代码如下：

import QtQuick 2.7import QtQuick.Controls 2.0import QtQuick.Layouts 1.3ApplicationWindow {    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;                      }    }}

阅读全文

0 0