企业设计网站公司排行榜,财务软件排名,个人博客 wordpress,建设商务网站作用先说点基础的吧#xff0c;qt的样式实现#xff0c;常见的主要有三种方式#xff0c;分别为#xff1a; 1.ui界面中右键样式表直接添加 2.代码中对控件设置样式setStyleSheet 3.外部预设好qss文件#xff0c;代码中加载后设置样式 实际工作开发中#xff0c;我推荐使用优…先说点基础的吧qt的样式实现常见的主要有三种方式分别为 1.ui界面中右键样式表直接添加 2.代码中对控件设置样式setStyleSheet 3.外部预设好qss文件代码中加载后设置样式 实际工作开发中我推荐使用优先级为321理由如下 在ui界面中直接添加样式优点是可以实时看到基本的ui效果但对于某些需要切换状态的ui会比较麻烦。例如我预设了一个标签“没信号”的效果当我的设备有信号时我需要在代码中进行“有信号”效果的设置这样一来我们难免会在代码中进行重复的setStyleSheet1和2搭配起来可以正常使用只是难以管理我们的样式。 另外插一嘴如果我们在ui界面中设置好了控件的布局那后续我们在代码中想要改变布局是极其麻烦的比如我有四个按钮原本是上下左右排列的结果来了一个甲方需求需要变成从左到右的排列。这样一来我只能在ui界面中拖拽按钮进行布局来满足甲方的需求。要命的来了甲方突然又说我需要两个版本上下左右和从左到右都要。你就很头疼了每次编译发布的时候都需要去修改ui界面麻烦至极你甚至一气之下想要拷贝多份代码……这种思路显然是不对的。遇到这种情况我们应该通过代码来灵活布局由代码中创建好四个控件然后新建布局类进行布局。同样这里的控件样式也只能由代码来进行设置。 然而我们一旦在多处代码中使用了setStyleSheet就会让我们的样式设置变得凌乱特别对于状态切换比如一个按钮点击了之后需要切换成其他状态这部分样式设置一般放在信号槽当中。针对这种情况我们期望对所有样式表进行有效的管理于是qss文件这种方式就应运而生了。 简单来说就是将所有样式表放进qss文件中通过文件读取来进行统一设置具体实现就不赘述了。 然而到了这里还没有解释控件状态切换需要怎么做。别急现在就来。
Qtqss动态属性改变控件状态切换的样式 一个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{
color: #ffffff;
border-image: url(:/image/xxx_down.png);
}
QPushButton#btn_xxx:checked{
color: #ffffff;
border-image: url(:/image/xxx_checked.png);
}
QPushButton#btn_xxx:disabled{
color: #ffffff;
border-image: url(:/image/xxx_disabled.png);
}以QPushButton#btn_xxx:pressed为例分别为类名对象名和控件状态btn_xxx是这个按钮这类按钮的名称记得要setObjectName样式表才会生效哦。而pressed是QPushButton自带的一种控件状态其他控件可不一定有。 然而这一套样式表只针对于按钮的一种“状态”这里的状态指的是不同的样式比如绿色的按钮和红色的按钮两种颜色的按钮分别都有以上的五种控件状态。 如何进行不同颜色样式的状态切换呢我们需要添加控件的属性setProperty 首先样式表的QPushButton#btn_xxx:pressed要进行改造变为QPushButton#btn_xxx:pressed[State‘Green’]这样该条样式就具有了属性即当该控件的属性State为Green时才会应用这条样式。 于是我们的样式表可以改成
//green
QPushButton#btn_xxx[StateGreen]{
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[StateGreen]{
border-image: url(:/image/xxx_over.png);
}
QPushButton#btn_xxx:pressed[StateGreen]{
color: #ffffff;
border-image: url(:/image/xxx_down.png);
}
QPushButton#btn_xxx:checked[StateGreen]{
color: #ffffff;
border-image: url(:/image/xxx_checked.png);
}
QPushButton#btn_xxx:disabled[StateGreen]{
color: #ffffff;
border-image: url(:/image/xxx_disabled.png);
}//red
QPushButton#btn_xxx[StateRed]{
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[StateRed]{
border-image: url(:/image/xxx_over.png);
}
QPushButton#btn_xxx:pressed[StateRed]{
color: #ffffff;
border-image: url(:/image/xxx_down.png);
}
QPushButton#btn_xxx:checked[StateRed]{
color: #ffffff;
border-image: url(:/image/xxx_checked.png);
}
QPushButton#btn_xxx:disabled[StateRed]{
color: #ffffff;
border-image: url(:/image/xxx_disabled.png);
}哎没错样式表的代码量确实多了一倍但如此一来我们就能通过代码来切换状态啦记得setProperty之后要调用unpolish和polish不然样式可能无法成功修改
void xxx::slot_xxx(bool b_flag)
{if(b_flag){btn_xxx-setProperty(State,Green);btn_xxx-style()-unpolish(btn_video_lock); //清除旧的样式btn_xxx-style()-polish(btn_video_lock); //更新为新的样式}else{btn_xxx-setProperty(State,Red);btn_xxx-style()-unpolish(btn_video_lock); //清除旧的样式btn_xxx-style()-polish(btn_video_lock); //更新为新的样式}
}到了这里我们基本上就可以用qss一种方式来实现我所需要的全部需求了。 另外如果甲方需要整体更换ui类似换肤这种需求的话我们直接拷贝一份qss进行修改由代码来加载不同的qss文件即可。
