Qt学习(十)—— 样式表

除了合理的布局之外,要使界面更加美观,还需要用样式表来进行一定的设计。

样式表语法基础

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 版权协议,转载请附上原文出处链接和本声明。