QML控件大全之QmloverFlow

最新推荐文章于 2025-11-20 20:41:48 发布

原创最新推荐文章于 2025-11-20 20:41:48 发布 · 546 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#qt

QML控件大全专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个使用QML实现的CoverFlow效果，该效果可以滚动浏览一系列图片，并通过PathView组件来控制每个图片的旋转角度和缩放比例，以达到立体翻转的效果。代码中展示了如何设置PathView的路径属性来定制翻转动画。

QmloverFlow用于滚动浏览显示图片，效果如下

代码如下：CoverFlow.qml,FrmCoverFlow.qml,MyDelegate.qml

import QtQuick 2.0
import "./"
Rectangle {
    id: coverFlow
    color:"black"

    property ListModel model
    property int itemCount: 5

    PathView{
        id: pathView

        model: coverFlow.model
        delegate: MyDelegate{}

        path: coverFlowPath
        pathItemCount: coverFlow.itemCount
        anchors.fill: parent

        preferredHighlightBegin:0.5
        preferredHighlightEnd:0.5

    }

    Path{
        id: coverFlowPath
        startX: 0
        startY: coverFlow.height/3

        PathAttribute{ name:"iconZ"; value:0 }
        PathAttribute{ name:"iconAngle"; value:70 }
        PathAttribute{ name:"iconScale"; value: 0.6 }

        PathLine{ x:coverFlow.width*0.5; y:coverFlow.height/3; }
        PathAttribute{ name:"iconZ"; value:100 }
        PathAttribute{ name:"iconAngle"; value:0 }
        PathAttribute{ name:"iconScale"; value:1.0 }

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

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

Item {
    id: root
    visible: true
    width: 640
    height: 480
    ListModel{
        id: model
        ListElement{url:"./images/01.jpg"}
        ListElement{url:"./images/02.png"}
        ListElement{url:"./images/03.jpg"}
        ListElement{url:"./images/04.jpg"}
        ListElement{url:"./images/05.jpg"}
    }
    Rectangle{
        id: zhanwei
        anchors.left: parent.left
        width: root.width
        height: root.height/5
        visible:false
    }

    /*预计用来显示景区信息*/
    CoverFlow{
        id: coverFlow
        anchors.left: parent.left
        anchors.top: zhanwei.bottom
        anchors.topMargin: 10
        anchors.right: parent.right
        width: root.width
        height: root.height*2/5
        visible: true

        model:model
    }
}

import QtQuick 2.0

Item {
    id: delegateItem
    width: 320
    height: 450
    z: PathView.iconZ
    scale: PathView.iconScale

    Image{
        id: dlgImg
        source: url
        width:delegateItem.width
        height:delegateItem.height
    }
    transform:Rotation{
        origin.x: dlgImg.width/2.0
        origin.y: dlgImg.height/2.0
           axis{ x:0; y:1; z:0 }
        angle:delegateItem.PathView.iconAngle
    }
}