Qt项目实战之《Qt样式表用法》

开发Qt的应用程序，不可避免会涉及到UI。这里就会考虑是用Qt Widgets还是QML/Qt Quick来开发UI相关。
关于Qt Widgets、QML、Qt Quick 的区别可以参考
Qt Widgets、QML、Qt Quick 的区别 https://blog.csdn.net/liang19890820/article/details/54141552
Qt Widgets 与 QML/Qt Quick的区别，什么时候使用哪种？https://blog.csdn.net/liang841451955/article/details/79785074

上图是QT开发中关于UI编程或配置相关的基本内容，本文着重讲Qt Widget中关于样式表的基本实用和在大型项目中的使用

【一、Qt Widget样式表用法之Qt Designer 中配置UI和qss】

在Qt设计器中可以对控件直接设置样式

【二、Qt Widget样式表用法之代码配置或外部文件管理】

一、 代码配置样式表基本用法

QPushButton *btn = new QPushButton("我叫按钮");
btn->setStyleSheet( QString("QPushButton{color:rgb(255, 0, 0)}      \
                            QPushButton:hover{color:rgb(0, 255, 0)} \
                            QPushButton:pressed{color:rgb(0, 0, 255)}") );
btn->show();

二、 外部文件管理用法

如果在代码中大量使用设置控件样式表的方法，会导致代码很臃肿，在外部文件中管理qss便于管理。
外部文件中用法实际上也是读取文件中样式内容，最后调用setStyleSheet加载样式。
下面以工具栏为例结合代码讲解，下面框选出来的是一个自定义控件（工具栏），现在我们要配置的是工具栏上的三个按钮的样式

1 第一步：窗口类

工具栏窗口封装类UIToolBar

#pragma once
/*********************************************************************
*@file     UIToolBar.h
*@brief    工具栏
*@author   
*@date       
*********************************************************************/
#include <QWidget>

class UIToolBar : public QWidget
{
	Q_OBJECT

public:
	UIToolBar(QWidget *parent = Q_NULLPTR);
	~UIToolBar();

private:
	void initUI();
};

#include "stdafx.h"
#include "UIToolBar.h"

UIToolBar::UIToolBar(QWidget *parent)
	: QWidget(parent)
{
	Utils::_set_wdt_bkcolor(QColor(RGB(56, 50, 48)), this);
	initUI();
}

UIToolBar::~UIToolBar()
{
}

void UIToolBar::initUI()
{
	setFixedHeight(50);
	QHBoxLayout *hblMain = new QHBoxLayout(this);

	// 麦克风
	QPushButton *btnMic = new QPushButton(this);
	btnMic->setObjectName("micButton");
	btnMic->setFixedSize(35, 35);
	btnMic->setToolTip(tr("麦克风"));

	// 扬声器
	QPushButton *btnSpeaker = new QPushButton(this);
	btnSpeaker->setObjectName("speakerButton");
	btnSpeaker->setFixedSize(35, 35);
	btnSpeaker->setToolTip(tr("扬声器"));

	// 设备设置
	QPushButton *btnSettings = new QPushButton(this);
	btnSettings->setObjectName("settingsButton");
	btnSettings->setFixedSize(35, 35);
	btnSettings->setToolTip(tr("设备设置"));

	hblMain->addSpacing(15);
	hblMain->addWidget(btnMic);
	hblMain->addWidget(btnSpeaker);
	hblMain->addWidget(btnSettings);

	hblMain->addStretch();
	hblMain->setContentsMargins(0, 0, 0, 0);
	setLayout(hblMain);
}

2 第二步：外部QSS样式文件配置

上图是我工程中使用的文件，因为工程一般分为很多模块（登录模块、白板模块、主窗口模块等），为了方便管理，我们可以把每个模块的样式配置文件分开（login.qss、whiteboard.qss、livestudio.qss等）。

外部文件管理qss 一般分为三部分(这三部分的文件都需要添加到项目资源文件中.qrc. 后文有说明）

1) qss文件管理文件

下面是livestudio.qss文件中关于工具栏的部分

/*
  UIToolBar 工具栏
*/
/*麦克风*/
UIToolBar QPushButton#micButton
{
    background-color: transparent;
	border-style: none;
	outline: none;
    border-image: url(:/LiveStudio_ToolBar/mic_normal);
}

UIToolBar QPushButton#micButton:hover
{
    border-image: url(:/LiveStudio_ToolBar/mic_hover);
}

UIToolBar QPushButton#micButton:pressed
{
    border-image: url(:/LiveStudio_ToolBar/mic_press);
}

/*扬声器*/
UIToolBar QPushButton#speakerButton
{
    background-color: transparent;
	border-style: none;
	outline: none;
    border-image: url(:/LiveStudio_ToolBar/speaker_normal);
}

UIToolBar QPushButton#speakerButton:hover
{
    border-image: url(:/LiveStudio_ToolBar/speaker_hover);
}

UIToolBar QPushButton#speakerButton:pressed
{
    border-image: url(:/LiveStudio_ToolBar/speaker_press);
}

/*设备设置*/
UIToolBar QPushButton#settingsButton
{
    background-color: transparent;
	border-style: none;
	outline: none;
    border-image: url(:/LiveStudio_ToolBar/settings_normal);
}

UIToolBar QPushButton#settingsButton:hover
{
    border-image: url(:/LiveStudio_ToolBar/settings_hover);
}

UIToolBar QPushButton#settingsButton:pressed
{
    border-image: url(:/LiveStudio_ToolBar/settings_press);
}

3) 各种切图文件

下图是工具栏用到的切图

3 第三步：把外部文件添加到资源文件(.qrc)中

4 第四步：代码中加载外部所有样式

这里实际上就是读取外部样式表文件内容
在入口函数

int main(int argc, char *argv[])
{
    ....
	qApp->setStyleSheet(Utils::_get_qss_content(":/LiveAssistant/Resources/Skins/stylesheet.ini"));
    ....
    return ...
}

QString Utils::_get_qss_content(const QString &_path)
{/// 读取本地qss文件中内容，存储在QString字符串中
	QString _qss = "";
	QSettings* _settings = new QSettings(_path, QSettings::IniFormat);

	int index = 1;
	while (true)
	{
		QString param = "StyleSheet/" + QString::number(index);
		QString style_path = _settings->value(param).toString();
		if (!style_path.isEmpty())
		{
			QFile file(style_path);
			QString qss_content;

			file.open(QIODevice::ReadOnly);
			qss_content = file.readAll();
			_qss += qss_content;

			file.close();
		}
		else
			break;

		index++;
	}

	delete _settings;
	_settings = nullptr;
	return _qss;
}

经过上面步骤就可以正确显示工具栏样式了。

下面是补充部分：
注意，关于样式表中的各种属性设置，比如font、color、border等参数值不明确的（如下图），
可以直接在W3School官网或者百度 css + 关键字

{
  font:italic bold 12px/20px arial,sans-serif;
}
{
  border:5px solid red;
}