发帖 回复
返回列表
  • 10949阅读
  • 5回复

[QSS美化实例6]Qt利用qss样式化单选（radio button）和复选框（checkbox） [复制链接]

 上一主题 下一主题
离线chinaboyone
新手上路
 
只看楼主 倒序阅读 楼主  发表于: 2015-09-04
— 本帖被 XChinux 执行加亮操作(2016-06-10) —
原文出自我的博客 http://www.hookr.cn/qt_qss_radiobutton.html  欢迎大家交流访问
正文：
来京第一份工作做了4个月了，开始一点C++不懂，Qt一点不了解，没人带。现在C++掌握了大概，大致能比较随心的写程序了。最近做一个嵌入式软件应用，界面美化的工作交给我了。开始定计划的时候，头说了要把qss加入到界面开发中。晕，那时候连Qt是什么都不知道，何况QSS。
还好，这两个月渐渐找到感觉了，Qt掌握了基本的开发，QSS也和CSS差不多，比CSS简单多了，所以对我掌握起来没什么难度。
这个项目我把单选框（Radiobutton）和复选框（checkbox）的样式重新定义了，以前看起来就是win98那种古老的样式。想达到的效果就是现在手机app流行扁平化设计的样式。
其实实现起来非常简单，开始以为非常高大上呢，后来发现安卓开发中也是利用相同的原理实现的。单选框和复选框的几种状态都是利用单击之后切换不同的图片实现的，所以事先把你想要实现的样式图片自己做出来，或者从网上找到，然后在Qt的资源中添加保存的状态图片。
下面就是要用到的QSS样式
  1. /*RadioButton样式设置*/
  2. QRadioButton::indicator {
  3.     width: 17px;
  4.     height: 17px;
  5. }
  6. /*单选框未选中样式*/
  7. QRadioButton::indicator::unchecked {
  8.     
  9.     image: url(:/ico/radiobutton-unchecked-md.png);
  10. }
  11. /*单选框选中样式*/
  12. QRadioButton::indicator::checked {
  13.     image: url(:/ico/radiobutton-checked-md.png);
  14. }
  15. /*RadioButton和checkbox字体和间距设置*/
  16. QRadioButton ,QCheckBox{
  17.     spacing: 5px;
  18.     font-size: 15px;
  19. }
  20. /*checkbox样式设置*/
  21. QCheckBox::indicator {
  22.     width: 26px;
  23.     height: 50px;
  24. }
  25. /*未选中*/
  26. QCheckBox::indicator::unchecked {    
  27.     image: url(:/ico/checkbox_unchecked.png);
  28. }
  29. /*选中*/
  30. QCheckBox::indicator::checked {
  31.     image: url(:/ico/checkbox_checked.png);
  32. }
如果有CSS基础看以来就比较简单，其中
  1. image: url(:/ico/radiobutton-checked-md.png);
这句就是指定，单选或多选按钮按下状态的图片路径。我在Qt的资源中添加了前缀 : ico，图片资源都放到资源前缀下了。
看一下效果吧：

挺漂亮吧，有点现代APP该有的时尚感了，右侧的button的样式也重写了，总体感觉OK。但是还有一些其他的样式个人不太会弄，比如表格表头样式不会定义，网上介绍的也很少，比较郁闷，慢慢弄吧。
现在把我使用的按钮图片素材贴到下面，用PS抠图抠出来的，抠的不太好，有用到的拿走，拿走….. 呵呵！
回复
举报
分享到 淘江湖 新浪 QQ微博 QQ空间 开心 人人 豆瓣 网易微博 百度 鲜果 白社会 飞信
离线favory
禁止发言
只看该作者 1楼 发表于: 2015-11-22
效果不错呀，赞！
回复
举报
离线tmxfh
新手上路
只看该作者 2楼 发表于: 2015-12-24
总体觉得很牛13
哥来了
回复
举报
离线richkoala
新手上路
只看该作者 3楼 发表于: 2015-12-25
挺不错的，我还在努力的学习中，感觉美化挺困难的，方便时详细的说说，挺想学习的
回复
举报
离线xushuai_sio
新手上路
只看该作者 4楼 发表于: 2016-01-14
很好哦~~~~学习了
回复
举报
离线qxiaoyu718
新手上路
只看该作者 5楼 发表于: 2016-05-31
回复
举报
发帖 回复
返回列表
快速回复
限100 字节
 
上一个 下一个