Qt控件美化.docx
- 文档编号:11190238
- 上传时间:2023-02-25
- 格式:DOCX
- 页数:18
- 大小:18.67KB
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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Qt 控件 美化