当前位置：首页 > news >正文

qml用PathView实现Cover Flow效果

news 来源：原创 2025/5/10 7:51:28

在这里插入图片描述
效果图
参考：https://zhuanlan.zhihu.com/p/616386920

源码：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQml.Models 2.15Window {width: 1000height: 600visible: truetitle: qsTr("Hello World")color: "#0b0b5d"Item {id: coverflowanchors.fill: parentListModel {id: listModel}PathView {id: pathViewanchors.fill: parentmodel: listModelpath: coverFlowPathpathItemCount: listModel.countpreferredHighlightBegin: 0.5preferredHighlightEnd: 0.5delegate: Item {id: delegateItemwidth: 200height: 200z:PathView.iconZscale:PathView.iconScaleclip: trueRectangle {id: imagewidth: 200height: 200anchors.centerIn: parentcolor: "#40171cde"border.width: 1border.color: "#7777ff"clip: trueText {id: nametext: qsTr(name_)font.pixelSize: 25font.bold: truecolor: "#FFFFFF"x: 10y: 10}}transform: Rotation{origin.x:image.width/2.0origin.y:image.height/2.0axis{x:0;y:1;z:0}angle: delegateItem.PathView.iconAngle}}}}Path{id:coverFlowPathstartX: 0startY: coverflow.height/3PathAttribute{name:"iconZ";value: 0}PathAttribute{name:"iconAngle";value: 70}PathAttribute{name:"iconScale";value: 0.6}PathLine{x:coverflow.width/2;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}}Component.onCompleted: {listModel.append({"id_": 1, "name_": "one"})listModel.append({"id_": 2, "name_": "two"})listModel.append({"id_": 3, "name_": "three"})listModel.append({"id_": 4, "name_": "four"})}
}