「QT」QSS样式表 之 QGraphicsView图形视图类

✨博客主页
何曾参静谧的博客（✅关注、点赞、⭐收藏、转发）
全部专栏（专栏会有变化，以最新发布为准）
「Win」Windows程序设计	「IDE」集成开发环境	「定制」定制开发集合
「C/C++」C/C++程序设计	「DSA」数据结构与算法	「UG/NX」NX二次开发
「QT」QT5程序设计	「File」数据文件格式	「UG/NX」BlockUI集合
「Py」Python程序设计	「Math」探秘数学世界	「PK」Parasolid函数说明
「Web」前后端全栈开发	「En」英语从零到一	占位符
「AI」人工智能大模型

C++ Qt5中关于QGraphicsView的QSS样式表详解

引言

在C++ Qt5框架中，QGraphicsView是一个强大的控件，用于显示QGraphicsScene中的内容，这些内容可以是图形项（QGraphicsItem）、文本、图片等。尽管QGraphicsView本身主要用于视图呈现，并不直接涉及界面元素的样式定义（因为其核心功能是场景-视图架构），但QSS（Qt Style Sheets）仍然可以用于定制QGraphicsView的一些间接元素，比如滚动条、边框等。本文将深入探讨如何在C++ Qt5中为与QGraphicsView相关的界面元素应用QSS样式表。

一、QGraphicsView的基本使用

QGraphicsView是一个视图控件，它提供了一个窗口来查看和操作QGraphicsScene。QGraphicsScene是图形项的容器，可以包含各种图形元素，如矩形、椭圆、文本、图片、自定义图形项等。以下是一个简单的QGraphicsView使用示例：

#include 
#include 
#include 
#include 
#include 
#include 

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    QWidget window;
    QVBoxLayout *layout = new QVBoxLayout(&window);

    QGraphicsScene *scene = new QGraphicsScene(&window);
    QGraphicsRectItem *rectItem = scene->addRect(0, 0, 100, 100, QPen(Qt::black), QBrush(Qt::blue));

    QGraphicsView *view = new QGraphicsView(scene, &window);
    view->setRenderHint(QPainter::Antialiasing);

    layout->addWidget(view);
    window.setLayout(layout);
    window.show();

    return app.exec();
}

在这个例子中，我们创建了一个QGraphicsScene，并在其中添加了一个矩形图形项。然后，我们创建了一个QGraphicsView来显示这个场景。

二、QSS基础回顾

QSS（Qt Style Sheets）是Qt提供的一种用于定制控件外观的机制。它允许开发者通过声明式语法来设置控件的颜色、字体、边距、边框等属性。QSS的语法类似于CSS（层叠样式表），但针对Qt控件进行了优化。

三、QGraphicsView的QSS样式定制

虽然QGraphicsView本身主要用于视图呈现，并不直接接受QSS样式定义，但我们可以为与其相关的界面元素（如滚动条、边框等）应用QSS样式。以下是一些常用的与QGraphicsView相关的QSS样式属性及其效果：

1. 滚动条样式：
   QGraphicsView通常包含滚动条，用于在内容超出视图大小时进行滚动。我们可以使用QSS来自定义这些滚动条的外观。

   QScrollBar:vertical {
       border: 1px solid grey;
       background: #32CC99;
       width: 10px;
       margin: 22px 0 22px 0;
   }
   QScrollBar::handle:vertical {
       background: #FFFFFF;
       min-height: 20px;
   }
   QScrollBar::add-line:vertical {
       border: 1px solid grey;
       background: #32CC99;
       height: 0px;
       subcontrol-position: bottom;
       subcontrol-origin: margin;
   }
   QScrollBar::sub-line:vertical {
       border: 1px solid grey;
       background: #32CC99;
       height: 0px;
       subcontrol-position: top;
       subcontrol-origin: margin;
   }
   QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
       background: none;
   }
   

   上面的QSS代码定义了垂直滚动条的边框、背景色、手柄、增加/减少按钮的样式。

2. 边框样式：
   虽然QGraphicsView本身没有直接的边框属性，但我们可以通过为其父容器（如QWidget）设置边框样式来间接影响QGraphicsView的外观。

   QWidget {
       border: 2px solid black;
       border-radius: 10px;
   }
   

   如果QGraphicsView是直接添加到窗口中的，并且我们想要为其设置边框，可以考虑将其包装在一个QWidget中，并为该QWidget应用上述QSS样式。

3. 背景颜色：
   QGraphicsView的背景颜色通常是由其QGraphicsScene中的项来定义的，因为视图本身只是一个窗口，用于显示场景内容。然而，如果我们想要为视图设置一个透明的背景（以便看到场景背后的内容），可以通过设置视图的属性来实现，而不是通过QSS。

   view->setAttribute(Qt::WA_TranslucentBackground);
   

   注意：这种方法会使视图背景透明，但不会影响滚动条或其他界面元素的背景。

四、应用QSS到QGraphicsView相关元素

要将QSS应用到与QGraphicsView相关的界面元素上，有几种方法：

1. 直接设置父容器的样式表：
   如果QGraphicsView是添加到某个QWidget中的，我们可以为该QWidget设置样式表，从而影响其内部所有控件（包括滚动条）的样式。

   QWidget *container = new QWidget(&window);
   QVBoxLayout *layout = new QVBoxLayout(container);
   layout->addWidget(view);
   container->setStyleSheet("/* QSS 代码 */");
   

2. 设置整个应用程序的样式表：
   这将影响应用程序中所有的控件，包括与QGraphicsView相关的滚动条等。

   QApplication::setStyleSheet("/* QSS 代码 */");
   

3. 使用QFile加载外部QSS文件：
   这种方法允许你将QSS代码保存在外部文件中，便于管理和维护。

   QFile file(":/path/to/stylesheet.qss");
   if (file.open(QIODevice::ReadOnly | QIODevice::Text)) {
       QString styleSheet = QLatin1String(file.readAll());
       QApplication::setStyleSheet(styleSheet); // 或 container->setStyleSheet(styleSheet);
       file.close();
   }
   

五、注意事项与限制

• QSS与QGraphicsView的交互：由于QGraphicsView主要用于视图呈现，并不直接接受QSS样式定义，因此我们需要通过间接方式为与其相关的界面元素应用QSS样式。
• 滚动条样式的限制：虽然QSS允许我们自定义滚动条的许多方面，但某些高级自定义（如滚动条按钮的图标）可能需要额外的代码或资源。
• 性能考虑：复杂的QSS规则可能会影响应用程序的性能。因此，在定义QSS时，应尽量避免不必要的复杂性和冗余。

六、结论

尽管QGraphicsView本身不直接接受QSS样式定义，但我们仍然可以使用QSS来自定义与其相关的界面元素，如滚动条和边框。通过合理地使用QSS，我们可以增强与QGraphicsView相关的界面元素的视觉表现力，从而提升应用程序的整体用户体验。

何曾参静谧的博客（✅关注、点赞、⭐收藏、转发）

---