快捷導(dǎo)航

基于Qt編寫超精美自定義控件的示例代碼

更新時間：2023年07月02日 10:34:30 作者：Qt自定義控件

無論是哪一門開發(fā)框架，如果涉及到UI這塊，肯定需要用到自定義控件，本文為大家準備了一些基于QT編寫的超精美自定義控件，需要的可以參考一下

一、前言

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

二、效果圖

三、體驗地址

國內(nèi)站點：gitee.com/feiyangqingyun

國際站點：github.com/feiyangqingyun

四、功能特點

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

以上就是基于Qt編寫超精美自定義控件的示例代碼的詳細內(nèi)容，更多關(guān)于Qt自定義控件的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: