南昌网站开发培训中心电子商务网站开发流程

一、加载图片资源

右键项目->选择"Add New…“之后，会弹出如下界面：

选择Qt->Qt Resource File即可。

点击下一步

点击上图中的LoadImageDemo.qrc文件，右边会显示如下界面：

点击"Add Prefix”->添加前缀

生成前缀之后；再点击“Add Files”；就可以把本地资源文件加载到项目中了。

加载图片

#ifndef MAINWINDOW_H
#define MAINWINDOW_H#include <QWidget>
#include <QLabel>class MainWindow : public QWidget
{Q_OBJECTpublic:MainWindow(QWidget *parent = nullptr) : QWidget(parent) {this->setFixedSize(800, 600);m_pImageLabel = new QLabel(this);m_pImageLabel->setFixedSize(200, 200);//m_pImageLabel->setStyleSheet("QLabel { background-image: url(:/MultiTexture/BrushStroke_Coloured_Variant_A.png); }");QPixmap pixmap(":/MultiTexture/BrushStroke_Coloured_Variant_A.png");m_pImageLabel->setPixmap(pixmap);m_pImageLabel->setScaledContents(true); // 可选，图片自动缩放到label大小}private:QLabel *m_pImageLabel;
};
#endif // MAINWINDOW_H

输出结果：

二、QSS的使用介绍

  QSS（Quick Style Sheet）是一种用于定义Qt应用程序样式的机制。Qt是一个跨平台的C++应用程序开发框架，而QSS则允许开发者使用类似于CSS（层叠样式表）的语法来定义Qt应用程序的外观和风格。

2. 1 QSS的基本语法
QSS的语法类似于CSS，通过设置属性和值的方式定义样式。例如：

QPushButton {background-color: lightblue;border: 2px solid darkblue;color: white;
}

这个例子定义了一个QPushButton（按钮）的样式，设置了背景颜色、边框和文本颜色。

2.2 样式选择器
与CSS类似，QSS也支持不同的选择器，可以根据控件的类型、名称、状态等来选择应用样式。

• QLabel：选择所有标签控件。
• QPushButton#myButton：选择具有id为“myButton”的QPushButton。
• QLineEdit:focus：选择获得焦点的QLineEdit。

2.3 QSS的应用
在资源文件中设置：将QSS样式文件添加到Qt资源文件（.qrc）中，然后通过资源路径加载。
在代码中设置：

QApplication a(argc, argv);
QFile styleFile(":/stylesheets/style.qss");
styleFile.open(QFile::ReadOnly);
QString style = QLatin1String(styleFile.readAll());
a.setStyleSheet(style);

三、QSS的应用步骤与示例

3.1 QSS资源文件添加步骤
“右键项目” ---- “Add New…”, 选择 “Qt” ---- 再选择"Qt Resource File"

点击按钮"Choose…"后

添加前缀：

点击完成后，可以看到添加的资源文件如下图所示

将QSS文件加入资源中

3.2 QSS资源文件的使用
qss_style样式表内容：

/* 第一种 QPushButton - 蓝色风格按钮 */
QPushButton#btnBlue {color: white;background-color: #3498db;border: 2px solid #2980b9;border-radius: 6px;padding: 6px 12px;font-size: 16px;
}QPushButton#btnBlue:hover {background-color: #5dade2;
}QPushButton#btnBlue:pressed {background-color: #2e86c1;
}/* 第二种 QPushButton - 红色警告按钮 */
QPushButton#btnRed {color: white;background-color: #e74c3c;border: 2px solid #c0392b;border-radius: 6px;padding: 6px 12px;font-size: 16px;
}QPushButton#btnRed:hover {background-color: #ec7063;
}QPushButton#btnRed:pressed {background-color: #cb4335;
}/* 第一种 QLabel - 标题标签 */
QLabel#labelTitle {background-image: url(:/MultiTexture/BrushStroke_Coloured_Variant_A.png);
}/* 第二种 QLabel - 小提示标签 */
QLabel#labelTip {background-image: url(:/MultiTexture/BrushStroke_Coloured_Variant_H.png);
}

加载 .qss 文件，比如在 main.cpp 里加：

#include "main_window.h"#include <QApplication>
#include <QFile>int main(int argc, char *argv[])
{QApplication a(argc, argv);QFile file(":/res/qss_style.qss"); // 假设放在资源文件中if (file.open(QFile::ReadOnly)) {QString styleSheet = QLatin1String(file.readAll());a.setStyleSheet(styleSheet);}MainWindow w;w.show();return a.exec();
}

如何使用QSS：

#ifndef MAINWINDOW_H
#define MAINWINDOW_H#include <QWidget>
#include <QPushButton>
#include <QLabel>
#include <QHBoxLayout>class MainWindow : public QWidget
{Q_OBJECTpublic:MainWindow(QWidget *parent = nullptr) : QWidget(parent) {this->setFixedSize(800, 600);// 蓝色按钮QPushButton *btnBlue = new QPushButton("确认", this);btnBlue->setObjectName("btnBlue");// 红色按钮QPushButton *btnRed = new QPushButton("删除", this);btnRed->setObjectName("btnRed");// 标题标签QLabel *labelTitle = new QLabel(this);labelTitle->setObjectName("labelTitle");// 提示标签QLabel *labelTip = new QLabel(this);labelTip->setObjectName("labelTip");QHBoxLayout *pHBoxLayout = new QHBoxLayout(this);pHBoxLayout->addWidget(btnBlue);pHBoxLayout->addWidget(btnRed);pHBoxLayout->addWidget(labelTitle);pHBoxLayout->addWidget(labelTip);}~MainWindow() {}
};
#endif // MAINWINDOW_H

输出结果：