按钮效果如下
直接上代码
import QtQuick 2.0
Rectangle {
id:iconButton
width:parent.width
height:parent.height
color: "#6CADFF"
radius:8
//用于外部调用时,输入图片的地址
property string imageSource : image.source
//用于外部调用时,输入按钮名称
property string descText : btnText.text
//添加信号
signal buttonClicked()
Image{
id:image
x:13
y:13
width:15
height:15
fillMode: Image.PreserveAspectFit
horizontalAlignment: Image.AlignHCenter
verticalAlignment: Image.AlignVCenter
source: imageSource
}
Text{
id:btnText
text: descText
x:image.x + image.width + image.x
height: parent.height
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
color: "white"
}
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true // 启用悬停事件
onEntered: {
iconButton.color = "#7DB8FF"; // 鼠标进入时改变颜色
}
onExited: {
iconButton.color = "#6CADFF"; // 鼠标离开时恢复颜色
}
onPressed: {
iconButton.color = "#6CADFF";
}
onReleased: {
iconButton.color = "#7DB8FF";
}
onClicked:{
iconButton.buttonClicked();
}
}
}
外部应用IconButton例子
IconButton{
x:bottomItem.width - 3 * 118 - 2 * 10
y:bottomItem.height - 70
width: 118
height: 47
descText: "保存图片"
imageSource: "resources/SaveImage.png"
fontSize:15
onButtonClicked:{
console.log("mainWindow.widht = " + mainWindow.width)
}
}