在一个项目中需要做一个圆形图片按钮的列表,就自己实现了下。
此按钮有两个自定义属性,分别表示按钮按下时和未按下时候显示的图片,还有一个rbClicked信号为按钮点击的响应信号。
//RoundButton.qml
import QtQuick 2.12
import QtQuick.Controls 2.12
Rectangle {
id:roundButton
width: 30
height: width
radius: width / 2
property url imageUrlHover: "" //按下显示的图片路径
property url imageUrlNormal: "" //正常显示的图片路径
signal rbClicked //自定义信号rbClicked,用来表示鼠标点击事件
color: backcolor
Image {
id: img
anchors.fill: parent
source: area.containsMouse ? roundButton.imageUrlHover : roundButton.imageUrlNormal
}
MouseArea
{
id: area
anchors.fill: parent
hoverEnabled: parent.enabled
onClicked:{
rbClicked()
}
}
}
在其他qml中使用
RoundButton{
id: diskButton
imageUrlHover: "qrc:/res/disk_hover.png"
imageUrlNormal: "qrc:/res/disk.png"
onRbClicked: {
//响应按钮的点击事件
}
}