Qt Ui界面风格的蜕变——样式表qss使用

一、什么是样式表

样式表在Qt中设置的英文名为——StyleSheet().

它是关于文件对标题和正文的默认字体、大小、颜色、前页外观、单个部分的排列间隔、行间距、四周页边距、标题间距离等元素的定义。样式表在电子文档开始时，可以通过插入或者链接进行定义。————百度百科

样式表常用的有CSS和QSS

1、CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。————百度百科

深入了解CSS：https://www.w3school.com.cn/css/index.asp

2、QSS

Qt样式表（Qt Style Sheet）是继承于CSS的Qt独有的样式表。
虽然其功能不足CSS，但是QSS也能够最大满足我们的界面设计需要。

二、如何使用QSS——核心

1、简介

QSS继承于CSS，所以他们的用法大致相同：

QPushButton{
color:white;
background:red;
}

这段话的意思是基于QPushbutton控件的样式为：字体颜色为白色，背景色为红色。

由此可见，样式表主要包括：

选择器 { 声明1; 声明2; ··· }

常用的声明关键字有：

注意中间的"-"不是"_"

Name	含义
color	字体颜色
font-family	字体款式
font-size	字体大小
background / background-color	背景色
background / background-image	背景图片
border-image	边框内嵌入图片
border	图形大小颜色、边框隐藏
text-align	文本校准
margin	边缘距离
～下面是后续添加高级语法～	～～～～～～～～
border-radius	设置边框四角圆润度
selection-background-color	选中文本背景颜色
lineedit-password-character	密码替代字符

2、ui界面设置样式表

在ui编辑界面，选中主窗口后，在右边的属性栏中翻找 styleSheet。进入后可在此输入样式表内容。

如图：

3、程序调用

当我们创建了一个不带ui界面的工程。那么就可以使用.setStyleSheet(const QString &)函数使用样式表。

看到参数是QString类型，那么我们就可以分两种方法。

1. 直接使用。

这种方法适用于样式表内容较少。

如：

    setStyleSheet("QPushButton{color:white;background:red;}");    
    button = new QPushButton(this);
    button->move(20,30);
    button->setText("me");

效果：

2.文本形式读取

这种方法就适用于内容较多，且不方便在程序中编写。

如：可以是 .txt 文件格式

    QFile file("/Users/yucheng/try/file.css");
    file.open(QIODevice::ReadOnly);
    setStyleSheet(file.readAll());

    button = new QPushButton(this);
    button->move(20,30);
    button->setText("me");

效果一样，不列出。

三、选择器

（1）、选择器

名称	用法	说明
通配选择器	*	其窗口及其内部所有类型组件都配用
类选择器	QPushButton	窗口内同一类的组件都配用
属性选择器	QPushButton[flat=“false”]
类选择器	.QPushButton
id选择器	QPushButton # button	只有特定组件配用
后代选择器	QDialog QPushButton
子选择器	QDialog > QPushbutton

（2）、特定选择器

既然有全部，也有单一选择器。如只将按钮pushButton字体设置成红色，那么

#pushButton{color:red;}

多个特定：

#pushButton,#pushButton2{
color:red;
}

• 注意，如果你确定你的语法和单词都没有拼错的情况下，样式表对特定组件没有生成理想效果。那是因为编译器不知道你特定的名称指的是什么。
  所以需要对特定组件起个名字。

	w1 = new QWidget(this);
    w1->setGeometry(0,0,100,100);
    w1->setObjectName("w1");
    setStyleSheet(
            "#w1 {"
            "border: 2px solid red;"
            "border-radius: 3px;"
            "};"
            );

• 所以要注意样式表使用的位置，如果不需要特定组件，那么在前在后都可以使用，如果在特定组件之后，那么一定要在setObjectName之后。

（3）、监听器——hover

这里的鼠标监听是指：鼠标悬停在控件上后，执行的样式表。

比如说，原按钮字体是红色，鼠标移动到按钮上，那么字体转为绿色。
那么可以使用

QPushButton:hover{
color: green;
}

（4）、监听器——pressed

和上面一样的，点击时的样式表，不阐述。

