I. Introduction
For current front-end developers, FlatUI is definitely no stranger. In recent years, flat design has become more and more popular. Probably because the resolution of PC and mobile devices is getting higher and higher, flat design looks more attractive. People are happy, and the textured colors produced through gradient colors are not as friendly as flat ones.
Flat UI is a flat front-end framework based on Bootstrap for secondary development. It provides dynamic and fashionable style and color matching, simple and dazzling functional components, and also provides smoother js interactive animation, which can be called One of the outstanding representatives of the front-end flat design framework.
Since it is an excellent representative of the flat design framework, of course it needs to be applied in my own projects. I first used VB development, then switched to C# development, and finally switched to Qt development, all because of the needs of the company's projects, and I continued to learn new ones as needed. Programming frameworks and languages are all connected. Apply one example to other cases. The vista clock control and vista calendar control previously written in C# were transferred to the corresponding controls written in Qt with a few changes. It is very convenient. As long as you master the idea and become proficient in a language After learning the framework, I can learn other things very quickly.
The qss mechanism in Qt is very similar to css. It feels like it was born out of css. Using qss to implement the Qt interface style is not generally convenient, but quite refreshing. After seeing the exquisite flat design style such as FlatUI, it is difficult to To suppress my itchy hands, I want to use qss to achieve a similar style.
Open source address: https://gitee.com/feiyangqingyun/QWidgetDemo https://github.com/feiyangqingyun/QWidgetDemo
2. Functions implemented
- 1:Button style setting
- 2: Text box style setting
- 3: Progress bar style
- 4: Slider bar style
- 5: Radio button style
- 6:Scroll bar style
- 7: You can freely set the height, width, etc. of the object
- 8: Comes with default parameter values
3. Effect drawing
As a benefit for this article, you can receive a Qt development learning package and technical videos for free, including (C++ language basics, introduction to Qt programming, QT signal and slot mechanism, QT interface development-image drawing, QT network, QT database programming, QT project practice , QT embedded development, Quick module, etc.) ↓↓↓↓↓↓See below↓↓Click at the bottom of the article to receive the fee↓↓
4. Header file code
#ifndef FLATUI_H
#define FLATUI_H
/**
* FlatUI辅助类 作者:feiyangqingyun(QQ:517216493) 2016-12-16
* 1:按钮样式设置
* 2:文本框样式设置
* 3:进度条样式
* 4:滑块条样式
* 5:单选框样式
* 6:滚动条样式
* 7:可自由设置对象的高度宽度大小等
* 8:自带默认参数值
*/
#include <QObject>
class QPushButton;
class QLineEdit;
class QProgressBar;
class QSlider;
class QRadioButton;
class QCheckBox;
class QScrollBar;
#ifdef quc
#if (QT_VERSION < QT_VERSION_CHECK(5,7,0))
#include <QtDesigner/QDesignerExportWidget>
#else
#include <QtUiPlugin/QDesignerExportWidget>
#endif
class QDESIGNER_WIDGET_EXPORT FlatUI : public QObject
#else
class FlatUI : public QObject
#endif
{
Q_OBJECT
public:
static FlatUI *Instance();
explicit FlatUI(QObject *parent = 0);
private:
static QScopedPointer<FlatUI> self;
public:
//设置按钮样式
static QString setPushButtonQss(QPushButton *btn, //按钮对象
int radius = 5, //圆角半径
int padding = 8, //间距
const QString &normalColor = "#34495E", //正常颜色
const QString &normalTextColor = "#FFFFFF", //文字颜色
const QString &hoverColor = "#4E6D8C", //悬停颜色
const QString &hoverTextColor = "#F0F0F0", //悬停文字颜色
const QString &pressedColor = "#2D3E50", //按下颜色
const QString &pressedTextColor = "#B8C6D1"); //按下文字颜色
//设置文本框样式
static QString setLineEditQss(QLineEdit *txt, //文本框对象
int radius = 3, //圆角半径
int borderWidth = 2, //边框大小
const QString &normalColor = "#DCE4EC", //正常颜色
const QString &focusColor = "#34495E"); //选中颜色
//设置进度条样式
static QString setProgressQss(QProgressBar *bar,
int barHeight = 8, //进度条高度
int barRadius = 5, //进度条半径
int fontSize = 9, //文字字号
const QString &normalColor = "#E8EDF2", //正常颜色
const QString &chunkColor = "#E74C3C"); //进度颜色
//设置滑块条样式
static QString setSliderQss(QSlider *slider, //滑动条对象
int sliderHeight = 8, //滑动条高度
const QString &normalColor = "#E8EDF2", //正常颜色
const QString &grooveColor = "#1ABC9C", //滑块颜色
const QString &handleBorderColor = "#1ABC9C", //指示器边框颜色
const QString &handleColor = "#FFFFFF"); //指示器颜色
//设置单选框样式
static QString setRadioButtonQss(QRadioButton *rbtn, //单选框对象
int indicatorRadius = 8, //指示器圆角角度
const QString &normalColor = "#D7DBDE", //正常颜色
const QString &checkColor = "#34495E"); //选中颜色
//设置滚动条样式
static QString setScrollBarQss(QWidget *scroll, //滚动条对象
int radius = 6, //圆角角度
int min = 120, //指示器最小长度
int max = 12, //滚动条最大长度
const QString &bgColor = "#606060", //背景色
const QString &handleNormalColor = "#34495E", //指示器正常颜色
const QString &handleHoverColor = "#1ABC9C", //指示器悬停颜色
const QString &handlePressedColor = "#E74C3C"); //指示器按下颜色
};
#endif // FLATUI_H
5. Core code
#pragma execution_character_set("utf-8")
#include "flatui.h"
#include "qmutex.h"
#include "qpushbutton.h"
#include "qlineedit.h"
#include "qprogressbar.h"
#include "qslider.h"
#include "qradiobutton.h"
#include "qcheckbox.h"
#include "qscrollbar.h"
#include "qdebug.h"
QScopedPointer<FlatUI> FlatUI::self;
FlatUI *FlatUI::Instance()
{
if (self.isNull()) {
static QMutex mutex;
QMutexLocker locker(&mutex);
if (self.isNull()) {
self.reset(new FlatUI);
}
}
return self.data();
}
FlatUI::FlatUI(QObject *parent) : QObject(parent)
{
}
QString FlatUI::setPushButtonQss(QPushButton *btn, int radius, int padding,
const QString &normalColor,
const QString &normalTextColor,
const QString &hoverColor,
const QString &hoverTextColor,
const QString &pressedColor,
const QString &pressedTextColor)
{
QStringList list;
list.append(QString("QPushButton{border-style:none;padding:%1px;border-radius:%2px;color:%3;background:%4;}")
.arg(padding).arg(radius).arg(normalTextColor).arg(normalColor));
list.append(QString("QPushButton:hover{color:%1;background:%2;}")
.arg(hoverTextColor).arg(hoverColor));
list.append(QString("QPushButton:pressed{color:%1;background:%2;}")
.arg(pressedTextColor).arg(pressedColor));
QString qss = list.join("");
btn->setStyleSheet(qss);
return qss;
}
QString FlatUI::setLineEditQss(QLineEdit *txt, int radius, int borderWidth,
const QString &normalColor,
const QString &focusColor)
{
QStringList list;
list.append(QString("QLineEdit{border-style:none;padding:3px;border-radius:%1px;border:%2px solid %3;}")
.arg(radius).arg(borderWidth).arg(normalColor));
list.append(QString("QLineEdit:focus{border:%1px solid %2;}")
.arg(borderWidth).arg(focusColor));
QString qss = list.join("");
txt->setStyleSheet(qss);
return qss;
}
QString FlatUI::setProgressQss(QProgressBar *bar, int barHeight,
int barRadius, int fontSize,
const QString &normalColor,
const QString &chunkColor)
{
QStringList list;
list.append(QString("QProgressBar{font:%1pt;background:%2;max-height:%3px;border-radius:%4px;text-align:center;border:1px solid %2;}")
.arg(fontSize).arg(normalColor).arg(barHeight).arg(barRadius));
list.append(QString("QProgressBar:chunk{border-radius:%2px;background-color:%1;}")
.arg(chunkColor).arg(barRadius));
QString qss = list.join("");
bar->setStyleSheet(qss);
return qss;
}
QString FlatUI::setSliderQss(QSlider *slider, int sliderHeight,
const QString &normalColor,
const QString &grooveColor,
const QString &handleBorderColor,
const QString &handleColor)
{
int sliderRadius = sliderHeight / 2;
int handleWidth = (sliderHeight * 3) / 2 + (sliderHeight / 5);
int handleRadius = handleWidth / 2;
int handleOffset = handleRadius / 2;
QStringList list;
list.append(QString("QSlider::horizontal{min-height:%1px;}").arg(sliderHeight * 2));
list.append(QString("QSlider::groove:horizontal{background:%1;height:%2px;border-radius:%3px;}")
.arg(normalColor).arg(sliderHeight).arg(sliderRadius));
list.append(QString("QSlider::add-page:horizontal{background:%1;height:%2px;border-radius:%3px;}")
.arg(normalColor).arg(sliderHeight).arg(sliderRadius));
list.append(QString("QSlider::sub-page:horizontal{background:%1;height:%2px;border-radius:%3px;}")
.arg(grooveColor).arg(sliderHeight).arg(sliderRadius));
list.append(QString("QSlider::handle:horizontal{width:%3px;margin-top:-%4px;margin-bottom:-%4px;border-radius:%5px;"
"background:qradialgradient(spread:pad,cx:0.5,cy:0.5,radius:0.5,fx:0.5,fy:0.5,stop:0.6 %1,stop:0.8 %2);}")
.arg(handleColor).arg(handleBorderColor).arg(handleWidth).arg(handleOffset).arg(handleRadius));
//偏移一个像素
handleWidth = handleWidth + 1;
list.append(QString("QSlider::vertical{min-width:%1px;}").arg(sliderHeight * 2));
list.append(QString("QSlider::groove:vertical{background:%1;width:%2px;border-radius:%3px;}")
.arg(normalColor).arg(sliderHeight).arg(sliderRadius));
list.append(QString("QSlider::add-page:vertical{background:%1;width:%2px;border-radius:%3px;}")
.arg(grooveColor).arg(sliderHeight).arg(sliderRadius));
list.append(QString("QSlider::sub-page:vertical{background:%1;width:%2px;border-radius:%3px;}")
.arg(normalColor).arg(sliderHeight).arg(sliderRadius));
list.append(QString("QSlider::handle:vertical{height:%3px;margin-left:-%4px;margin-right:-%4px;border-radius:%5px;"
"background:qradialgradient(spread:pad,cx:0.5,cy:0.5,radius:0.5,fx:0.5,fy:0.5,stop:0.6 %1,stop:0.8 %2);}")
.arg(handleColor).arg(handleBorderColor).arg(handleWidth).arg(handleOffset).arg(handleRadius));
QString qss = list.join("");
slider->setStyleSheet(qss);
return qss;
}
QString FlatUI::setRadioButtonQss(QRadioButton *rbtn, int indicatorRadius,
const QString &normalColor,
const QString &checkColor)
{
int indicatorWidth = indicatorRadius * 2;
QStringList list;
list.append(QString("QRadioButton::indicator{border-radius:%1px;width:%2px;height:%2px;}")
.arg(indicatorRadius).arg(indicatorWidth));
list.append(QString("QRadioButton::indicator::unchecked{background:qradialgradient(spread:pad,cx:0.5,cy:0.5,radius:0.5,fx:0.5,fy:0.5,"
"stop:0.6 #FFFFFF,stop:0.7 %1);}").arg(normalColor));
list.append(QString("QRadioButton::indicator::checked{background:qradialgradient(spread:pad,cx:0.5,cy:0.5,radius:0.5,fx:0.5,fy:0.5,"
"stop:0 %1,stop:0.3 %1,stop:0.4 #FFFFFF,stop:0.6 #FFFFFF,stop:0.7 %1);}").arg(checkColor));
QString qss = list.join("");
rbtn->setStyleSheet(qss);
return qss;
}
QString FlatUI::setScrollBarQss(QWidget *scroll, int radius, int min, int max,
const QString &bgColor,
const QString &handleNormalColor,
const QString &handleHoverColor,
const QString &handlePressedColor)
{
//滚动条离背景间隔
int padding = 0;
QStringList list;
//handle:指示器,滚动条拉动部分 add-page:滚动条拉动时增加的部分 sub-page:滚动条拉动时减少的部分 add-line:递增按钮 sub-line:递减按钮
//横向滚动条部分
list.append(QString("QScrollBar:horizontal{background:%1;padding:%2px;border-radius:%3px;min-height:%4px;max-height:%4px;}")
.arg(bgColor).arg(padding).arg(radius).arg(max));
list.append(QString("QScrollBar::handle:horizontal{background:%1;min-width:%2px;border-radius:%3px;}")
.arg(handleNormalColor).arg(min).arg(radius));
list.append(QString("QScrollBar::handle:horizontal:hover{background:%1;}")
.arg(handleHoverColor));
list.append(QString("QScrollBar::handle:horizontal:pressed{background:%1;}")
.arg(handlePressedColor));
list.append(QString("QScrollBar::add-page:horizontal{background:none;}"));
list.append(QString("QScrollBar::sub-page:horizontal{background:none;}"));
list.append(QString("QScrollBar::add-line:horizontal{background:none;}"));
list.append(QString("QScrollBar::sub-line:horizontal{background:none;}"));
//纵向滚动条部分
list.append(QString("QScrollBar:vertical{background:%1;padding:%2px;border-radius:%3px;min-width:%4px;max-width:%4px;}")
.arg(bgColor).arg(padding).arg(radius).arg(max));
list.append(QString("QScrollBar::handle:vertical{background:%1;min-height:%2px;border-radius:%3px;}")
.arg(handleNormalColor).arg(min).arg(radius));
list.append(QString("QScrollBar::handle:vertical:hover{background:%1;}")
.arg(handleHoverColor));
list.append(QString("QScrollBar::handle:vertical:pressed{background:%1;}")
.arg(handlePressedColor));
list.append(QString("QScrollBar::add-page:vertical{background:none;}"));
list.append(QString("QScrollBar::sub-page:vertical{background:none;}"));
list.append(QString("QScrollBar::add-line:vertical{background:none;}"));
list.append(QString("QScrollBar::sub-line:vertical{background:none;}"));
QString qss = list.join("");
scroll->setStyleSheet(qss);
return qss;
}
6. Control introduction
- More than 160 exquisite controls, covering various dashboards, progress bars, progress balls, compasses, curves, rulers, thermometers, navigation bars, navigation bars, flatui, highlight buttons, sliding selectors, lunar calendar, etc. Far exceeds the number of controls integrated by qwt.
- Each class can be independently formed into a separate control, with zero coupling. Each control has a header file and an implementation file, and does not rely on other files. It is convenient for a single control to be integrated into the project in the form of source code, with less code. The control classes of qwt are interlocking and highly coupled. If you want to use one of the controls, you must include all the code.
- All written in pure Qt, drawn by QWidget+QPainter, supports any Qt version from Qt4.6 to Qt5.13, supports compilers such as mingw, msvc, gcc, etc., and supports any operating system such as windows+linux+mac+embedded linux, etc., without garbled code , can be directly integrated into Qt Creator and used like the built-in controls. Most effects only need to set a few properties, which is extremely convenient.
- Each control has a corresponding separate DEMO containing the source code of the control for easy reference and use. It also provides an integrated DEMO used by all controls.
- The source code of each control has detailed Chinese comments and is written in accordance with unified design specifications, making it easy to learn how to write custom controls.
- The default color matching of each control and the color matching corresponding to the demo are very exquisite.
- More than 130 visible controls and 6 invisible controls.
- Some controls provide multiple style choices and multiple indicator style choices.
- All controls adapt to form stretch changes.
- Integrated custom control attribute designer, supports drag and drop design, WYSIWYG, supports import and export of xml format.
- Comes with activex control demo, all controls can be run directly in the IE browser.
- Integrate fontawesome graphic fonts + hundreds of graphic fonts collected by Alibaba iconfont, and enjoy the fun brought by graphic fonts.
- All controls finally generate a dynamic library file (dll or so, etc.), which can be directly integrated into qtcreator for drag and drop design.
- There is already a qml version, and a pyqt version will be considered later if there is great demand from users.
- The custom control plug-in is open to dynamic library use (free forever), without any backdoors or restrictions, so please feel free to use it.
- Currently, 32 versions of dll have been provided, among which the version qt_5_7_0_mingw530_32 will always be guaranteed to be the latest and complete.
- Controls are added and improved from time to time, and the SDK is updated from time to time. Suggestions are welcome, thank you!
- For introductory Qt books, we recommend Huo Yafei's "Quick Start with Qt Creator" and "Introduction to Qt5 Programming". For advanced Qt books, we recommend the official "C++ GUI Qt4 Programming".
- I highly recommend the series of self-cultivation and planning books for programmers, "The Big Talk Programmer", "Programmer's Growth Course", and "The Worry-Relieving Programmer", which will benefit you a lot and will last a lifetime!
- SDK address: https://gitee.com/feiyangqingyun/QUCSDK https://github.com/feiyangqingyun/qucsdk
Original link: https://www.cnblogs.com/feiyangqingyun/p/11675298.html
As a benefit for this article, you can receive a Qt development learning package and technical videos for free, including (C++ language basics, introduction to Qt programming, QT signal and slot mechanism, QT interface development-image drawing, QT network, QT database programming, QT project practice , QT embedded development, Quick module, etc.) ↓↓↓↓↓↓See below↓↓Click at the bottom of the article to receive the fee↓↓