QML轮播图效果

• mian.qml：qml界面代码
• datamodel：自定的数据Model，包含一个图片地址和一句说明文字，用于填充qml界面
• mian.cpp：加载qml界面，设置datamodel，显示quickview

main.qml

import QtQuick 2.8
import QtQuick.Window 2.2

Rectangle {
    id: root

    property int itemCount: 5

    visible: true
    width: 800
    height: 600
    color: "black"

    PathView {
        id: pathView
        anchors.fill: parent
        model: DataModel

        delegate: Item {
            id: delegateItem

            property var infoText: model.info

            width: 200
            height: 200
            z: PathView.iconZ
            scale: PathView.iconScale

            Image {
                id: image
                antialiasing: true
                source: model.url
                width: delegateItem.width
                height: delegateItem.height
            }

            ShaderEffect {
                anchors.top: image.bottom
                width: image.width
                height: image.height;
                anchors.left: image.left
                property variant source: image;
                property size sourceSize: Qt.size(0.5 / image.width, 0.5 / image.height);
                fragmentShader:
                    "varying highp vec2 qt_TexCoord0;
                    uniform lowp sampler2D source;
                    uniform lowp vec2 sourceSize;
                    uniform lowp float qt_Opacity;
                    void main() {

                        lowp vec2 tc = qt_TexCoord0 * vec2(1, -1) + vec2(0, 1);
                        lowp vec4 col = 0.25 * (texture2D(source, tc + sourceSize) + texture2D(source, tc- sourceSize)
                        + texture2D(source, tc + sourceSize * vec2(1, -1))
                        + texture2D(source, tc + sourceSize * vec2(-1, 1)));
                        gl_FragColor = col * qt_Opacity * (1.0 - qt_TexCoord0.y) * 0.2;
                    }"
            }

            transform: Rotation{
                origin.x:image.width/2.0
                origin.y:image.height/2.0
                axis{x:0;y:1;z:0}
                angle: delegateItem.PathView.iconAngle
            }

            MouseArea{
                anchors.fill: parent
                onClicked: {
                    pathView.currentIndex = index;
                }
            }
        }
        path: rootPath
        pathItemCount: root.itemCount

        // 键盘控制
        focus: true;
        Keys.onLeftPressed: decrementCurrentIndex();
        Keys.onRightPressed: incrementCurrentIndex();
        Keys.onTabPressed: incrementCurrentIndex();

        // 期待选定项位位置
        preferredHighlightBegin: 0.5
        preferredHighlightEnd: 0.5

    }

    Path {
        id: rootPath
        startX: 0
        startY: root.height/3

        PathAttribute{name:"iconZ";value: 0}
        PathAttribute{name:"iconAngle";value: 70}
        PathAttribute{name:"iconScale";value: 0.6}
        PathLine{x:root.width/2;y:root.height/3}

        PathAttribute{name:"iconZ";value: 100}
        PathAttribute{name:"iconAngle";value: 0}
        PathAttribute{name:"iconScale";value: 1.0}

        PathLine{x:root.width;y:root.height/3}
        PathAttribute{name:"iconZ";value: 0}
        PathAttribute{name:"iconAngle";value: -70}
        PathAttribute{name:"iconScale";value: 0.6}
        PathPercent{value:1.0}
    }

    Text {
        anchors.left: pathView.left
        anchors.leftMargin: root.width/5
        anchors.bottom: root.bottom
        anchors.bottomMargin: 80
        width: pathView.width*3/5
        height: 80
        opacity: 0.7

        text: pathView.currentItem.infoText
        color: "gray"
        font.pixelSize: 22
        wrapMode: Text.WrapAnywhere
    }
}

datemodel.h

#ifndef DATAMODEL_H
#define DATAMODEL_H

#include <QAbstractListModel>

typedef  struct dataMeta{
    QString url;
    QString info;
}m_data;
typedef  QList<m_data> datalist;

enum dataRole {
    UrlRole = Qt::UserRole + 1,
    InfoRole
};


