Qt基于Qml任意圓角矩形定制

 示範效果

 完整測試Qml代碼

import QtQuick 2.12
import QtQuick.Window 2.12
Window {
    width: 800
    height: 640
    visible: true
    title: qsTr("Qt基于Qml任意圓角矩形定制")
    color:"black"
    //測試元件
    Row{
        id:idRow
        spacing: 20
        anchors.centerIn: parent
        property int w: 180
        property int h: 180
        property var colors :["red","#FF00FF","#00FFFF","orange"]
        RadiusRectangle{
            width: parent.w
            height: parent.h
            color: parent.colors[0]
            cornersRadius: [20,0,20,0]
            borderWidth:1
            borderColor:"yellow"
        }
        RadiusRectangle{
            width: parent.w
            height: parent.h
            color: parent.colors[1]
            cornersRadius: [30,50,40,0]

        }
        RadiusRectangle{
            width: parent.w
            height: parent.h
            color: parent.colors[2]
            cornersRadius: [30,0,0,30]
        }
        RadiusRectangle{
            width: parent.w
            height: parent.h
            color: parent.colors[3]
            cornersRadius: [0,20,20,0]
        }
    }
}      

import QtQuick 2.12
import QtQuick.Shapes 1.12
//自定義矩形元件
Shape {
    id: idShapeControl
    property var cornersRadius
    property color color
    property color borderColor:"transparent"
    property int borderWidth: 1
    layer.enabled: true
    layer.samples: 4
    layer.smooth: true
    ShapePath {
        startX: 0
        startY: cornersRadius[0]
        fillColor: color
        strokeColor: borderColor
        strokeWidth: borderWidth
        PathQuad { x: cornersRadius[0]; y: 0; controlX: 0; controlY: 0 }
        PathLine { x: idShapeControl.width - cornersRadius[1]; y: 0 }
        PathQuad { x: idShapeControl.width; y: cornersRadius[1]; controlX: idShapeControl.width; controlY: 0 }
        PathLine { x: idShapeControl.width; y: idShapeControl.height - cornersRadius[2] }
        PathQuad { x: idShapeControl.width - cornersRadius[2]; y: idShapeControl.height; controlX: idShapeControl.width; controlY: idShapeControl.height }
        PathLine { x: cornersRadius[3]; y: idShapeControl.height }
        PathQuad { x: 0; y: idShapeControl.height - cornersRadius[3]; controlX: 0; controlY: idShapeControl.height }
        PathLine { x: 0; y: cornersRadius[0] }
    }
}