代码:
DelegateItem.qml
import QtQuick 2.0
Item
{
id:root
width: ListView.view.width
height: 50
Rectangle
{
id:titleRect
color: Qt.rgba(0,0,0,0.4)
height: 50
radius:6
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
Text
{
anchors.leftMargin: 10
anchors.left: parent.left
anchors.top: parent.top
anchors.bottom: parent.bottom
verticalAlignment:Text.AlignVCenter
text: title
color: "#FFFFFF"
font.pixelSize: 24
clip: true
}
Canvas
{
id: icon
width: 10
height: 10
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
anchors.rightMargin: 20
property color lineColor:body.state === "bodyShow" ? "#FFFFFF" : "#C2A9A6"
onPaint:
{
var ctx = getContext("2d")
ctx.strokeStyle = lineColor
ctx.lineWidth = 3
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(5,10);
ctx.lineTo(10,0);
ctx.stroke();
}
}
MouseArea
{
id:mouseArea
anchors.fill: parent
onClicked:
{
body.state = (body.state === "bodyShow" ? "" : "bodyShow")
icon.requestPaint()
}
}
}
Rectangle
{
id:body
color: Qt.rgba(0,0,0,0.1)
radius:6
anchors.top: titleRect.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
state : "bodyHide"
states:
[
State
{
name: "bodyShow"
PropertyChanges
{
target: root
height: 200
}
PropertyChanges
{
target: icon
rotation: 180
}
},
State
{
name: "bodyHide"
PropertyChanges
{
target: root
height: 50
}
PropertyChanges
{
target: icon
rotation: 0
}
}
]
transitions: Transition
{
NumberAnimation
{
properties: "height"
easing.type: body.state === "bodyShow" ? Easing.OutBounce : Easing.Linear
duration: body.state === "bodyShow" ? 700 : 200
}
NumberAnimation
{
properties: "rotation"
easing.type: body.state === "bodyShow" ? Easing.OutBounce : Easing.Linear
duration: body.state === "bodyShow" ? 700 : 200
}
}
Text
{
anchors.fill: body
text: detailed
color: "#ffffff"
font.pixelSize: 20
clip: true
wrapMode:Text.WrapAnywhere
}
}
}
main.qml
import QtQuick
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
Rectangle
{
id:rect
anchors.fill: parent
gradient:btnGradient
Gradient
{
id:btnGradient
orientation:Gradient.Horizontal
GradientStop { position: 0.0; color: "#B9CBB5" }
GradientStop { position: 0.33; color: "#E0C58C" }
GradientStop { position: 0.66; color: "#B3D0A9" }
GradientStop { position: 1.0; color: "#82DADB" }
}
ListView
{
id:view
anchors.fill: parent
orientation: Qt.Vertical
spacing: 3
model:ListModel
{
ListElement{title:"标题1";detailed:"黄河之水天上来,奔流到海不复回。高堂明镜悲白发,朝如青丝暮成雪。古来圣贤皆寂寞,惟有饮者留其名。";}
ListElement{title:"标题2";detailed:"黄河之水天上来,奔流到海不复回。高堂明镜悲白发,朝如青丝暮成雪。古来圣贤皆寂寞,惟有饮者留其名。陈王昔时宴平乐,斗酒十千恣欢谑。";}
}
delegate:DelegateItem{}
focus: true
}
}
}
效果:
QWidget 版本的:Qt编写自定义控件:垂直手风琴收缩部件
有个知识点注意一下:想要透明度不影响子项需要使用 color 属性设置透明度而不是使用 opacity 属性。