class DataModel : public QAbstractListModel
{
    Q_OBJECT
    Q_PROPERTY(int count READ rowCount CONSTANT)
public:
    DataModel(QObject *parent = Q_NULLPTR);
    ~DataModel();

    void setData(QStringList & image_urls, QStringList & strs);

private:
    QHash<int, QByteArray> roleNames() const;
    int rowCount(const QModelIndex &parent = QModelIndex()) const;
    QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const;

private:
    datalist m_dataList;
    int m_count;
};

#endif // DATAMODEL_H

datamodel.cpp

#include "DataModel.h"

DataModel::DataModel(QObject *parent)
    : QAbstractListModel(parent)
{
}

DataModel::~DataModel() {}

void DataModel::setData(QStringList & image_urls, QStringList & strs)
{
    m_dataList.clear();

    auto length = image_urls.size();
    for(int i = 0; i<length; i++)
    {
        m_data datatemp;
        datatemp.url = image_urls[i];
        datatemp.info = strs[i];

        m_dataList << datatemp;
    }
}

QHash<int, QByteArray> DataModel::roleNames() const
{
    QHash<int, QByteArray> roleNames;

    roleNames[UrlRole] = QByteArrayLiteral("url");
    roleNames[InfoRole] = QByteArrayLiteral("info");

    return roleNames;
}

int DataModel::rowCount(const QModelIndex &parent) const
{
    return m_dataList.count();
}

QVariant DataModel::data(const QModelIndex &index, int role) const
{
    if (index.row() < 0 || index.row() >=m_dataList.count())
        return QVariant();

    switch (role) {
    case UrlRole:
        return m_dataList.at(index.row()).url;
    case InfoRole:
        return m_dataList.at(index.row()).info;
    default:
        break;
    }

    return QVariant();
}

main.cpp

#include <QGuiApplication>
#include <QQuickView>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include <QEventLoop>

#include "DataModel.h"


int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QStringList infotemp;
    infotemp << "用一个小天线作为单个辐射单元，将此单元沿一直线不断移动，在不同位置上接收同一地物的回波信号并进行相关解调压缩处理。一个小天线通过“运动”方式就合成一个等效“大天线”，这样可以得到较高的方位向分辨率"
             << "雷达发射的能量脉冲的电场矢量，可以在垂直或水平面内被偏振。无论哪个波长，雷达信号可以传送水平（H）或者垂直（V）电场矢量。接收水平（H）或者垂直（V）或者两者的返回信号。雷达遥感系统常用四种极化方式"
             << "极化是微波的一个突出特点，极化方式不同返回的图像信息也不同。返回同极化（HH或者VV）信号的基本物理过程类似准镜面反射，比如，平静的水面显示黑色。交叉极化（HV或者VH）一般返回的信号较弱"
             << "入射角也叫视角，是雷达波束与垂直表面直线之间的夹角（如下图中的θ）。微波与表面的相互作用是非常复杂的，不同的角度区域会产生不同的反射。低入射角通常返回较强的信号，随着入射角增加，返回信号逐渐减弱。"
             << "SAR主要有三种拍摄模式：Stripmap，ScanSAR和 Spotlight。当然最新的SAR系统拥有更多的拍摄模式，比如RADARSAT-2还用于超精细、高入射角等拍摄模式";

    QStringList urltemp;
    urltemp << "qrc:/1.svg" << "qrc:/2.svg" << "qrc:/3.svg" << "qrc:/4.svg" << "qrc:/5.svg";


    DataModel *model = new DataModel();
    model->setData(urltemp, infotemp);

    QQuickView viwer;
    //viwer.setFlags(Qt::FramelessWindowHint);
   // viwer.setColor(QColor(Qt::transparent));

    viwer.rootContext()->setContextProperty(QStringLiteral("DataModel"), model);
    viwer.setSource(QUrl("qrc:/main.qml"));
    viwer.show();

    return app.exec();
}