QPushButton:pressed{
color: green;
}

（5）、监听器——focus

这是在使用窗口聚焦时使用的，

	w1 = new QWidget(this);
    w1->setGeometry(0,0,100,100);
    w1->setObjectName("w1");
    w2 = new QWidget(this);
    w2->setGeometry(100,0,100,100);
    w2->setObjectName("w2");
    w3 = new QWidget(this);
    w3->setGeometry(0,100,100,100);
    w3->setObjectName("w3");
    w4 = new QWidget(this);
    w4->setGeometry(100,100,100,100);
    w4->setObjectName("w4");

    text = new QTextEdit(w1);
    text->setGeometry(10,10,80,80);

    line = new QLineEdit(w2);
    line->setGeometry(10,40,80,20);
    
    label = new QLabel(w3);
    label->setText("三号窗口");
    label->setGeometry(20,40,80,20);

    button = new QPushButton(w4);
    button->setText("按钮");
    button->setGeometry(20,30,60,30);

    w1->setFocusPolicy(Qt::ClickFocus);
    w2->setFocusPolicy(Qt::ClickFocus);
    w3->setFocusPolicy(Qt::ClickFocus);
    w4->setFocusPolicy(Qt::ClickFocus);
   
    setObjectName("w");
    setStyleSheet(
                "#w1:focus, #w2:focus, #w3:focus, #w4:focus{"
                "border: 2px solid red;"
                "border-radius: 3px;"
                "}"
                  );

以上代码的意思是在主窗口中创建四个子窗口，分别容纳文本框、行编辑框、标签、按钮，将主窗口划分为四个区域。在选中某窗口时，窗口边框显示为红色。

四、声明

简介

声明的统一格式为

{关键字：值}

当声明只有一个时，语句末端可以不加“;”。
但是如果有多个声明，除最后一个可加可不加，其余必须加上“;”。

（1）、color

这是设置按钮显示的颜色字体的关键字，值可以直接输入五种形式

color: red;
color: rgb(255,0,0);
color: rgb(100%,0,0);
color: #FF0000;
color: #F00;

以上任意一种都可实现

---

有一点要说的是，颜色rgb后面可以有四个参数（不局限于color字关键字，在background、background-color里也一样）。那么第四个参数是什么呢？

直接举个例子：

#MainWindow
{
border-image:url("/Users/yucheng/allpic/back.jpeg");
}
QLineEdit
{
border-radius:5px;
background:rgb(255,255,255);
}

这样显示行编辑栏就是

注意编辑栏背景就是默认的白色

那么修改参数为四个，也就是

QLineEdit
{
border-radius:5px;
background:rgb(255,255,255，150);		//透明度为150÷255
}

显示

可见颜色已经不是纯白色了。

继续修改，

QLineEdit
{
border-radius:5px;
background:rgb(255,255,255，50);		//透明度为50÷255
}

则显示为

几乎透明！

---

（2）、font-family

这是设置字体的关键字，可用模版有：

font-family: kaiti;
font-family: 楷体;
font-family: "kaiti";
font-family: "楷体";

但是如果是个词组（单词数≥2），那么只能用双引号。

字体参考：https://www.jb51.net/css/67658.html

执行样式表：

QPushButton{
color: red;
font-family: kaiti;
}

效果：

（3）、font-size

这是设置字体大小的关键值，单位是px，且不可省

#pushButton{
background: pink;
}

#pushButton_1{
font-size: 30px;
}

效果：

（4）、background / background-color

这是设置按钮背景颜色的关键字，仅是背景颜色，两个关键字都可。

其用法与字体颜色color一样，不做解释。

QPushButton{
color: #FF0000;
font-family: 楷体;
}

#pushButton{
background: pink;
}

效果：

（5）、background / background-image

这是设置按钮背景图片的关键字，路径图片用url打包。

#pushButton{
background: pink;
}

#pushButton_1{
background: url("/Users/yucheng/allpic/quit.png");
}

效果：

注意和下一节介绍的border-image的区别。

（6）、border-image

这也是设置背景图片的形式之一，但是与background有些差距。

