Qt按钮渐变与下沉样式表

效果图: 

 

样式表:

QPushButton{
background-color:
qlineargradient(spread:pad,x1:0,x2:0, y1:0, y2:1,
stop: 0 rgba(130,130,130,255),
stop: 0.495 rgba(0,0,0,255),
stop: 0.505 rgba(0,0,0,255),
stop: 1 rgba(130,130,130,255));

color: rgb(255, 255, 255);
border: none;
border-radius: 5px;
color: rgb(255, 255, 255);
font: 75 12pt "微软雅黑";
}

QPushButton:hover{
background-color:
qlineargradient(spread:pad,x1:0,x2:0, y1:0, y2:1,
stop: 0 rgba(150,150,150,230),
stop: 0.495 rgba(0,0,0,230),
stop: 0.505 rgba(0,0,0,230),
stop: 1 rgba(150,150,150,230));

color: rgb(255, 255, 255);
border: none;
border-radius: 5px;
color: rgb(255, 255, 255);
font: 75 12pt "微软雅黑";
}

QPushButton:pressed{
background-color:
qlineargradient(spread:pad,x1:0,x2:0, y1:0, y2:1,
stop: 0 rgba(100,100,100,255),
stop: 0.495 rgba(0,0,0,255),
stop: 0.505 rgba(0,0,0,255),
stop: 1 rgba(100,100,100,255));

color: rgb(255, 255, 255);
border: none;
border-radius: 5px;
color: rgb(255, 255, 255);
font: 75 12pt "微软雅黑";
padding-left:2px;
padding-top:1px;
}

 

Qt中,我们可以使用CSS样式的“伪类”来给按钮的不同状态设定不同的样式,例如按钮的普通状态、鼠标悬浮状态、以及按下状态。我们把这些称为按钮的“三态”。 ### 1. 普通状态 这通常是按钮未被交互(即鼠标未放在上面也没有点击)时的状态。你可以通过 `:normal` 来指定这个状态。 ### 2. 鼠标悬浮状态 当鼠标指针移到按钮上方时,按钮进入悬浮状态,这时你可以通过 `:hover` 来设置其样式。 ### 3. 按下状态 当用户按下按钮时,会进入按下状态,这个状态通常与鼠标的点击动作对应,可以通过 `:pressed` 来设置。 下面是如何在一个`.qss`文件中为一个按钮设定这三个状态的样式示例: ```css .qButton { color: white; background-color: blue; /* 普通状态 */ } .qButton:hover { background-color: green; /* 鼠标悬浮状态 */ } .qButton:pressed { background-color: red; /* 按下状态 */ } ``` ### 应用这些样式到Qt中的按钮: 假设你有一个名为`pushButton`的对象,并希望它采用上述样式: ```cpp QPushButton *pushButton = new QPushButton("My Button", this); pushButton->setStyleSheet("QPushButton {color: white; background-color: blue;} " "QPushButton:hover {background-color: green;} " "QPushButton:pressed {background-color: red;}"); ``` 在以上代码中,我们首先实例化了一个`QPushButton`,然后通过`setStyleSheet`函数为其设置了样式表字符串。这个字符串包含了我们之前在`.qss`文件中定义的所有样式规则,覆盖了从正常、鼠标悬浮到按下状态的所有情况。 ### 使用伪类的注意事项: 1. **优先级**:伪类在链式选择中具有特殊的优先级顺序。`:hover`的优先级最高,其次是`:active` (按下),最后是`:default` 和 `:checked` 等。这意味着在同时定义这些状态时,需要考虑它们的顺序来确定最终的显示样式。 2. **特殊属性**:某些情况下,直接使用`:hover`, `:pressed`, `:active`可能会有额外的行为(如自动触发焦点移动等),在自定义样式时需要注意这一点,以避免意外的用户互动影响。 3. **跨平台兼容性**:虽然Qt的样式系统在大多数平台上工作良好,但在极少数情况下可能遇到渲染问题。特别是在不同操作系统(如Windows、Linux、macOS)之间可能存在细微差异。 通过合理运用这些伪类和CSS选择器,你可以极大地增强Qt应用程序的用户体验,提供更加丰富和响应式的用户界面。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

HHT0506

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

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

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

打赏作者

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

抵扣说明:

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

余额充值