效果如下
提供了一个array来作为Listview的Model;
代码如下
带有小箭头的矩形用cavas来实现。通过修改本代码可以实现很多效果。
import QtQuick 2.7
import QtQuick.Controls 2.2
import QtGraphicalEffects 1.0
import QtQuick.Layouts 1.3
Item {
id: control
implicitWidth: 174
implicitHeight: 144
property real radius:6
property var modelText : ["按名称","按时间","按大小"]
Canvas{
id: warnCanvas
anchors.fill: parent
visible: false
property real margins: 6
property real arrowWidth: 12
property real arrowHeight: 20
onPaint: {
var ctx = getContext("2d");
var px = margins;
var py = margins;
ctx.beginPath();
ctx.arc(px + control.radius, margins + control.radius,
control.radius, Math.PI, Math.PI * 3 / 2, false);
// 主体的右上角(圆弧)
ctx.arc(width -arrowHeight - margins - control.radius, margins + control.radius,
control.radius, -Math.PI / 2, 0, false);
py = 30;
px = width -arrowHeight - margins
ctx.lineTo(px, py);
py += arrowHeight/2
px += arrowWidth
ctx.lineTo(px, py);
py += arrowHeight/2
px -= arrowWidth
ctx.lineTo(px, py);
// 主体的右下角(圆弧)
ctx.arc(width -arrowHeight- margins - control.radius, height - margins - control.radius,
control.radius, 0, Math.PI / 2, false);
// 主体的左下角(圆弧)
ctx.arc(margins + control.radius, height - margins - control.radius,
control.radius, Math.PI / 2, Math.PI, false);
px = margins;
py = margins+control.radius;
ctx.lineTo(px, py);
ctx.closePath();
ctx.lineWidth = 1;
ctx.lineCap = "butt";
ctx.strokeStyle = Qt.rgba(255, 255, 255, 0.2);
ctx.lineJoin = "miter";
ctx.stroke();
ctx.fillStyle = Qt.rgba(255, 255, 255, 0.16);
ctx.fill();
}
}
Glow {
id: warnCanvasEffect
anchors.fill: warnCanvas
radius: 10
spread: 0.2
color: "#19FFFFFF"
source: warnCanvas
smooth: true
cached: true
}
ListView
{
id:selectView
anchors.margins: 20
anchors.fill: parent
spacing: 8
clip: true
//interactive: false
ListModel {
id: selectMode
}
model: selectMode
delegate: Item
{
id:wrapper
width:control.width-40-12
height:(control.height-40-8)/2
Text{
id: text1
anchors.centerIn: parent
text: modelData
font{family: "Arial"; bold: true; pointSize: 20}
color: wrapper.ListView.isCurrentItem ? "#fff" : "#A3FFFFFF"
MouseArea
{
anchors.fill: parent
onClicked:
{
selectView.currentIndex = index;
console.log("myclicked")
}
}
}
Rectangle
{
id:line
width: parent.width
height: 1
color: "#A3FFFFFF"
anchors.bottom: parent.bottom
anchors.bottomMargin: -4
anchors.horizontalCenter: parent.horizontalCenter
visible: index != (selectMode.count-1)
}
}
}
Component.onCompleted:
{
for(var i=0;i< modelText.length;i++)
{
selectMode.append({"name": modelText[i]})
}
}
}