基于Qt编写超精美自定义控件

一、前言

无论是哪一门开发结构，假如涉及到UI这块，必定需求用到自定义控件，越复杂功用越多的项目，自定义控件的数量就越多，最开端的时分或许每个自定义控件都针对特定的应用场景，甚至里边带了特定的场景的一些设置和处理，跟着项目数量的增多，有些控件又专门提取出来共性，做成了通用的自定义控件，意味着控件主要做外观处理，用户依据不同的场景需求，设置不同的外观和规矩，就这样搞来搞去搞到现在，已经超越了202个控件，渐渐的积累迭代和更新，历经超越9年的时间不断的完善，尤其是对不同Qt版别、不同编译器、不同操作系统的支撑，其间Qt6改动比较大，许多办法或许类改名或许抛弃了，需求用类似的办法处理，在改完整个自定义控件大全后，特意整理了晋级到Qt6经历大全，放在开源主页上，合并在Qt开发经历中，现在该经历或许是国内Qt开发界最受欢迎的开发经历总结。

二、作用图

三、体会地址

国内站点：gitee.com/feiyangqing…

世界站点：github.com/feiyangqing…

四、功用特点

• 超越202个精巧控件并继续不断迭代更新晋级，品种超多，控件类型极其丰富。
• 涵盖了各种仪表盘、进展条、进展球、指南针、曲线图、标尺、温度计、导航条、导航栏，flatui、高亮按钮、滑动挑选器、阴历、广告轮播、饼状图、环形图、时间轴、拓宽控件、增强控件等。
• 每个类都是独立的一个.h头文件和.cpp实现文件组成，零耦合，不依赖其他文件，便利单个控件独立出来以源码方式集成到项目中，便利直观。
• 控件数量远超其他第三方控件库比方qwt集成的控件数量，运用方法也比其简单友好零耦合。
• 支撑恣意Qt版别，亲测Qt4/5/6的一切版别，悉数纯Qt编写，QWidget+QPainter绘制。
• 支撑恣意编译器，包含但不限于mingw、msvc、gcc、clang等编译器。
• 支撑恣意操作系统，包含但不限于windows、linux、mac、android、uos、银河麒麟、各种国产linux、嵌入式linux、树莓派、香橙派、全志H3等。
• 支撑编译生成规划师插件，可直接集成到QtCreator的控件栏中，和自带的控件一样运用，大部分作用只要设置几个特点即可，极为便利。
• 支撑编译生成独立的非插件方式的动态库文件，体积小，比方嵌入式linux不支撑designer只需求动态库的方式。
• 每个控件都有一个独自的完整的运用demo，便利参考学习单个控件运用，十分合适初学者。
• 供给一个一切控件运用的集成的example，便利快速检查一切控件的作用。
• 支撑直接源码集成到example的方法，便利编译到安卓，for web套件等。
• 支撑编译成wasm文件，直接网页运行，能够在谷歌、火狐、edge等浏览器运行，原生性能。
• 每个控件的源代码都有具体中文注释，都依照一致规划规范编写，便利学习自定义控件的编写。
• 每个控件都内置默认配色，demo对应的配色都十分精巧。
• 部分控件供给多种款式风格挑选，多种指示器款式挑选。
• 一切控件自适应布局和窗体拉伸改变，自动缩放。
• 配套额定的自定义控件特点规划器，类似组态规划器，纯中文特点称号，支撑拖曳规划，所见即所得，支撑导入导出xml格局。
• 集成fontawesome图形字体+阿里巴巴iconfont收藏的几百个图形字体，享受图形字体带来的趣味。
• 一切控件最终生成一个dll动态库文件，能够直接集成到qtcreator中拖曳规划运用。
• 控件源码悉数分门别类存放，pri模块方式集成，供给控件对照表快速查找对应控件和说明。

五、相关代码

