QMl 组件（一）

最新推荐文章于 2024-07-29 17:24:40 发布

jiangxiaoyu20

最新推荐文章于 2024-07-29 17:24:40 发布

阅读量735

点赞数

分类专栏： Qt 文章标签： QtQML

本文链接：https://blog.csdn.net/jiangxiaoyu20/article/details/100139082

版权

Qt 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

QML 自定义插件之轮播

效果如下
在这里插入图片描述

组件代码如下所示

import QtQuick 2.12
import QtQuick.Controls 2.5

Rectangle {
    width: parent.width
    height: parent.height
    SwipeView {
          id: view
          currentIndex: 0
          anchors.fill: parent
          Page{
              Image{
                  anchors.fill: parent
                  source: "qrc:/image/logo2.jpg"
              }
          }
          Page{
              Image{
                  anchors.fill: parent
                  source: "qrc:/image/logo4.jpg"
              }
          }
          Page{
              Image{
                  anchors.fill: parent
                  source: "qrc:/image/logo6.jpg"
              }
          }
          Item {
              Image{
                  anchors.fill: parent
                  source: "qrc:/image/logo8.jpg"
              }
          }
          Item {
              id: secondPage
              Rectangle{
                  anchors.centerIn: parent
                  width: 200
                  height: 200
                  color: "black"
              }
          }
      }

    //数字显示（与原点显示二选一）
    Rectangle{
     width: 60
     height: 20
     radius: height / 2
     color: "#858585"
     anchors.bottom: view.bottom
     anchors.right: parent.right
     Text {
         id: _numIndicatorText
         anchors.centerIn: parent
         font.family: fontFamily
         font.pixelSize: 14
         color: "#FFFFFF"
         text: qsTr((view.currentIndex + 1) +  "/" + view.count)
     }
    }
    //原点显示
    PageIndicator {
        id: indicator
        interactive: true
        count: view.count
        currentIndex: view.currentIndex
        anchors.bottom: view.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        delegate: Rectangle {
            implicitWidth: 8
            implicitHeight: implicitWidth
            radius: width / 2
            color: index === indicator.currentIndex ? "red" : "#858585"
            opacity: index === indicator.currentIndex ? 1 : pressed ? 0.7 : 0.3
            anchors.verticalCenter: parent.verticalCenter
            Behavior on opacity {
                OpacityAnimator {
                    duration: 1000
                }
            }
        }
    }

      Timer {
          interval: 1500; running: true; repeat: true
          onTriggered: {
              if(view.currentIndex < view.count - 1) view.currentIndex++;
                                      else view.currentIndex = 0;
          }
      }
}