一、前言

無論是哪一門開發(fā)框架，如果涉及到UI這塊，肯定需要用到自定義控件，越復(fù)雜功能越多的項(xiàng)目，自定義控件的數(shù)量就越多，最開始的時(shí)候可能每個(gè)自定義控件都針對特定的應(yīng)用場景，甚至里面帶了特定的場景的一些設(shè)置和處理，隨著項(xiàng)目數(shù)量的增多，有些控件又專門提取出來共性，做成了通用的自定義控件，意味著控件主要做外觀處理，用戶根據(jù)不同的場景需要，設(shè)置不同的外觀和規(guī)則，就這樣搞來搞去搞到現(xiàn)在，已經(jīng)超過了202個(gè)控件，慢慢的積累迭代和更新，歷經(jīng)超過9年的時(shí)間不斷的完善，尤其是對不同Qt版本、不同編譯器、不同操作系統(tǒng)的支持，其中Qt6改動比較大，很多方法或者類改名或者廢棄了，需要用類似的方法處理，在改完整個(gè)自定義控件大全后，特意整理了升級到Qt6經(jīng)驗(yàn)大全，放在開源主頁上，合并在Qt開發(fā)經(jīng)驗(yàn)中，目前該經(jīng)驗(yàn)可能是國內(nèi)Qt開發(fā)界最受歡迎的開發(fā)經(jīng)驗(yàn)總結(jié)。

二、效果圖

文章來源地址http://www.zghlxwxcb.cn/news/detail-577279.html

三、體驗(yàn)地址

1. 國內(nèi)站點(diǎn)：https://gitee.com/feiyangqingyun
2. 國際站點(diǎn)：https://github.com/feiyangqingyun
3. 個(gè)人作品：https://blog.csdn.net/feiyangqingyun/article/details/97565652
4. 體驗(yàn)地址：https://pan.baidu.com/s/1ZxG-oyUKe286LPMPxOrO2A 提取碼：o05q 文件名：bin_quc。

四、功能特點(diǎn)

1. 超過202個(gè)精美控件并持續(xù)不斷迭代更新升級，種類超多，控件類型極其豐富。
2. 涵蓋了各種儀表盤、進(jìn)度條、進(jìn)度球、指南針、曲線圖、標(biāo)尺、溫度計(jì)、導(dǎo)航條、導(dǎo)航欄，flatui、高亮按鈕、滑動選擇器、農(nóng)歷、廣告輪播、餅狀圖、環(huán)形圖、時(shí)間軸、拓展控件、增強(qiáng)控件等。
3. 每個(gè)類都是獨(dú)立的一個(gè).h頭文件和.cpp實(shí)現(xiàn)文件組成，零耦合，不依賴其他文件，方便單個(gè)控件獨(dú)立出來以源碼形式集成到項(xiàng)目中，方便直觀。
4. 控件數(shù)量遠(yuǎn)超其他第三方控件庫比如qwt集成的控件數(shù)量，使用方式也比其簡單友好零耦合。
5. 支持任意Qt版本，親測Qt4/5/6的所有版本，全部純Qt編寫，QWidget+QPainter繪制。
6. 支持任意編譯器，包括但不限于mingw、msvc、gcc、clang等編譯器。
7. 支持任意操作系統(tǒng)，包括但不限于windows、linux、mac、android、uos、銀河麒麟、各種國產(chǎn)linux、嵌入式linux、樹莓派、香橙派、全志H3等。
8. 支持編譯生成設(shè)計(jì)師插件，可直接集成到QtCreator的控件欄中，和自帶的控件一樣使用，大部分效果只要設(shè)置幾個(gè)屬性即可，極為方便。
9. 支持編譯生成獨(dú)立的非插件形式的動態(tài)庫文件，體積小，比如嵌入式linux不支持designer只需要動態(tài)庫的形式。
10. 每個(gè)控件都有一個(gè)單獨(dú)的完整的使用demo，方便參考學(xué)習(xí)單個(gè)控件使用，非常適合初學(xué)者。
11. 提供一個(gè)所有控件使用的集成的example，方便快速查看所有控件的效果。
12. 支持直接源碼集成到example的方式，方便編譯到安卓，for web套件等。
13. 支持編譯成wasm文件，直接網(wǎng)頁運(yùn)行，可以在谷歌、火狐、edge等瀏覽器運(yùn)行，原生性能。
14. 每個(gè)控件的源代碼都有詳細(xì)中文注釋，都按照統(tǒng)一設(shè)計(jì)規(guī)范編寫，方便學(xué)習(xí)自定義控件的編寫。
15. 每個(gè)控件都內(nèi)置默認(rèn)配色，demo對應(yīng)的配色都非常精美。
16. 部分控件提供多種樣式風(fēng)格選擇，多種指示器樣式選擇。
17. 所有控件自適應(yīng)布局和窗體拉伸變化，自動縮放。
18. 配套額外的自定義控件屬性設(shè)計(jì)器，類似組態(tài)設(shè)計(jì)器，純中文屬性名稱，支持拖曳設(shè)計(jì)，所見即所得，支持導(dǎo)入導(dǎo)出xml格式。
19. 集成fontawesome圖形字體+阿里巴巴iconfont收藏的幾百個(gè)圖形字體，享受圖形字體帶來的樂趣。
20. 所有控件最后生成一個(gè)dll動態(tài)庫文件，可以直接集成到qtcreator中拖曳設(shè)計(jì)使用。
21. 控件源碼全部分門別類存放，pri模塊形式集成，提供控件對照表快速查找對應(yīng)控件和說明。

五、相關(guān)代碼

#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)));

    //設(shè)置文本邊距
    ui->navListView->setChildMargin(28);
    ui->navListView->setFixedWidth(190);
    ui->navListView->setExpendMode(NavListView::ExpendMode_SingleClick);
    ui->navListView->setSeparateColor(QColor(40, 43, 51));

    //設(shè)置子節(jié)點(diǎn)顏色
    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));

    //設(shè)置父節(jié)點(diǎn)顏色
    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 << "汽車儀表盤" << "云臺儀表盤" << "多彩儀表盤" << "指南針表盤" << "指南針面板"
             << "旋轉(zhuǎn)儀表盤" << "迷你儀表盤" << "面板儀表盤" << "進(jìn)度儀表盤" << "速度儀表盤";

    listName << "按鈕進(jìn)度條" << "百分比進(jìn)度" << "環(huán)形進(jìn)度條" << "光暈進(jìn)度條" << "提示進(jìn)度條";

    listName << "電池電量" << "高亮按鈕" << "農(nóng)歷控件" << "游動的魚" << "手機(jī)通訊錄";

    listName << "環(huán)形圖表" << "多邊形狀" << "光暈日歷" << "蜘蛛網(wǎng)圖" << "垂直時(shí)間軸"
             << "自定義飛鏢盤" << "任務(wù)策略表格";

    listName << "進(jìn)度標(biāo)尺" << "顏色面板" << "圖片輪播" << "圖片時(shí)鐘" << "描點(diǎn)跟隨"
             << "水波效果" << "范圍選擇條" << "飛控套件";

    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)
{
    //設(shè)置節(jié)點(diǎn)數(shù)據(jù)格式: 標(biāo)題|父節(jié)點(diǎn)標(biāo)題(父節(jié)點(diǎn)為空)|是否展開(0展開)|提示信息|左側(cè)圖標(biāo)
    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);
    }
}

到了這里，關(guān)于Qt/C++編寫超精美自定義控件（歷時(shí)9年更新迭代/超202個(gè)控件/祖?zhèn)鳎┑奈恼戮徒榻B完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！