1. 效果展示:
自封装椭圆按钮
2. 整体代码:
import QtQuick 2.12
import QtQuick.Shapes 1.15
Rectangle {
id:root
anchors.centerIn: parent
implicitWidth: 50
implicitHeight: 40
color: btnColor
//颜色属性
property color btnColor: "lightgray"
//点击事件属性
property var btnFunc:function(){}
//按钮文字属性
property string btnText:"Button"
//文字颜色属性
property color textColor:"black"
//文字尺寸属性
property int textSize:16
//绘制左半圆
Shape {
anchors.left: parent.left
width: root.height
height: root.height
ShapePath {
strokeWidth: 1
strokeColor: root.btnColor
fillColor: root.btnColor
//指定绘制起点
startX: 0
startY: 0
PathArc {
//指定绘制终点
x: 0
y: root.height
radiusX: root.height * 0.5
radiusY: root.height * 0.5
useLargeArc: true
//指定绘制方向为逆时针
direction: PathArc.Counterclockwise
}
}
}
//绘制右半圆
Shape {
anchors.right: parent.right
width: root.height
height: root.height
ShapePath {
strokeWidth: 1
strokeColor: root.btnColor
fillColor: root.btnColor
//指定绘制起点
startX: root.height
startY: 0
PathArc {
//指定绘制终点
x: root.height
y: root.height
radiusX: root.height * 0.5
radiusY: root.height * 0.5
useLargeArc: true
//指定绘制方向为顺时针
direction: PathArc.Clockwise
}
}
}
//点击触发动画
SequentialAnimation{
id:anim
running: false
PropertyAnimation {
id: scaleSAnim
target: root
property: "scale"
to: 0.9
easing.type: Easing.OutQuad
duration: 50
}
PropertyAnimation {
id: scaleLAnim
target: root
property: "scale"
to: 1.0
easing.type: Easing.OutQuad
duration: 50
}
}
//鼠标控制区域
MouseArea {
anchors.fill: parent
onClicked: {
anim.running = true
root.btnFunc()
}
}
//按钮文字
Text {
text: root.btnText
color: root.textColor
font.bold: true
font.pixelSize: root.textSize
anchors.centerIn: parent
}
}