QML轮播图效果

最新推荐文章于 2024-08-23 10:20:50 发布

原创

最新推荐文章于 2024-08-23 10:20:50 发布 · 1.2k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#qml #轮播图 #PathView

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 sa

最低0.47元/天解锁文章