資源簡介
對于現在做前端開發人員來說,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
- 上一篇:Qt編寫視頻監控畫面分割界面
- 下一篇:用adb修改手機信息
評論
共有 條評論