QT漂亮QSS样式模仿流行VUE Element UI Tabs ，QSS漂亮大方美观样式 QSS样式 QTabWidget漂亮样式QSS 快速开发QSS漂亮界面

weijia3624

已于 2024-06-12 17:04:02 修改

阅读量520

点赞数 9

分类专栏： C++ 文章标签： QT漂亮QSS QT漂亮QTabWidget QT漂亮QSS下载漂亮控件QSS下载 QSS入门 QSS如何学习

于 2024-06-12 14:14:27 首次发布

本文链接：https://blog.csdn.net/weijia3624/article/details/139624469

版权

C++ 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

下载内容----> 完整使用例子下载

随着Web前端技术的飞速发展，Vue Element UI以其优雅的设计风格、丰富的组件库以及高度的定制性，迅速成为开发者构建现代化用户界面的首选之一。尽管Vue Element UI主要服务于Web应用，其设计理念和视觉风格对桌面应用程序的界面设计同样具有启发意义，尤其是在使用Qt框架开发的项目中，通过Qt的样式表（QSS）技术，我们能够借鉴Element UI的美学特点，提升Qt应用的用户界面美观度和用户体验。

#include "widget.h"
#include "ui_widget.h"
#include <QFile>
#include <QDebug>
#include <QPainter>
#include "QGraphicsScene"
#include "QGraphicsView"
#include "QGraphicsLineItem"
#include "QPaintEvent"

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);

    QFile file(":/Tabs.qss");
    file.open(QFile::ReadOnly);
    QString qss=file.readAll();
    file.close();

    applyStyles(this,qss);

    loadTabWidget1(ui->tabWidget->currentIndex());
    loadTabWidget2(ui->tabWidget_2->currentIndex());
}

Widget::~Widget()
{
    delete ui;
}

void Widget::applyStyles(QWidget *widget,QString stylesheet)
{
    widget->setStyleSheet(stylesheet); // 使用上面读取到的stylesheet
    // 遍历所有子控件并递归应用样式
    for (auto child : widget->findChildren<QWidget*>()) {
        applyStyles(child,stylesheet);
    }
}

// 重写paintEvent事件处理函数，用于绘制线段
void Widget::paintEvent(QPaintEvent *)
{
    QPainter painter2(this);
    QColor color2(QString("#e4e7ed"));
    QPen pen2(color2, 2); // 这里的1是线条的宽度
    painter2.setPen(pen2);
    painter2.drawLine(xStart2, y2+2, xEnd2, y2+2); // 长线

    QPainter painter(this);
    QColor color(QString("#409eff"));///409eff
    QPen pen(color, 2); // 这里的1是线条的宽度
    painter.setPen(pen);
    painter.drawLine(xStart, y+2, xEnd, y+2);// 短线


    QPainter painter5(this);
    QColor color5(QString("#e4e7ed"));///e4e7ed
    QPen pen5(color5, 2); // 这里的1是线条的宽度
    painter5.setPen(pen5);
    painter5.drawLine(xStart5, y5+2, xEnd5, y5+2);// 长线

    QPainter painter3(this);
    QColor color3(QString("#ffffff"));
    QPen pen3(color3, 2); // 这里的1是线条的宽度
    painter3.setPen(pen3);
    painter3.drawLine(xStart3, y3+2, xEnd3, y3+2);// 短线

}


void Widget::on_tabWidget_tabBarClicked(int index)
{
    loadTabWidget1(index);
    // 更新窗口，触发paintEvent重新绘制
    update();
}


void Widget::on_tabWidget_2_tabBarClicked(int index)
{
    loadTabWidget2(index);
    // 更新窗口，触发paintEvent重新绘制
    update();
}