Qt-QML-Button-ButtonStyle-实现鼠标滑过点击效果

上次实现的自定义的Button功能是用的自定义的Rectangle来实现的,在慢慢的接触了QML之后,发现QML有自己定义的Button

这里盗版贴上Qt帮助文档中的部分关于Button的属性内容

Button有自己的style 的属性,可以实现自己的想法,经过摸索,我暂时做出了鼠标滑入,点击,和正常的效果

简单的效果如下图

 

默认为红色,鼠标划入为绿色,鼠标点击为黄色

下面是实现代码

 

import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
Button
{
    id: root_Button
    property string nomerPic: "qrc:/Images/001.png"
    property string hoverPic: "qrc:/Images/002.png"
    property string pressPic: "qrc:/Images/003.png"
    style: ButtonStyle
    {
        background:Rectangle
        {
            implicitHeight:root_Button.height
            implicitWidth:root_Button.width
            Image
            {
                anchors.fill: parent
                source:
                {
                    if(control.hovered)
                    {
                        if(control.pressed)
                        {
                            pressPic
                        }
                        else
                        {
                            hoverPic
                        }
                    }
                    else
                    {
                        nomerPic
                    }
                }
            }
        }
    }
}


有什么不懂得 ,可以问我哦。

 

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

DreamLife.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值