I. Introducción
Para los desarrolladores front-end actuales, FlatUI definitivamente no es extraño. En los últimos años, el diseño plano se ha vuelto cada vez más popular. Probablemente porque la resolución de la PC y los dispositivos móviles es cada vez mayor, el diseño plano parece más atractivo. La gente está contenta Y los colores texturizados producidos mediante colores degradados no son tan amigables como los planos.
Flat UI es un marco de interfaz de usuario plano basado en Bootstrap para desarrollo secundario, que proporciona estilos y combinaciones de colores dinámicos y modernos, componentes funcionales simples y deslumbrantes, y también proporciona animaciones interactivas js más fluidas, que se pueden llamar Uno de los representantes destacados de el marco de diseño plano frontal.
Dado que es un excelente representante del marco de diseño plano, por supuesto que debe aplicarse en mis propios proyectos. Primero usé el desarrollo VB, luego cambié al desarrollo C# y finalmente cambié al desarrollo Qt, todo debido a las necesidades del proyectos de la empresa, y seguí aprendiendo nuevos según fuera necesario. Los marcos y lenguajes de programación están todos conectados. Aplique un ejemplo a otros casos. El control de reloj de Vista y el control de calendario de Vista previamente escritos en C# se transfirieron a los controles correspondientes escritos en Qt con algunos cambios. Es muy conveniente. Siempre que domines la idea y domines un idioma. Después de aprender el marco, puedo aprender otras cosas muy rápidamente.
El mecanismo qss en Qt es muy similar a css. Se siente como si hubiera nacido de css. Usar qss para implementar el estilo de interfaz Qt generalmente no es conveniente, pero sí bastante refrescante. Después de ver el exquisito estilo de diseño plano como FlatUI, es difícil Para suprimir la picazón en las manos, quiero usar qss para lograr un estilo similar.
Dirección de código abierto: https://gitee.com/feiyangqingyun/QWidgetDemo https://github.com/feiyangqingyun/QWidgetDemo
2. Funciones implementadas
- 1: configuración de estilo de botón
- 2: configuración de estilo de cuadro de texto
- 3: estilo de barra de progreso
- 4: estilo de barra deslizante
- 5: estilo del botón de radio
- 6: estilo de barra de desplazamiento
- 7: Puedes establecer libremente la altura, el ancho, etc. del objeto.
- 8: Viene con valores de parámetros predeterminados
3. Dibujo de efectos
Como beneficio de este artículo, puede recibir un paquete de aprendizaje de desarrollo de Qt y videos técnicos de forma gratuita, que incluyen (conceptos básicos del lenguaje C++, introducción a la programación de Qt, mecanismo de ranura y señal de QT, dibujo de imágenes de desarrollo de interfaz de QT, red de QT, base de datos de QT). programación, práctica de proyectos QT , para recibir la tarifa↓↓
4. Código del archivo de encabezado
#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. Código central
#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. Introducción al control
- Más de 160 controles exquisitos, que cubren varios paneles, barras de progreso, bolas de progreso, brújulas, curvas, reglas, termómetros, barras de navegación, barras de navegación, flatui, botones resaltados, selectores deslizantes, calendario lunar, etc. Supera con creces el número de controles integrados por qwt.
- Cada clase se puede formar de forma independiente en un control separado, con acoplamiento cero. Cada control tiene un archivo de encabezado y un archivo de implementación, y no depende de otros archivos. Es conveniente que un solo control se integre en el proyecto en la forma de código fuente, con menos código. Las clases de control de qwt están entrelazadas y altamente acopladas. Si desea utilizar uno de los controles, debe incluir todo el código.
- Todo escrito en Qt puro, dibujado por QWidget+QPainter, admite cualquier versión de Qt desde Qt4.6 a Qt5.13, admite compiladores como mingw, msvc, gcc, etc., y admite cualquier sistema operativo como windows+linux+mac. + Linux incorporado, etc., sin código confuso, se puede integrar directamente en Qt Creator y usarse como los controles integrados. La mayoría de los efectos solo necesitan configurar algunas propiedades, lo cual es extremadamente conveniente.
- Cada control tiene una DEMO independiente correspondiente que contiene el código fuente del control para una fácil referencia y uso. También proporciona una DEMO integrada utilizada por todos los controles.
- El código fuente de cada control tiene comentarios chinos detallados y está escrito de acuerdo con especificaciones de diseño unificadas, lo que facilita aprender a escribir controles personalizados.
- La combinación de colores predeterminada de cada control y la combinación de colores correspondiente a la demostración son muy exquisitas.
- Más de 130 controles visibles y 6 controles invisibles.
- Algunos controles ofrecen múltiples opciones de estilo y múltiples opciones de estilo de indicador.
- Todos los controles se adaptan para formar cambios de estiramiento.
- Diseñador de atributos de control personalizado integrado, admite diseño de arrastrar y soltar, WYSIWYG, admite importación y exportación de formato xml.
- Viene con una demostración de control ActiveX, todos los controles se pueden ejecutar directamente en el navegador IE.
- Integre fuentes gráficas fontawesome + cientos de fuentes gráficas recopiladas por Alibaba iconfont y disfrute de la diversión que brindan las fuentes gráficas.
- Todos los controles finalmente generan un archivo de biblioteca dinámica (dll o algo así, etc.), que se puede integrar directamente en qtcreator para el diseño de arrastrar y soltar.
- Ya existe una versión qml y más adelante se considerará una versión pyqt si hay una gran demanda por parte de los usuarios.
- El complemento de control personalizado está abierto al uso de la biblioteca dinámica (gratuito para siempre), sin puertas traseras ni restricciones, así que no dude en utilizarlo.
- Actualmente, se han proporcionado 32 versiones de dll, entre las cuales siempre se garantizará que la versión qt_5_7_0_mingw530_32 será la más reciente y completa.
- Los controles se agregan y mejoran de vez en cuando, y el SDK se actualiza de vez en cuando. Las sugerencias son bienvenidas, ¡gracias!
- Para libros introductorios de Qt, recomendamos "Inicio rápido con Qt Creator" e "Introducción a la programación Qt5" de Huo Yafei. Para libros avanzados de Qt, recomendamos la "Programación Qt4 GUI C ++ oficial".
- Recomiendo encarecidamente la serie de libros de planificación y autocultivo para programadores, "The Big Talk Programmer", "Programmer's Growth Course" y "The Worry-Relieving Programmer", que le beneficiarán mucho y le durarán toda la vida.
- Dirección del SDK: https://gitee.com/feiyangqingyun/QUCSDK https://github.com/feiyangqingyun/qucsdk
Enlace original: https://www.cnblogs.com/feiyangqingyun/p/11675298.html
Como beneficio de este artículo, puede recibir un paquete de aprendizaje de desarrollo de Qt y videos técnicos de forma gratuita, que incluyen (conceptos básicos del lenguaje C++, introducción a la programación de Qt, mecanismo de ranura y señal de QT, dibujo de imágenes de desarrollo de interfaz de QT, red de QT, base de datos de QT). programación, práctica de proyectos QT , para recibir la tarifa↓↓