QML按钮三态实现

效果

实现

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-实现鼠标滑过点击效果

2.Qt-第一个QML程序-3-自定义一个按钮

3.QML 快速入门

附

RGB颜色对照表