1.前言
QT使用样式表通常有三种方式：
1. 在UI设计器---Qt Designer 内添加并设置样式；
优点：直观显示。
缺点：样式比较多时，不利于检查样式是否编写错误。同时不可以二次修改，即界面显示完毕后无法通过此方法修改界面的样式，只能靠代码去修改。
-
在代码内直接使用样式；
优点：此种方法很方便，也很快捷。可以随时设置样式，改变样式，根据不同条件设置不同的样式，而不像第一、第三种方法直接设置固定样式。
缺点：当样式内容较复杂时，不利于查看，同时可能为了编码风格美观需要将样式内容换行等，这样可能会导致样式错误，根本没有效果，导致需要多次调试，浪费不必要的时间。
-
将样式添加在文件内，以读取文件的方式来设置样式；
优点：
这种方法在界面样式较复杂时，我们在文件中编写样式，内容比较清晰，样式编写格式错误更加明显。同时也便于修改，同时一些文件编辑器能够自动给出样式输入提示，提供高编码效率。
缺点：
一般样式表文件都会加载到程序资源文件中，所以这里需要单独加载一个文件。同时跟第一种方法一样，不可以二次修改，当界面显示完毕后，只能靠调用setStyleSheet方法再次修改。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
2.QPushButton和QToolButton 鼠标普通态、停留态、按下态
以QPushButton为例：
/*按钮普通态*/
QPushButton
{
/*字体为微软雅黑*/
font-family:Microsoft Yahei;
/*字体大小为20点*/
font-size:20pt;
/*字体颜色为白色*/
color:white;
/*背景颜色*/
background-color:rgb(14 , 150 , 254);
/*边框圆角半径为8像素*/
border-radius:8px;
}
/按钮停留态/
QPushButton:hover
{
/背景颜色/
background-color:rgb(44 , 137 , 255);
}
/按钮按下态/
QPushButton:pressed
{
/背景颜色/
background-color:rgb(14 , 135 , 228);
/左内边距为3像素，让按下时字向右移动3像素/
padding-left:3px;
/上内边距为3像素，让按下时字向下移动3像素/
padding-top:3px;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
3.QLabel设置前景色、背景色、字体大小、字体类型
QLabel {
font-family: "Microsoft YaHei";
font-size: 14px;
color: #BDC8E2;
background-color: #2E3648;
}
- 1
- 2
- 3
- 4
- 5
- 6
4.QLineEdit边框、背景颜色设置
QLineEdit
{
border: 1px solid gray; /* 边框 */
border-radius: 4px; /* 边框圆角 */
padding: 0 8px; /* 内容与边框距离 */
background: white; /* 背景颜色 */
selection-background-color: darkgray; /*所选内容的背景颜色*/
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
5. 窗体背景图片设置
例如: 设置主窗体背景图片为 new_back.png
QWidget#MainWindow
{
image: url(:/new/prefix/resource/new_back.png);
}
- 1
- 2
- 3
- 4
附注
- 在不改变原有的样式下，添加附加新样式的方式：
void setNewStyleSheet(QString styleSheet)
{
//获取到原来的样式
QString oldStyleSheet = this->styleSheet();
styleSheet += oldStyleSheet;
this->setStyleSheet(styleSheet);
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- QPushbutton或者QToolButton 的背景图片自动缩放，自适应按键大小
QPushButton *button = new QPushButton(this);
button->setGeometry(50, 50, 100, 50);
button->setStyleSheet("border-image:url(:/timg.jpg)");
connect(button, &QPushButton::pressed, [=](){
button->setStyleSheet("border-image:url(:/myico.ico)");}
);
connect(button, &QPushButton::released, [=](){
button->setStyleSheet("border-image:url(:/timg.jpg)"); }
);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- QT工程加载一个样式表
QFile file(":/qss/stylesheet/mysheet.qss");
file.open(QFile::ReadOnly);
QString styleSh = tr(file.readAll());
setStyleSheet(styleSh);
file.close();
- 1
- 2
- 3
- 4
- 5