Qt控件美化.docx
《Qt控件美化.docx》由会员分享，可在线阅读，更多相关《Qt控件美化.docx（18页珍藏版）》请在冰点文库上搜索。
Qt控件美化
Qt控件美化
级联样式表 （CSS） 包含应用于网页中的元素的样式规则。
CSS 样式定义元素的显示方式以及元素在页中的放置位置。
可以创建一个通用规则，只要 Web 浏览器遇到一个元素实例，或遇到一个分配给某个特定样式类的元素，该规则就立刻应用属性，而不是将属性逐个分配给页中的每个元素。
CSS 样式可以通过内联方式放置在单个 HTML 元素内，也可以在网页 head 部分的 style 块内加以分组，或从单独的样式表中导入。
如果样式是在单独的样式表中创建的，则可以将多个网页链接到该样式表，从而为整个网站提供一个通用的外观。
如果使用 CSS 设置 Web 控件的样式，则应使用 CssClass 属性来定义要与控件或控件元素关联的 CSS 类名，然后在样式表中为这些控件或控件元素指定样式时引用该类名。
下面将通过几个例子来介绍一下怎样使用Qt 中的部件类型设计。
自定义的前台背景与后台背景的颜色：
如果需要样一个文本编辑器的背景变为黄色， 下面是代码行：
qApp->setStyleSheet（"QLineEdit{background-color:
yellow}"）;
针对一个对话框的内容中使用QLineEdit 以及QLineEdit 的子类的背景都变成黄色， 下面是代码：
myDialog->setStyleSheet（"QLineEdit{background-color:
yellow}"）;
如果只需要制定一个QLineEdit 的内容， 将使用QObject:
:
setObjectName（） 下面是一个实例：
myDialog->setStyleSheet（"QLineEdit#nameEdit{background-color:
yellow}"）;
同时也可以针对每一个指定的部件做直接的类型设置， 下面是一个实例：
nameEdit->setStyleSheet（"background-color:
yellow"）;
为了做一个鲜明的对比， 将要为文本设置合适的颜色。
nameEdit->setStyleSheet（"color:
blue;background-color:
yellow"）;
当然最好的办法还有针对选择的文本来进行设置， 下面设置了一个选择文本的类型属性：
nameEdit->setStyleSheet（"color:
blue;"
"background-color:
yellow;"
"selection-color:
yellow;"
"selection-background-color:
blue;"）;
在有一些情况下， 不需要用户参与， 而有软件设计人员来自己制定样式， 即使这些是有违审美角度。
下面就从应用程序开发角度来设计样式。
*[mandatoryField="true"]{background-color:
yellow}
上面的意思是一些强制的区域是需要用Qt 的属性管理来强制设置成为黄色的背景。
这样一些强制的部件，将需要通过函数来设置当前的属性已经被强制设置， 下面是实现的代码：
QLineEdit*nameEdit=newQLineEdit（this）;
nameEdit->setProperty（"mandatoryField",true）;
QLineEdit*emailEdit=newQLineEdit（this）;
emailEdit->setProperty（"mandatoryField",true）;
QSpinBox*ageSpinBox=newQSpinBox（this）;
ageSpinBox->setProperty（"mandatoryField",true）;
QPushButton：
下面我们将通过一个按钮的部件来设置属性样式：
首先来设置一下样式：
QPushButton#evilButton{background-color:
red}
说明设置的当前的按钮为红色。
作为一个flat 平滑的按钮时没有边界的。
下面是来改进一下对边界的设置。
QPushButton#evilButton{
background-color:
red;
border-style:
outset;
border-width:
2px;
border-color:
beige;
}
在这里设置了一个边界的类型与边界的宽度。
这样看上去就好多了，文档中无法展现图片， 有兴趣可以去Qt的变成环境当中去尝试。
即使这样设计， 按钮看上去也是显得混乱，与主部件没有办法分开。
首先是在边界设置出一个空间出来， 并且强制的制定最小宽度，与环绕的弧度， 并且提供一个按钮的字体设置， 似的按钮看上去比较好看。
QPushButton#evilButton{
background-color:
red;
border-style:
outset;
border-width:
2px;
border-radius:
10px;
border-color:
beige;
font:
bold14px;
min-width:
10em;
padding:
6px;
}
如此这样当我们点击按钮的时候按钮也不会发生什么样的深刻变化。
所以就需要指定一个合适的背景颜色与不一样的边界类型。
QPushButton#evilButton{
background-color:
red;
border-style:
outset;
border-width:
2px;
border-radius:
10px;
border-color:
beige;
font:
bold14px;
min-width:
10em;
padding:
6px;
}
QPushButton#evilButton:
pressed{
background-color:
rgb（224,0,0）;
border-style:
inset;
}
指定QPushButton 菜单指示器的子控制
子控提供了访问子子元素的功能， 例如通常的时候一个按钮将会管理一个菜单，
QPushButton#evilButton:
:
menu-indicator{
image:
url（myindicator.png）;
}
同时如果美化一个按钮的话， 那么将可以通过定位符来确定美化按钮的路径， 通常可以是一个图片。
QPushButton:
:
menu-indicator{
image:
url（myindicator.png）;
subcontrol-position:
rightcenter;
subcontrol-origin:
padding;
left:
-2px;
}
经过以上的设置那么QPushButton 将会在方格的中心显示一个myindicator.png 的图片。
定制按钮
QPushButton{
border:
1pxsolid#8f8f91;
border-radius:
6px;
background-color:
qlineargradient（x1:
0,y1:
0,x2:
0,y2:
1,
stop:
0#f6f7fa,stop:
1#dadbde）;
min-width:
80px;
}
QPushButton:
pressed{
background-color:
qlineargradient（x1:
0,y1:
0,x2:
0,y2:
1,
stop:
0#dadbde,stop:
1#f6f7fa）;
}
QPushButton:
flat{
border:
none;/* 没有边框的按钮 */
}
QPushButton:
default{
border-color:
navy;/* 使得按钮显示变得更加突出 */
}
QPushButton:
open{/*whenthebuttonhasitsmenuopen*/
background-color:
qlineargradient（x1:
0,y1:
0,x2:
0,y2:
1,
stop:
0#dadbde,stop:
1#f6f7fa）;
}
QPushButton:
:
menu-indicator{
image:
url（menu_indicator.png）;
subcontrol-origin:
padding;
subcontrol-position:
bottomright;
}
QPushButton:
:
menu-indicator:
pressed,QPushButton:
:
menu-indicator:
open{
position:
relative;
top:
2px;left:
2px;/*shiftthearrowby2px*/
}
QSlider：
下面的横向的slider
QSlider:
:
groove:
horizontal{
border:
1pxsolid#999999;
height:
8px;/*thegrooveexpandstothesizeofthesliderbydefault.bygivingitaheight,ithasafixedsize*/
background:
qlineargradient（x1:
0,y1:
0,x2:
0,y2:
1,stop:
0#B1B1B1,stop:
1#c4c4c4）;
margin:
2px0;
}
QSlider:
:
handle:
horizontal{
background:
qlineargradient（x1:
0,y1:
0,x2:
1,y2:
1,stop:
0#b4b4b4,stop:
1#8f8f8f）;
border:
1pxsolid#5c5c5c;
width:
18px;
margin:
-2px0;/*handleisplacedbydefaultonthecontentsrectofthegroove.Expandoutsidethegroove*/
border-radius:
3px;
}
QSlider:
:
groove:
vertical{
background:
red;
position:
absolute;/*absolutelyposition4pxfromtheleftandrightofthewidget.settingmarginsonthewidgetshouldworktoo...*/
left:
4px;right:
4px;
}
QSlider:
:
handle:
vertical{
height:
10px;
background:
green;
margin:
0-4px;/*expandoutsidethegroove*/
}
QSlider:
:
add-page:
vertical{
background:
white;
}
QSlider:
:
sub-page:
vertical{
background:
pink;
}
QSizeGrip：
一般讲通过一个图片进行设置 ：
QSizeGrip{
image:
url（:
/images/sizegrip.png）;
width:
16px;
height:
16px;
}
定制QSplitter：
QSplitter:
:
handle{
image:
url（images/splitter.png）;
}
QSplitter:
:
handle:
horizontal{
height:
2px;
}
QSplitter:
:
handle:
vertical{
width:
2px;
}
QStatusBar：
将提供一个状态栏的边框与项目的定制：
QStatusBar{
background:
brown;
}
QStatusBar:
:
item{
border:
1pxsolidred;
border-radius:
3px;
}
QTabWidget与QTabBar：
QTabWidget:
:
pane{/*Thetabwidgetframe*/
border-top:
1pxsolid#C2C7CB;
}
QTabWidget:
:
tab-bar{/*movetotherightby5px*/
left:
5px; }
/*Stylethetabusingthetabsub-control.Notethat
itreadsQTabBar_not_QTabWidget*/
QTabBar:
:
tab{
background:
qlineargradient（x1:
0,y1:
0,x2:
0,y2:
1,
stop:
0#E1E1E1,stop:
0.4#DDDDDD,
stop:
0.5#D8D8D8,stop:
1.0#D3D3D3）;
border:
1pxsolid#C4C4C3;
border-bottom-color:
#C2C7CB; /*sameasthepanecolor*/
border-top-left-radius:
4px;
border-top-right-radius:
4px;
min-width:
8ex;
padding:
2px;
}
QTabBar:
:
tab:
selected,QTabBar:
:
tab:
hover{
background:
qlineargradient（x1:
0,y1:
0,x2:
0,y2:
1,
stop:
0#fafafa,stop:
0.4#f4f4f4,
stop:
0.5#e7e7e7,stop:
1.0#fafafa）;
}
QTabBar:
:
tab:
selected{
border-color:
#9B9B9B;
border-bottom-color:
#C2C7CB; /*sameaspanecolor*/
}
QTabBar:
:
tab:
!
selected{
margin-top:
2px; /*makenon-selectedtabslooksmaller*/
}
QTabWidget:
:
pane{ /*Thetabwidgetframe*/
border-top:
1pxsolid#C2C7CB;
}
QTabWidget:
:
tab-bar{
left:
5px; /*movetotherightby5px*/
}
/*Stylethetabusingthetabsub-control.Notethat
itreadsQTabBar_not_QTabWidget*/
QTabBar:
:
tab{
background:
qlineargradient（x1:
0,y1:
0,x2:
0,y2:
1,
stop:
0#E1E1E1,stop:
0.4#DDDDDD,
stop:
0.5#D8D8D8,stop:
1.0#D3D3D3）;
border:
1pxsolid#C4C4C3;
border-bottom-color:
#C2C7CB; /*sameasthepanecolor*/
border-top-left-radius:
4px;
border-top-right-radius:
4px;
min-width:
8ex;
padding:
2px;
}
QTabBar:
:
tab:
selected,QTabBar:
:
tab:
hover{
background:
qlineargradient（x1:
0,y1:
0,x2:
0,y2:
1,
stop:
0#fafafa,stop:
0.4#f4f4f4,
stop:
0.5#e7e7e7,stop:
1.0#fafafa）;
}
QTabBar:
:
tab:
selected{
border-color:
#9B9B9B;
border-bottom-color:
#C2C7CB; /*sameaspanecolor*/
}
QTabBar:
:
tab:
!
selected{
margin-top:
2px; /*makenon-selectedtabslooksmaller*/
}
/*makeuseofnegativemarginsforoverlappingtabs*/
QTabBar:
:
tab:
selected{
/*expand/overlaptotheleftandrightby4px*/
margin-left:
-4px;
margin-right:
-4px;
}
QTabBar:
:
tab:
first:
selected{
margin-left:
0; /*thefirstselectedtabhasnothingtooverlapwithontheleft*/
}
QTabBar:
:
tab:
last:
selected{
margin-right:
0; /*thelastselectedtabhasnothingtooverlapwithontheright*/
}
QTabBar:
:
tab:
only-one{
margin:
0; /* 如果只有一个页面, 我们不能重叠边缘 */
}
QTabWidget:
:
pane{/*Thetabwidgetframe*/
border-top:
1pxsolid#C2C7CB;
position:
absolute;
top:
-0.5em;
}
QTabWidget:
:
tab-bar{
alignment:
center;
}
/*Stylethetabusingthetabsub-control.Notethat
itreadsQTabBar_not_QTabWidget*/
QTabBar:
:
tab{
background:
qlineargradient（x1:
0,y1:
0,x2:
0,y2:
1,
stop:
0#E1E1E1,stop:
0.4#DDDDD
升级会员 