这次讲Qt Style Sheet(QSS),QSS是一种与CSS类似的语言,实际上这两者几乎完全一样。既然谈到CSS我们就有必要说一下盒模型。
在样式中,每一个UI控件都可以抽象成一个盒模型:
盒模型由4个同心矩形组成,从外到内分别是外边距、边界、内衬和内容,大部分UI视觉内容都包含在内容矩形中。默认情况下,前三个矩形的大小属性都是0,因此这四个矩形都重叠成一个了。这里与前三个大小相关的属性有:
本文福利,莬费领取Qt开发学习资料包、技术视频,内容包括(C++语言基础,Qt编程入门,QT信号与槽机制,QT界面开发-图像绘制,QT网络,QT数据库编程,QT项目实战,QSS,OpenCV,Quick模块,面试题等等)↓↓↓↓↓↓见下面↓↓文章底部点击莬费领取↓↓
QSS与CSS相似,因此这里只大概介绍QSS的特点:
这里我们通过一个示例程序来接触QSS,因为实例程序涉及多个控件但我们篇幅有限,我们只介绍菜单相关的样式设置。菜单分为两部分:菜单栏(QMenuBar)、菜单(QMenu)。
我们把菜单栏宽度设置成大于等于菜单item的宽度60px(这里的width不指代整个菜单栏的宽度,比较奇怪),防止item的宽度被菜单栏的宽度限制,并且设置灰色点边框。
QMenuBar {
width:60px;
background-color:white;
border:1px dotted gray;
}
item这里代指菜单栏上的每一项菜单,我们设置边框位groove以使其看起来有凹凸效果;设置margin-right,这样两个item之间会有合适的间隔;我们还在不同的状态下设置不同的背景颜色,这样交互上比较友好。
QMenuBar::item {
height:15px;
width:60px;
background:transparent;
border:2px groove gray;
margin-right:1px;
}
QMenuBar::item:selected {
color:green;
background-color:rgb(236, 242, 245);
}
QMenuBar::item:pressed {
color:green;
background-color:rgb(233, 227, 227);
}
菜单我们设置成与菜单栏一样;菜单的item指代每一个菜单选项,我们对其设置合适的margin和padding大小,border、item的selected和pressed状态设置成菜单栏的样式,使其看起来布局空间合理且与菜单栏一致:
QMenu {
background-color:white;
border:1px solid rgb(0, 171, 255);
padding:1px;
}
QMenu::item {
height:15px;
width:60px;
background-color:white;
margin:1px;
padding:2px 2px 2px 20px;
border:2px groove gray;
}
QMenu::item:selected {
color:green;
background-color:rgb(236, 242, 245);
}
QMenu::item:pressed {
color:green;
background-color:rgb(233, 227, 227);
}
我们重绘菜单之间的间隔条(separator),简单的用浅蓝色填充1像素高的背景:
QMenu::separator {
height:1px;
margin:1px;
background-color:lightblue;
}
菜单的选中指示框和子菜单我们用图片来显示,图片选用png格式,保持透明通道,使其与背景一致:
QMenu::indicator:checked {
width:10px;
height:10px;
margin-left:3px;
border:0px solid blue;
image:url(:/checked-icon.png);
}
QMenu::right-arrow {
width:15px;
height:15px;
image:url(:/right-arrow.png);
}
程序的完整运行结果如下:
优点:
缺点:
本文福利,莬费领取Qt开发学习资料包、技术视频,内容包括(C++语言基础,Qt编程入门,QT信号与槽机制,QT界面开发-图像绘制,QT网络,QT数据库编程,QT项目实战,QSS,OpenCV,Quick模块,面试题等等)↓↓↓↓↓↓见下面↓↓文章底部点击莬费领取↓↓