Qt之样式表使用（十一）

Qt开发系列文章 - stylesheet（十一）

前言

stylesheet-toc" style="margin-left:0px;">一、样式表stylesheet

二、代码更改

1.特定控件样式

编辑

2.类型选择器样式

3.ID选择器样式

三、UI上设计

qss%E6%96%87%E4%BB%B6%E8%AE%BE%E8%AE%A1-toc" style="margin-left:0px;">四、qss文件设计

总结

前言

Qt是一个跨平台的C++图形用户界面应用程序开发框架，它提供了丰富的功能来创建美观和响应式的用户界面。样式表（Stylesheet）在Qt中用于自定义控件的外观，类似于CSS在网页中的作用。Qt样式表允许你改变窗口部件（widgets）的颜色、字体、边距等属性，使你的应用程序更具吸引力。

stylesheet" style="background-color:transparent;">一、样式表stylesheet

Qt样式表的语法与CSS非常相似，你可以使用选择器来指定要改变的控件，然后使用属性和值来定义样式。另外Qt样式表支持多种选择器，包括类型选择器、属性选择器、类选择器和ID选择器。

Qt样式表的使用也有多重方式，可以直接在项目中添加代码更换、可以在可视化界面UI上添加更改、也可以通过qss文件导入的方式进行更改。

二、代码更改

创建一个新的项目，编译运行完后，有如下界面。

1.特定控件样式

然后再构造函数上，进行样式表的修改，先显示一个部件label1的颜色，代码如下。

MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{ui->setupUi(this);// 修改一个部件颜色ui->label->setStyleSheet("QLabel {background-color: red;}");
}

2.类型选择器样式

如果要显示全部Label的颜色，则修改如下。

this->setStyleSheet("QLabel {background-color: red;}");

3.ID选择器样式

如果要改变特定部件Label的颜色，则修改如下。

this->setStyleSheet("#label_3 {background-color: red;}");

Qt样式表不仅仅是修改背景颜色，还有一些其它的指令，例如：

background-color：设置背景颜色；
color：设置文本颜色；
font-size：设置字体大小；
border：设置边框；
border-radius：设置边框圆角半径；
padding：设置内边距；
margin：设置外边距；
等等其他设置，更为具体的参见官方文档。

Qt还允许直接在样式表中使用Qt资源文件，如 background-image:url(:/image/***.png)，这使得管理和使用图像资源变得更加方便。

this->setStyleSheet("#label_3 {image: url(image/te.png)}");

Qt还引入了一些特定的伪状态，这些状态对应于Qt控件的特定状态。这些伪状态包括 :disabled、:hover（用于鼠标悬停时）、:pressed（用于按钮被按下时）、:checked、:unchecked、:indeterminate（对于复选框而言）等。

例如：

this->setStyleSheet("#pushButton:hover {background-color: red;}");

三、UI上设计

双击打开UI设计界面，选中Lable1右键，选择改变样式表，进行如下设计，如下图。

也可以修改全部Label的颜色，如下设置。

其它的一些样式属性，同理也可以在上面设置。

qss%E6%96%87%E4%BB%B6%E8%AE%BE%E8%AE%A1">四、qss文件设计

QSS (Qt Style Sheets) 在支持大部分 CSS2.1 特性的基础上，还引入了一些专为 Qt 设计的独有扩展。这些扩展提高了 QSS 在定制 Qt 应用程序界面方面的能力，使得开发者可以更灵活地控制应用程序的外观。

在设计Qt软件，通过导入qss文件，可以使得设计更为便捷，将软件的样式表和程序功能开发很好的分开了，在繁忙时可以分发给不同的人设计。

在构造函数上，添加如下代码，导入qss文件。

MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{ui->setupUi(this);QString FilePath = "qss/paramsetting.qss";QFile file(FilePath);if( file.open(QFile::ReadOnly)){QString styleSheet = QString::fromUtf8(file.readAll());this->setStyleSheet(styleSheet);file.close();qDebug()<<"load success";}elseqDebug()<<"load error";
}

qss文件内容如下，示例。

/*按钮QPushButton样式 应用到所有QPushButton类型的按钮*/
QPushButton {  background-color: #4CAF50;  border: none;  color: white;  padding: 10px 20px;  text-align: center;  text-decoration: none;  /*display: inline-block;*/font-size: 16px;  margin: 4px 2px;  /*cursor: pointer;*/ 
}
/*文本QLabel颜色和背景*/
QLabel {  color: red;  background-color: white;  
}
/*特定文本设置*/
#label_3 {image: url(image/te.png);
}
/*QLineEdit边框和圆角*/
QLineEdit {  border: 2px solid #000000;  border-radius: 5px;  
}
/*QPushButton在鼠标悬停时的背景颜色hover 悬停和焦点样式*/
QPushButton:hover {  background-color: #45a049; image: url(:/images/arrow.png); /* 使用自定义的箭头图标 */ 	
}  
QPushButton:focus {  border: 2px solid red;  
}

编译运行，提示导入文件成功，显示如下设置画面。