qml はボタン スタイルを実現します (小さな三角形を使用)

効果は以下の通り

リストビューのモデルとして配列が提供されます。

コードは以下のように表示されます

小さな矢印の付いた長方形は、キャバスで実装されています。このコードを変更することで、多くの効果を得ることができます。

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]})
        }
    }

}