qt “美颜”

要想成为一名优秀的qt工程师 学会使用qss编程也是重要的 不可获缺的一部分

qss 简介和优势

QSS（Qt Style Sheets）是一种用于定义Qt应用程序界面外观和样式的样式表语言。它类似于CSS（层叠样式表），但针对Qt框架进行了定制和扩展。同时也支持qss和C++的混合编程

通过使用QSS，你可以轻松地自定义Qt应用程序的外观，包括窗口、控件、布局等元素的样式、颜色、字体等属性。以下是一些关键特点和用途：

1. 选择器：QSS允许你使用类似CSS的选择器来选取目标控件或控件类型，并为其设置样式。例如，.QPushButton表示所有QPushButton按钮。
   
2. 属性设置：可以使用QSS为控件设置各种属性，如背景颜色、文本颜色、边框样式、边距等。例如，background-color: red;将按钮的背景色设置为红色。
   
3. 继承与层叠：可以通过继承和层叠概念在不同级别上对控件进行样式设置。这意味着你可以在全局范围内设置默认样式，并在特定的控件上进行覆盖或添加附加样式。
   
4. 动态效果：QSS还支持一些动态效果，如鼠标悬停、按下等状态下的样式变化。这使得你可以根据用户交互和状态更改控件的外观。
   

使用QSS可以带来以下优势：

• 一致性：通过统一的样式表，可以确保应用程序中所有控件的外观保持一致。
  
• 可定制性：你可以根据设计需求自由定制控件的样式，使其与应用程序风格匹配。
  
• 灵活性：可以轻松修改和调整样式，而无需更改底层代码。这使得界面的迭代和主题切换变得简单。
  
• 分离设计与逻辑：将界面设计与业务逻辑分离，开发人员和设计师可以并行工作，并独立进行修改和更新。
  

在Qt框架中，你可以通过在应用程序或窗口上设置QSS样式表来应用样式。使用setStyleSheet()函数将QSS样式表应用于特定的部件或全局范围。

掌握setStyleSheet（样式表函数）就可以掌握qss编程的一大半了

setStyleSheet的语法格式实例：

ui->pushButton_Ok->setStyleSheet("QPushButton{background-color:#66ffff;border-radius:5px;text-align:center;font-size:16;color:gray;}"
                                     "QPushButton:hover{background-color:#66ff11;border-radius:5px;text-align:center;font-size:16;color:yellow;}"
                                     "QPushButton:pressed{background-color:#6600ff;border-radius:5px;text-align:center;font-size:16;color:red;}"
                                     "QPushButton:disabled{background-color:#00ffff;border-radius:5px;text-align:center;font-size:16;color:green;}");

下面小编来描述一下这段代码 ：

这段代码主要讲的是ui界面获取按钮控件 其对象名称是pushButton_Ok  控件采用setStyleSheet函数来美化

background-color 背景颜色 #66ffff是对应颜色的16进制

border-radius 意思是方框的圆角设置为5像素

text-align:center 文本居中对齐

font-size: 16 设置字体大小为16

color：red 设置字体颜色为red

总体:

• 默认状态下，背景色为#66ffff，边框圆角为5px，文本居中对齐，字体大小为16，颜色为灰色。
• 鼠标悬停时(hover)，背景色变为#66ff11，其余样式与默认状态相同。
• 按钮被按下时(press)，背景色变为#6600ff，其余样式与默认状态相同。
• 按钮被禁用时（disabled），背景色变为#00ffff，其余样式与默认状态相同。

这段代码设置了按钮在不同鼠标事件下的状态以及按钮的外观 圆角  能够很好的美化控件

美化前的效果:

以下是美化后的效果:

怎么样 是不是一目了然

现在来看一下qss的具体应用:

#include <QtWidgets>
int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    // 创建一个QPushButton对象
    QPushButton button("Click me!");
    // 使用QSS设置按钮的样式
    button.setStyleSheet("QPushButton {"
                         "    background-color: #4CAF50;"
                         "    color: white;"
                         "    padding: 10px;"
                         "}"
                         "QPushButton:hover {"
                         "    background-color: #45a049;"
                         "}"
                         "QPushButton:pressed {"
                         "    background-color: #367c39;"
                         "}");
    button.show();
    return app.exec();
}

上述代码创建了一个带有"Click me!"文本的按钮，并使用QSS设置了按钮的背景颜色、字体颜色以及鼠标交互效果。

总结：本篇文章主要讲述了qss编程的应用 他的语法类似于前端开发中的css 但是又不是完全一样在qt开发中常常用qss的技术来美化控件 使得控件更好看 美丽 核心语法就是样式表 弄懂即可

好了 本篇文章就到这里 在这里小编想向大家推荐一个课程 :

https://xxetb.xetslk.com/s/2PjJ3T

祝大家生活愉快