除了合理的布局之外,要使界面更加美观,还需要用样式表来进行一定的设计。
样式表语法基础
Qt的样式表与CSS的语法规则几乎完全相同。
每个样式表规则都有着下面的形式:
selector{attribute:value}
其中,选择器(selector)部分通常是一个类名(如QComboBox),当然还有其他语法形式。属性(attribute)部分是一个样式表属性的名字,(如color),值(value)部分是赋给该属性的值(如red)。
QComboBox{color:red;}
为了使用方便,我们还可以使用一种简化形式,可以对具有相同样式的选择器进行统一操作:
selector1,selector2,...,selectorN{
attribute1:value1;
attribute2:value2;
...
attributeN:valueN;
}
首先,先创建一个简单的带按钮的窗口,如图:
再调用setStyleSheet()方法设置按钮的样式。
#include "Widget.h"
#include <QPushButton>
Widget::Widget(QWidget *parent)
: QWidget(parent)
{
QPushButton *p_button=new QPushButton(this);
p_button->move(100,100);
p_button->setText("QSS");
p_button->setStyleSheet("QPushButton{color:red;background-color:black;width:80px;height:80px;}");
}
Widget::~Widget()
{
}
P.S:也可以用rgb或者十六进制数设置颜色,比如:rgb(255,255,255) 或者 #FFFFFF
效果如图:
方盒模型
和CSS中的盒子模型一样,Qt中的部件也具有margin(外边距)、border(边框)、padding(内边距)、content(内容)这些概念。通过以下例子感受一下:
#include "Widget.h"
#include <QPushButton>
Widget::Widget(QWidget *parent)
: QWidget(parent)
{
QPushButton *p_button1=new QPushButton(this);
p_button1->setText("QSS");
p_button1->setStyleSheet("QPushButton{color:red;background-color:black;width:80px;height:80px;}");
this->setStyleSheet("QWidget{background-color:gray;"
"margin:20px;"
"padding:50px;"
"border:10px solid #FFF;"
"}");
}
Widget::~Widget()
{
}
实现效果:
可以看到,在上面的代码中,我为窗口设置了灰色的背景,由于设置了margin为20px,所以按钮相对父元素有一个宽度为20px的外边距。同时,边框宽度设置为10px,并且为白色,而内边距设置为50px。
前景和背景
前景和背景在上一个例子中已经了解过了,前景(color)一般用于绘制文本的颜色,背景的作用不言而喻。这里需要提的是,背景不仅可以是颜色,还可以是图片。
#include "Widget.h"
#include <QPushButton>
Widget::Widget(QWidget *parent)
: QWidget(parent)
{
QPushButton *p_button1=new QPushButton(this);
p_button1->setText("QSS");
p_button1->setStyleSheet("QPushButton{color:red;background-color:black;width:80px;height:80px;}");
this->setStyleSheet("QWidget{background-color:gray;"
"margin:20px;"
"padding:50px;"
"border:10px solid #FFF;"
"background-image:url(C:/Users/MSI-NB/Desktop/bgi.jpg) stretch stretch;"
"}");
}
Widget::~Widget()
{
}
实现效果:
伪状态
Qt中一些常用伪状态:
伪状态 | 描述 |
---|---|
:check | button部件被选中 |
:disabled | 部件被禁用
|
:enabled | 部件被启用 |
:focus | 部件获得焦点 |
:hover | 鼠标位于部件上 |
:indeterminate | checkbox或radiobutton被部分选中 |
:off | 部件可以切换,且处于off状态 |
:on | 部件可以切换,且处于on状态 |
:unchecked | button部件未被选中 |
举个例子,我们可以用:hover实现鼠标移入按钮区域时,更换按钮的背景图片的效果:
#include "Widget.h"
#include <QPushButton>
Widget::Widget(QWidget *parent)
: QWidget(parent)
{
QPushButton *p_button1=new QPushButton(this);
p_button1->setText("QSS");
p_button1->setStyleSheet("QPushButton{color:red;background-color:black;width:80px;height:80px;}");
this->setStyleSheet("QWidget{background-color:gray;"
"margin:20px;"
"padding:50px;"
"border:10px solid #FFF;"
"background-image:url(C:/Users/MSI-NB/Desktop/bgi.jpg)}"
//设置伪状态
"QWidget:hover{background-image:url(C:/Users/MSI-NB/Desktop/hover.jpg)"
"}");
}
Widget::~Widget()
{
}
实现效果:
P.S:如有错误,欢迎指正~
版权声明:本文为weixin_41001497原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。