QT界面优化

最新推荐文章于 2025-02-15 00:08:46 发布

菜菜求佬带

最新推荐文章于 2025-02-15 00:08:46 发布

阅读量1.9k

点赞数 36

文章标签： qt 开发语言

本文链接：https://blog.youkuaiyun.com/qq_61422622/article/details/139596035

版权

前言：既然QT主要做客户端开发，那么一个程序的的界面好看是否重要呢，这就要取决你这个程序面对的用户是那些，如果是面向一些专业领域的人的程序，其实不是很重要，而是功能逻辑更加重要，如果面向的是普通用户，那么界面的美化是一个大大的加分项。“看脸世界”😭
我们对于QT界面的主要优化主要就是使用QSS，即样式，我们可以通过修改样式表，或者调用函数接口setstylesheet进行QSS的美化。QSS也是借鉴了CSS的美化，虽然没有CSS那么丰富，多样，但是足够支持我们使用了。

基本语法

QSS沿用了CSS的语法结构：

选择器
{
属性：属性值；
…
}

那么什么是选择器，选择器：*表示你选择某一个或者某一类控件，接下来进行对这些控件的各种属性设置,这里的属性包括有，北京属性，边框属性，字体属性，颜色属性，box属性，边距属性，位属性，文本属性，过滤选择器。

设置样式

例如：

QPushButton
{
   
	color:red;
}

    ui->setupUi(this);
    ui->pushButton->setStyleSheet("QPushButton{ color:red;}");
    ui->pushButton->setStyleSheet("QPushButton{ color:#ff0000;}");//使用rgb方式16进行之
    ui->pushButton->setStyleSheet("QPushButton{ color:rgb(255,0,255);}");//l另一种10进制方式

可以看到，使用代码的方式设置，我们是对某个组件调用它的setstylesheet进行设置，确定组件，设置样式，与其他组件互相“独立”。那如果我们这里不是固定某个组件，而是一些组件，比如说主窗口呢？😎

this->setStyleSheet("QPushButton{ color:rgb(255,0,255);}");

此时我们运行就会返发现，凡是添加到主窗口的按钮组件，所有的样式都会是上述样式设置的结果。
除了以上这种方式，QSS还可以设置全局样式。

设置全局样式

相对于这里设置一下，哪里设置一下，全局样式的设置更为常用，更适合修改，增强代码内聚。全局样式的设置，是在主函数中的窗口对象设置的：

int main(int argc, char *argv[])
{
   
    QApplication a(argc, argv);
    Widget w;
    w.setStyleSheet("QPushButton{ color:rgb(255,0,255);}");//全局设置按钮颜色
    w.show();
    return a.exec();
}

且对于全局样式，窗口样式，针对某一控件样式的设置，我的理解是这里就相当于函数重载–就近原则，全局函数调用优先级最低，下来是窗口的函数，在下来是特定的组件函数设置。全局设置是优先级最低的，接下来是对于一个窗口的全局设置，优先级最高的是指定的组件.其次要分两种情况：
第一种情况是：有相同的属性被重复设置了不同的值，优先选取优先级高的属性设置。
第二种情况是：不同的属性分别在全局，一个窗口，指定组件上设置，属性是可以叠加。
简单举个例子：全局设置了按钮颜色，窗口也设置了按钮颜色，按钮最后也设置了颜色，最后选用按钮设置的颜色。
全局设置了按钮颜色，窗口也设置了按钮字体大小，按钮最后也设置了字体颜色，则最后的属性是三者叠加。
对于简单的QSS，我们直接就在代码里写了，但是对于复杂的QSS，我们为了更好的去排查，更好的修改，一般会放到一个文件中并添加到资源文件，程序启动时加载文件获取内容。

QString loadQss()
{
   
    QFile file(":style.qss");
    file.open(QFile::ReadOnly);
    QString style=file.readAll();
    return s tyle;
}

除了该种方式还有更方便的办法，其实在Qt Designer中集成了这样的功能，当然这我们之前也用过，就是在designer中，右键有一个改变样式表，我们只需要以键值对的形式往里面添加属性+属性值；通过这种方式就内置的QSS美化组件。
在这里插入图片描述
所有的属性都可以在里面列出来，具体的某些属性我们可以参照CSS的属性以及属性值，当然上面也提供了一些，添加字体与颜色，添加资源的属性生成。

由于设置方式多种多样，开发中最好就选择一种方式进行样式设置，负责排查起来有点费劲。

选择器

什么是选择器

在QT中，选择器（或称为QSS选择器）是Qt Style Sheets（QSS）的一个重要组成部分，用于选择Qt应用程序中的UI元素并为其应用样式。这些选择器类似于CSS中的选择器，允许开发者根据特定的条件选择UI元素，并为其设置样式，以定制应用程序的外观和风格。
以下是QT中常见的一些选择器类型：
通配符选择器：
匹配所有的控件，用星号（）表示。例如： { background-color: yellow; }
也可以指明子类，注意和子类名之间有空格。例如： QPushButton { background-color: yellow; }
可以指明多个子类。例如：* QPushButton, QLabel { background-color: yellow; }
类型选择器：
通过控件类型来匹配控件（包括子类）。例如：QWidget { background-color: yellow; }如果想防止子类（如窗口）被修改样式，可以设置相关属性，如setAttribute(Qt::WA_StyledBackground);类选择器也通过控件类型来匹配控件，但不同的是不包含子类。语法是在类前面加了个点（.）。如：.QWidget { background-color: yellow; }这些选择器使得开发者能够精确地定位到需要修改样式的UI元素，并为其设置相应的样式规则。通过QSS选择器，开发者可以轻松地修改Qt应用程序的外观，使其更符合用户需求或应用程序的设计风格。
总结来说，QT中的选择器是用于选择和定制Qt应用程序中UI元素样式的工具，它们提供了多种选择机制，如通配符选择器和类型选择器，以便开发者能够精确地应用样式规则。
ID 选择器 #pushButton_2 选择 objectName 为 pushButton_2 的控件.
了解这三种常用的即可。

子控件选择器

对于一些组件，他是有一些子控件组合而成的，比如说下拉框，微调框，旋钮，进度条等等，这些组件都会有自己的字控件，我们也可以通过搜索QT style sheet reference查阅官方文档，最上方的章节中最后一个章节就代表了哪些是哪些的子控件。
在这里插入图片描述

    ui->comboBox->addItem("早上好");
    ui->comboBox->addItem("下午好");
    ui->comboBox->addItem("晚上好");
    //改变下拉图形
    ui->comboBox->setStyleSheet("QComboBox::down-arrow{ image:url(:/down.png);}");