Qt实现的FlatUI样式

对于现在做前端开发人员来说，FlatUI肯定不陌生，最近几年扁平化的设计越来越流行，大概由于现在PC端和移动端的设备的分辨率越来越高，扁平化反而看起来更让人愉悦，而通过渐变色产生的质感色彩反而没有扁平化来得亲切。 Flat UI是基于Bootstrap之上进行二次开发的扁平化前端框架，他提供了动感、时尚的风格色调搭配，简洁、炫丽的功能组件，同时还提供了更为平滑的js交互动画，可以称得上前端扁平化设计框架的优秀代表之一。 既然是扁平化设计框架的优秀代表，当然需要在自己项目中应用应用，Qt中的qss机制，和css极为相似，感觉就是脱胎于css，用qss来实现Qt界面样式不是一般的方便，而是相当的爽，在看到FlatUI这样的精美的扁平化设计样式后，难以抑制手痒痒，就想用qss实现类似的风格。

#include “frmmain.h“
#include “ui_frmmain.h“
#include “qdebug.h“

frmMain::frmMain（QWidget *parent） :
	QWidget（parent）
	ui（new Ui::frmMain）
{
	ui->setupUi（this）;
	this->initForm（）;
}

frmMain::~frmMain（）
{
	delete ui;
}

void frmMain::initForm（）
{
	ui->bar1->setRange（0 100）;
	ui->bar2->setRange（0 100）;
	ui->slider1->setRange（0 100）;
	ui->slider2->setRange（0 100）;

	connect（ui->slider1 SIGNAL（valueChanged（int）） ui->bar1 SLOT（setValue（int）））;
	connect（ui->slider2 SIGNAL（valueChanged（int）） ui->bar2 SLOT（setValue（int）））;
	ui->slider1->setValue（30）;
	ui->slider2->setValue（30）;

	this->setstyleSheet（“*{outline:0px;}QWidget#frmMain{background:#FFFFFF;}“）;

	setBtnQss（ui->btn1 “#34495E“ “#FFFFFF“ “#4E6D8C“ “#F0F0F0“ “#2D3E50“ “#B8C6D1“）;
	setBtnQss（ui->btn2 “#1ABC9C“ “#E6F8F5“ “#2EE1C1“ “#FFFFFF“ “#16A086“ “#A7EEE6“）;
	setBtnQss（ui->btn3 “#3498DB“ “#FFFFFF“ “#5DACE4“ “#E5FEFF“ “#2483C7“ “#A0DAFB“）;
	setBtnQss（ui->btn4 “#E74C3C“ “#FFFFFF“ “#EC7064“ “#FFF5E7“ “#DC2D1A“ “#F5A996“）;

	setTxtQss（ui->txt1 “#DCE4EC“ “#34495E“）;
	setTxtQss（ui->txt2 “#DCE4EC“ “#1ABC9C“）;
	setTxtQss（ui->txt3 “#DCE4EC“ “#3498DB“）;
	setTxtQss（ui->txt4 “#DCE4EC“ “#E74C3C“）;

	setBarQss（ui->bar1 “#E8EDF2“ “#E74C3C“）;
	setBarQss（ui->bar2 “#E8EDF2“ “#1ABC9C“）;

	setSliderQss（ui->slider1 “#E8EDF2“ “#1ABC9C“ “#1ABC9C“）;
	setSliderQss（ui->slider2 “#E8EDF2“ “#E74C3C“ “#E74C3C“）;
	//setSliderQss（ui->slider1 “#E8EDF2“ “#34495E“ “#1ABC9C“）;
	//setSliderQss（ui->slider2 “#E8EDF2“ “#3498DB“ “#E74C3C“）;
}

void frmMain::setBtnQss（QPushButton *btn
                        QString normalColor QString normalTextColor
                        QString hoverColor QString hoverTextColor
                        QString pressedColor QString pressedTextColor）
{
	QStringList qss;
	qss.append（QString（“QPushButton{border-style:none;padding:10px;border-radius:5px;color:%1;background:%2;}“）.arg（normalTextColor）.arg（normalColor））;
	qss.append（QString（“QPushButton:hover{color:%1;background:%2;}“）.arg（hoverTextColor）.arg（hoverColor））;
	qss.append（QString（“QPushButton:pressed{color:%1;background:%2;}“）.arg（pressedTextColor）.arg（pressedColor））;
	btn->setstyleSheet（qss.join（““））;
}

void frmMain::setTxtQss（QLineEdit *txt QString normalColor QString focusColor）
{
	QStringList qss;
	qss.append（QString（“QLineEdit{border-style:none;padding:6px;border-radius:5px;border:2px solid %1;}“）.arg（normalColor））;
	qss.append（QString（“QLineEdit:focus{border:2px solid %1;}“）.arg（focusColor））;
	txt->setstyleSheet（qss.join（““））;
}

void frmMain::setBarQss（QProgressBar *bar QString normalColor QString chunkColor）
{
    int barHeight = 8;
    int barRadius = 8;

	QStringList qss;
    qss.append（QString（“QProgressBar{font:9pt;height:%2px;background:%1;border-radius:%3px;text-align:center;border:1px solid %1;}“）.arg（normalColor）.arg（barHeight）.arg（barRadius））;
    qss.append（QString（“QProgressBar:c

 属性            大小     日期    时间   名称
----------- ---------  ---------- -----  ----
     目录           0  2016-12-11 15:57  FlatUI\
     文件         600  2016-12-11 12:05  FlatUI\FlatUI.pro
     文件        4100  2016-12-11 15:12  FlatUI\frmmain.cpp
     文件         866  2016-12-11 14:34  FlatUI\frmmain.h
     文件        3044  2016-12-11 15:11  FlatUI\frmmain.ui
     文件         231  2016-12-11 15:11  FlatUI\main.cpp