效果
实现
HButtom.qml
import QtQuick 2.0
import QtQuick.Controls 1.3
import QtQuick.Controls.Styles 1.3
Button
{
id: root_Button
width: 90
height: 40
x:0
y:0
style: ButtonStyle {
background: Rectangle{
radius: 5;
color:{
control.hovered?control.pressed?"#828282":"#CFCFCF" :"#828282";//使用两次问号表达式来判别状态,或者使用下面的if判别式
// if(control.hovered)//指针悬浮时
// {
// if(control.pressed){"#828282"}//指针按下时
// else{"#CFCFCF"}
// }
// else{"#828282"}//指针未进入按钮
}
}
}
}
使用
HButton {
text: "quit"
x: 40
y: 40
}
另,在Qt Quick 简单教程的ButtonStytle中,可实现下面的效果:
参考
1.Qt-QML-Button-ButtonStyle-实现鼠标滑过点击效果
3.QML 快速入门