Qt Quick - Qml
1.Rectangle
//组件 IShadow.qml
import QtQuick
import QtQuick.Controls
Item {
id:root
anchors.fill: parent
anchors.margins: -4
property color color: "#999999"
property int radius: 4
Rectangle{
width: root.width
height: root.height
anchors.centerIn: parent
color: "#00000000"
opacity: 0.02
border.width: 1
radius: root.radius
border.color: root.color
}
Rectangle{
width: root.width - 2
height: root.height - 2
anchors.centerIn: parent
color: "#00000000"
opacity: 0.04
border.width: 1
radius: root.radius
border.color: root.color
}
Rectangle{
width: root.width - 4
height: root.height - 4
anchors.centerIn: parent
color: "#00000000"
opacity: 0.06
border.width: 1
radius: root.radius
border.color: root.color
}
Rectangle{
width: root.width - 6
height: root.height - 6
anchors.centerIn: parent
color: "#00000000"
opacity: 0.08
border.width: 1
radius: root.radius
border.color: root.color
}
Rectangle{
width: root.width - 8
height: root.height - 8
anchors.centerIn: parent
opacity: 0.1
radius: root.radius
color: "#00000000"
border.width: 1
border.color: root.color
}
}
//组件 IRectangle.qml
import QtQuick
import QtQuick.Controls
import Qt5Compat.GraphicalEffects
Item {
id:root
property var radius:[0,0,0,0]
property color color : "#FFFFFF"
property bool shadow: true
default property alias contentItem: container.data
Rectangle{
id:container
width: root.width
height: root.height
opacity: 0
color:root.color
}
IShadow{
anchors.fill: container
radius: root.radius[0]
visible: {
if(root.radius[0] === root.radius[1] && root.radius[0] === root.radius[2] && root.radius[0] === root.radius[3] && root.shadow){
return true
}
return false
}
}
Canvas {
id: canvas
anchors.fill: parent
visible: false
onPaint: {
var ctx = getContext("2d");
var x = 0;
var y = 0;
var w = root.width;
var h = root.height;
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.beginPath();
ctx.moveTo(x + radius[0], y);
ctx.lineTo(x + w - radius[1], y);
ctx.arcTo(x + w, y, x + w, y + radius[1], radius[1]);
ctx.lineTo(x + w, y + h - radius[2]);
ctx.arcTo(x + w, y + h, x + w - radius[2], y + h, radius[2]);
ctx.lineTo(x + radius[3], y + h);
ctx.arcTo(x, y + h, x, y + h - radius[3], radius[3]);
ctx.lineTo(x, y + radius[0]);
ctx.arcTo(x, y, x + radius[0], y, radius[0]);
ctx.closePath();
ctx.fillStyle = root.color;
ctx.fill();
ctx.restore();
}
}
OpacityMask {
anchors.fill: container
source: container
maskSource: canvas
}
}
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Window {
width: 640
height: 480
visible: true
title: qsTr("IRectangle")
//color: Qt.rgba(226/255,229/255,234/255,1)
ColumnLayout {
anchors.centerIn: parent
Item {
width: 320
height: 60
RowLayout {
anchors.centerIn: parent
spacing: 15
IRectangle {
width: 50
height: 50
color: "#744da9"
radius:[0,0,0,0]
}
IRectangle {
width: 50
height: 50
color: "#379039"
radius:[15,0,0,0]
}
IRectangle {
width: 50
height: 50
color: "#445d79"
radius:[15,0,15,0]
}
IRectangle {
width: 50
height: 50
color: "#9422a2"
radius:[15,15,15,0]
}
IRectangle {
width: 50
height: 50
color: "#ffeb3b"
radius:[15,15,15,15]
}
}
}
Item {
width: 320
height: 60
RowLayout {
anchors.centerIn: parent
spacing: 15
IRectangle {
width: 50
height: 50
radius:[0,0,0,0]
Image {
anchors.fill: parent
source: "svg/avatar_1.svg"
}
}
IRectangle {
width: 50
height: 50
radius:[15,0,0,0]
Image {
anchors.fill: parent
source: "svg/avatar_2.svg"
}
}
IRectangle {
width: 50
height: 50
radius:[15,0,15,0]
Image {
anchors.fill: parent
source: "svg/avatar_3.svg"
}
}
IRectangle {
width: 50
height: 50
radius:[15,15,15,0]
Image {
anchors.fill: parent
source: "svg/avatar_4.svg"
}
}
IRectangle {
width: 50
height: 50
radius:[15,15,15,15]
Image {
anchors.fill: parent
source: "svg/avatar_5.svg"
}
}
}
}
}
}
