四川建设机械网站,装修公司展厅工艺样板,广西桂林网站建设公司,外贸网站建设培训前提
按钮分为了四种状态#xff1a;常态、聚焦、按下、禁用
前一段时间更新了MFC框架下CButton的自绘。因为MFC框架下的按钮限制性很高#xff0c;所以只能由自绘实现各种风格#xff0c;但是QT框架完美的解决了这个问题#xff0c;我们只需要了解如何调用#xff0c;就…前提
按钮分为了四种状态常态、聚焦、按下、禁用
前一段时间更新了MFC框架下CButton的自绘。因为MFC框架下的按钮限制性很高所以只能由自绘实现各种风格但是QT框架完美的解决了这个问题我们只需要了解如何调用就可以展示炫酷的画面了接下来我们来讲解下如何使用吧
有需要的或者是对控件风格不熟悉的赶紧收藏
Background-color:#FF0000;
起来以备不时之需~
功能
1背景颜色值改变
我们可以对四种状态设置一个背景颜色值也可以根据不同状态设置不同的颜色值。
主要是根据我们实际的开发需求来定的。
情况1四种状态使用一种背景颜色值
QSS方式
Background-color:#FF0000;
情况2每个状态的颜色值不一样
QSS方式
“QPushButton{background-color:#FF0000};” //常态
“QPushButton:hover{background-color:#00FF00};” //聚焦状态
“QPushButton:pressed{background-color:#0000FF};” //按下状态
“QPushButton:disabled{background-color:#DDDDDD};” //禁用状态
2背景图片改变
与上述颜色值更改的方式一致只是将颜色值变成了图片。
情况1四态使用一种背景图片
QSS方式
border-image:url(:/QtControl/img/normal.png);
情况2每个状态的背景图不一致
QSS方式
QPushButton{border-image:url(:/QtControl/img/normal.png); }
QPushButton:hover{border-image:url(:/QtControl/img/hover.png);}
QPushButton:pressed{border-image:url(:/QtControl/img/pre.png);}
QPushButton:disabled{border-image:url(:/QtControl/img/disab.png);};
3文本对齐方式
QPushButton这个控件的对齐方式有点不一样哦~是不可以使用setAlignment这个函数进行设置的只能通过setStyleSheet进行QSS风格设置这一点大家需要记住啦
按钮中字体的对齐方式left、right、top、bottom、center
QSS设置
左对齐text-align:left;
右对齐text-align:right;
居中text-align:center;
内边距对齐 情况1文本左对齐时内边距设置。padding-left:10px; 情况2文本右对齐时内边距设置。padding-right:10px;
4内部显示图片
图片在右侧显示
显示效果以文本右侧显示图片为例子如下所示 QSS方式
QString strStyle QPushButton{font-family:Microsoft YaHei; font-size:12px; color:#666666;}
QPushButton{background-image:url(:/QtControl/image/2wm_p.png);
background-repeat:repeat-no-repeat; //图片重复方式background-position:right;background-origin:content;padding-right:15px;};
说明
1在图片时为什么使用background-image与2.2中的方式为何不一致
因为border-image设置背景时图片是拉伸填充的在此处不需要。
2background-repeat说明
该属性定义了图像的平铺模式。背景图像的位置是根据background-position属性设置的。如果未规定background-position属性图像会被放置在元素的左上角。 3background-position说明
位置关键字可以按任何顺序出现只要保证不超过两个关键词。
如果只出现一个关键字则认为另一个关键字是center。 4background-origin 说明
相对于内容框来定位背景图像。
属性值border(边框)、padding(填充)、context(内容)
图片在顶部QSS设置方式
QString strStyle QPushButton{font-family:Microsoft YaHei; font-size:12px; color:#666666;text-align:bottom;}
QPushButton{background-image:url(:/QtControl/image/2wm_p.png);
background-repeat:no-repeat; background-position:top;background-origin:content;padding:10px};
图片左侧QSS设置方式
当图片在左侧时相当于按钮的图标则使用下面这种方式实现。
ui.btn-setIcon(QIcon(“:/QtControl/image/2wm_p.png”));
5文本底部添加下划线
对于这个功能很多情况下都会用到前一阵子我也使用到了这个功能索性分享给大家吧~
首先先看一下展示效果 下划线的长度是整个QPushButton的长度。
QSS的选中效果
sStyle QPushButton{ font-size:14px; font-family:Microsoft YaHei UI;color:#1576fc;background: transparent;border-width:2px;border-style:none none solid none;border-color:#1576fc;};
QSS的未选中效果
sStyle QPushButton{ font-size:14px; font-family:Microsoft YaHei UI;color:#999999;background: transparent;border-width:2px;border-style:none none solid none;border-color:#cccccc;};
总结
目前想到的功能也就这些啦~
如果还有想要实现却没法实现的功能评论下说明我会更新的哦~
我是糯诺诺米团一名C开发程序媛~