#pragma execution_character_set("utf-8")
#include "frmexamplessimple.h"
#include "ui_frmexamplessimple.h"
#include "head.h"
#include "../../demo/gauge/gaugecar/frmgaugecar.h"
#include "../../demo/gauge/gaugecloud/frmgaugecloud.h"
#include "../../demo/gauge/gaugecolor/frmgaugecolor.h"
#include "../../demo/gauge/gaugecompass/frmgaugecompass.h"
#include "../../demo/gauge/gaugecompasspan/frmgaugecompasspan.h"
#include "../../demo/gauge/gaugedial/frmgaugedial.h"
#include "../../demo/gauge/gaugemini/frmgaugemini.h"
#include "../../demo/gauge/gaugepanel/frmgaugepanel.h"
#include "../../demo/gauge/gaugeprogress/frmgaugeprogress.h"
#include "../../demo/gauge/gaugespeed/frmgaugespeed.h"
#include "../../demo/progress/progressbutton/frmprogressbutton.h"
#include "../../demo/progress/progresspercent/frmprogresspercent.h"
#include "../../demo/progress/progressring/frmprogressring.h"
#include "../../demo/progress/progressshadow/frmprogressshadow.h"
#include "../../demo/progress/progresstip/frmprogresstip.h"
#include "../../demo/painter/battery/frmbattery.h"
#include "../../demo/painter/lightbutton/frmlightbutton.h"
#include "../../demo/painter/lunarcalendarwidget/frmlunarcalendarwidget.h"
#include "../../demo/painter/magicpoolfish/frmmagicpoolfish.h"
#include "../../demo/painter/telwidget/frmtelwidget.h"
#include "../../demo/custom/customring/frmcustomring.h"
#include "../../demo/custom/customgraphics/frmcustomgraphics.h"
#include "../../demo/custom/shadowcalendar/frmshadowcalendar.h"
#include "../../demo/custom/spiderchart/frmspiderchart.h"
#include "../../demo/custom/timeaxis/frmtimeaxis.h"
#include "../../demo/custom/customdart/frmcustomdart.h"
#include "../../demo/custom/tasktableview/frmtasktableview.h"
#include "../../demo/ruler/rulerprogress/frmrulerprogress.h"
#include "../../demo/color/colorpanel/frmcolorpanel.h"
#include "../../demo/image/adswidgetx/frmadswidgetx.h"
#include "../../demo/image/imageclock/frmimageclock.h"
#include "../../demo/other/selectwidget/frmselectwidget.h"
#include "../../demo/wave/wavewater/frmwavewater.h"
#include "../../demo/slider/sliderselect/frmsliderselect.h"
#include "../../demo/flight/frmflightall.h"
frmExamplesSimple::frmExamplesSimple(QWidget *parent) : QWidget(parent), ui(new Ui::frmExamplesSimple)
{
    ui->setupUi(this);
    this->initForm();
    this->addItem();
}
frmExamplesSimple::~frmExamplesSimple()
{
    delete ui;
}
void frmExamplesSimple::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    painter.drawTiledPixmap(rect(), bgPix);
}
void frmExamplesSimple::initForm()
{
    bgPix = QPixmap(":/image/bg.png");
    connect(ui->navListView, SIGNAL(pressed(QString, QString)), this, SLOT(pressed(QString, QString)));
    //设置文本边距
    ui->navListView->setChildMargin(28);
    ui->navListView->setFixedWidth(190);
    ui->navListView->setExpendMode(NavListView::ExpendMode_SingleClick);
    ui->navListView->setSeparateColor(QColor(40, 43, 51));
    //设置子节点色彩
    ui->navListView->setChildBgNormalColor(QColor(40, 43, 51));
    ui->navListView->setChildBgSelectedColor(QColor(20, 20, 20));
    ui->navListView->setChildBgHoverColor(QColor(20, 20, 20));
    ui->navListView->setChildTextNormalColor(QColor(180, 180, 180));
    ui->navListView->setChildTextSelectedColor(QColor(250, 250, 250));
    ui->navListView->setChildTextHoverColor(QColor(255, 255, 255));
    //设置父节点色彩
    ui->navListView->setParentBgNormalColor(QColor(57, 61, 73));
    ui->navListView->setParentBgSelectedColor(QColor(78, 83, 102));
    ui->navListView->setParentBgHoverColor(QColor(78, 83, 102));
    ui->navListView->setParentTextNormalColor(QColor(250, 250, 250));
    ui->navListView->setParentTextSelectedColor(QColor(250, 250, 250));
    ui->navListView->setParentTextHoverColor(QColor(250, 250, 250));
}
void frmExamplesSimple::addItem()
{
    ui->stackedWidget->addWidget(new frmGaugeCar);
    ui->stackedWidget->addWidget(new frmGaugeCloud);
    ui->stackedWidget->addWidget(new frmGaugeColor);
    ui->stackedWidget->addWidget(new frmGaugeCompass);
    ui->stackedWidget->addWidget(new frmGaugeCompassPan);
    ui->stackedWidget->addWidget(new frmGaugeDial);
    ui->stackedWidget->addWidget(new frmGaugeMini);
    ui->stackedWidget->addWidget(new frmGaugePanel);
    ui->stackedWidget->addWidget(new frmGaugeProgress);
    ui->stackedWidget->addWidget(new frmGaugeSpeed);
    ui->stackedWidget->addWidget(new frmProgressButton);
    ui->stackedWidget->addWidget(new frmProgressPercent);
    ui->stackedWidget->addWidget(new frmProgressRing);
    ui->stackedWidget->addWidget(new frmProgressShadow);
    ui->stackedWidget->addWidget(new frmProgressTip);
    ui->stackedWidget->addWidget(new frmBattery);
    ui->stackedWidget->addWidget(new frmLightButton);
    ui->stackedWidget->addWidget(new frmLunarCalendarWidget);
    ui->stackedWidget->addWidget(new frmMagicPoolFish);
    ui->stackedWidget->addWidget(new frmTelWidget);
    ui->stackedWidget->addWidget(new frmCustomRing);
    ui->stackedWidget->addWidget(new frmCustomGraphics);
    ui->stackedWidget->addWidget(new frmShadowCalendar);
    ui->stackedWidget->addWidget(new frmSpiderChart);
    ui->stackedWidget->addWidget(new frmTimeAxis);
    ui->stackedWidget->addWidget(new frmCustomDart);
    ui->stackedWidget->addWidget(new frmTaskTableView);
    ui->stackedWidget->addWidget(new frmRulerProgress);
    ui->stackedWidget->addWidget(new frmColorPanel);
    ui->stackedWidget->addWidget(new frmAdsWidgetx);
    ui->stackedWidget->addWidget(new frmImageClock);
    ui->stackedWidget->addWidget(new frmSelectWidget);
    ui->stackedWidget->addWidget(new frmWaveWater);
    ui->stackedWidget->addWidget(new frmSliderSelect);
    ui->stackedWidget->addWidget(new frmFlightAll);
    listName << "汽车仪表盘" << "云台仪表盘" << "多彩仪表盘" << "指南针表盘" << "指南针面板"
             << "旋转仪表盘" << "迷你仪表盘" << "面板仪表盘" << "进展仪表盘" << "速度仪表盘";
    listName << "按钮进展条" << "百分比进展" << "环形进展条" << "光晕进展条" << "提示进展条";
    listName << "电池电量" << "高亮按钮" << "阴历控件" << "游动的鱼" << "手机通讯录";
    listName << "环形图表" << "多边形状" << "光晕日历" << "蜘蛛网图" << "笔直时间轴"
             << "自定义飞镖盘" << "使命战略表格";
    listName << "进展标尺" << "色彩面板" << "图片轮播" << "图片时钟" << "描点跟从"
             << "水波作用" << "范围挑选条" << "飞控套件";
    addItem("精巧控件", listName);
    QString item = listItem.join(",");
    ui->navListView->setItems(item);
    this->setWindowTitle("Qt自定义控件大全 V2023 (QQ: 517216493 WX: feiyangqingyun)");
    ui->navListView->setCurrentRow(0);
}
void frmExamplesSimple::addItem(const QString &parentName, const QStringList &childNames)
{
    //设置节点数据格局: 标题|父节点标题(父节点为空)|是否打开(0打开)|提示信息|左侧图标
    int count = childNames.count();
    listItem << QString("%1||0|%2|").arg(parentName).arg(count);
    for (int i = 0; i < count; ++i) {
        listItem << QString("%1. %2|%3|1||0xf0da").arg(i + 1, 2, 10, QChar('0')).arg(childNames.at(i)).arg(parentName);
    }
}
void frmExamplesSimple::pressed(const QString &childText, const QString &parentText)
{
    //假如带了 . 表示序号,要删去再比较
    QString text = childText;
    if (text.contains(".")) {
        text = text.mid(text.indexOf(".") + 2, text.length());
    }
    int index = listName.indexOf(text);
    if (index >= 0) {
        ui->stackedWidget->setCurrentIndex(index);
    }
}