qml 实现按钮样式（带个小三角）

本文主要是介绍qml 实现按钮样式（带个小三角），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果如下

提供了一个array来作为Listview的Model；
在这里插入图片描述

代码如下

带有小箭头的矩形用cavas来实现。通过修改本代码可以实现很多效果。

import QtQuick 2.7
import QtQuick.Controls 2.2
import QtGraphicalEffects 1.0
import QtQuick.Layouts 1.3Item {id: controlimplicitWidth: 174implicitHeight: 144property real radius:6property var modelText : ["按名称","按时间","按大小"]Canvas{id: warnCanvasanchors.fill: parentvisible: falseproperty real margins: 6property real arrowWidth: 12property real arrowHeight: 20onPaint: {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 - marginsctx.lineTo(px, py);py += arrowHeight/2px += arrowWidthctx.lineTo(px, py);py += arrowHeight/2px -= arrowWidthctx.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: warnCanvasEffectanchors.fill: warnCanvasradius: 10spread: 0.2color: "#19FFFFFF"source: warnCanvassmooth: truecached: true}ListView{id:selectViewanchors.margins: 20anchors.fill: parentspacing: 8clip: true//interactive: falseListModel {id: selectMode}model: selectModedelegate: Item{id:wrapperwidth:control.width-40-12height:(control.height-40-8)/2Text{id: text1anchors.centerIn: parenttext: modelDatafont{family: "Arial"; bold: true; pointSize: 20}color:  wrapper.ListView.isCurrentItem ? "#fff" : "#A3FFFFFF"MouseArea{anchors.fill: parentonClicked:{selectView.currentIndex = index;console.log("myclicked")}}}Rectangle{id:linewidth: parent.widthheight: 1color:  "#A3FFFFFF"anchors.bottom: parent.bottomanchors.bottomMargin: -4anchors.horizontalCenter: parent.horizontalCentervisible: index != (selectMode.count-1)}}}Component.onCompleted:{for(var i=0;i< modelText.length;i++){selectMode.append({"name": modelText[i]})}}}