如：

#pushButton{
background: pink;
}

#pushButton_1{
border-image: url("/Users/yucheng/allpic/quit.png");
}

由此可见，background-image是将图片一直填充满可见区域，而border-image则是将图片按照按钮大小修改图片。

（7）、border

这是设置按钮可见区域.

用途一：使用border后可以消除按钮的边框。

#pushButton{
background: pink;
}

#pushButton_1{
border: 0;
}

效果：

不知道的还以为是标签，其实它就是一个有棱有角的按钮。

用途二：当然，这是在没有图片情况下可以使用的方法。如果我们载入了border-image图片，那么border赋予的含义是将图片放大。

#pushButton{
background: pink;
}

#pushButton_1{
border-image: url("/Users/yucheng/allpic/quit.png");
border: 10;
}

效果：

用途三：设置文本框周围颜色

如：

QTextEdit{
border:1px solid blue;
}

效果：

（8）、text-align

这个设置就是将文本内容放在按钮的什么地方。

text-align: center;
text-align: top;
text-align: bottom;
text-align: left;
text-align: right;

以下只展示一个举例：

#pushButton{
background: pink;
}

#pushButton_1{
text-align: top;
}

效果：

（9）、margin

这是设置的按钮可视距离。即按钮可视化与实际按钮的距离。

#pushButton{
background: pink;
}

#pushButton_1{
margin: 20px;
}

效果：

（10）、border-radius

四角圆润度

如将按钮边框设置为5px蓝色，圆润度10px：

QPushButton{
color:red;
border: 5px solid blue;
border-radius: 10px;
}
QPushButton::pressed{
color: white;
}
QTextEdit{
border: 1px solid blue;
}

效果：

下图为未圆润的：

（11）、selection-background-color

光标选中时文本背景显示的颜色
如：

QTextEdit{
selection-background-color: blue;
}

效果：

（12）、lineedit-password-character

在输入密码时，如果设置的echoMode为Password，那么默认显示的密码为······。如果需要显示的是******，那么就需要这个关键字，后面的值是ASCII码。

QLineEdit {
lineedit-password-character: 42;
}

效果：

注意：
在使用这个功能时，要保证已将echoMode设置为Password模式，否则不生效

五、实例运用

• 设计思路：只有两个子窗口-登陆、注册。实现窗口互动，界面优化整洁、舒适。利用这一特性我们使用QTabWidget组件实现功能。
  每个子界面内包含：两个标签、两个行编辑框、一个按钮。

• 样式表语句

1. 主窗口

引入背景图片

#MainWindow
{
border-image:url("/Users/yucheng/allpic/back.jpeg");
}

2. tabWidget

:tab
{
font:25px;
border:0;
height:50px;
width:100px;
background:rgb(255,255,255,50);
border-radius:25px;
}

:tab:hover
{
background:rgb(255,255,255);
}

:pane
{
background:rgb(255,255,255,100);
border-radius:20px;
}

QLabel{
font-family:heiti;
font-size:20px;
}

QLineEdit
{
border-radius:5px;
background:rgb(255,255,255,150);
}

QLineEdit:hover
{
background:rgb(255,255,255,250);
}

QPushButton
{
height:30px;
width:150px;
background:rgb(255,180,0);
border-radius:10px;
font-size: 20px;
font-family:"heiti";
}

QPushButton:hover
{
background:rgb(255,100,0);
}

QPushButton:pressed
{
background:rgb(100,0,0);
}

• 实现效果

*收尾

• 本章主要讲了按钮样式表的用法。
  但是这只是举的一个例子。任何一个隶属于widget的控件都可使用样式表。
  所以，使用样式表的对象，可以是每个控件其自身，也可以是主窗口界面本身。

• 对于一些简单的界面设计，个人推荐在主窗口中设置，所有样式句都在一起，容易查漏补缺。
  但是如果组件过多，还是分开按照父件书写。

• 为了统一习惯性，不管是一句话还是多句话，最后都要加上“;”。

---

• 后来做了前端，全面学习CSS后发现这篇文章简直就是shi啊！不过这才是成长的乐趣。