先说点基础的吧,qt的样式实现,常见的主要有三种方式,分别为:
1.ui界面中右键样式表直接添加
2.代码中对控件设置样式setStyleSheet
3.外部预设好qss文件,代码中加载后设置样式
实际工作开发中,我推荐使用优先级为3>2>1,理由如下:
在ui界面中直接添加样式,优点是可以实时看到基本的ui效果,但对于某些需要切换状态的ui,会比较麻烦。例如我预设了一个标签“没信号”的效果,当我的设备有信号时,我需要在代码中进行“有信号”效果的设置,这样一来,我们难免会在代码中进行重复的setStyleSheet,1和2搭配起来可以正常使用,只是难以管理我们的样式。
另外插一嘴,如果我们在ui界面中设置好了控件的布局,那后续我们在代码中想要改变布局,是极其麻烦的,比如我有四个按钮,原本是上下左右排列的,结果来了一个甲方需求,需要变成从左到右的排列。这样一来,我只能在ui界面中拖拽按钮进行布局,来满足甲方的需求。要命的来了,甲方突然又说,我需要两个版本,上下左右和从左到右都要。你就很头疼了,每次编译发布的时候都需要去修改ui界面,麻烦至极,你甚至一气之下想要拷贝多份代码……这种思路显然是不对的。遇到这种情况,我们应该通过代码来灵活布局,由代码中创建好四个控件,然后新建布局类进行布局。同样,这里的控件样式也只能由代码来进行设置。
然而,我们一旦在多处代码中使用了setStyleSheet,就会让我们的样式设置变得凌乱,特别对于状态切换,比如一个按钮点击了之后,需要切换成其他状态,这部分样式设置一般放在信号槽当中。针对这种情况,我们期望对所有样式表进行有效的管理,于是qss文件这种方式就应运而生了。
简单来说,就是将所有样式表放进qss文件中,通过文件读取来进行统一设置(具体实现就不赘述了。)
然而到了这里,还没有解释控件状态切换需要怎么做。别急,现在就来。
Qt+qss动态属性改变控件状态切换的样式
一个QPushbutton按钮,一般来说会存在三态(常态、鼠标悬浮、鼠标点击按下),复杂的还会有选中和取消使能的状态。这种情况,我们的样式表会这样写:
QPushButton#btn_xxx{
border-image: url(:/image/xxx.png);
color: #000000;
font-size: 18px;
font-family: 黑体;
min-width:110;
max-width:110px;
min-height:40px;
max-height:40px;
}
QPushButton#btn_xxx:hover{
border-image: url(:/image/xxx_over.png);
}
QPushButton#btn_xxx:pressed