快捷導(dǎo)航

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

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

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

一、前言

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

二、效果圖

三、體驗(yàn)地址

國(guó)內(nèi)站點(diǎn)：gitee.com/feiyangqingyun

國(guó)際站點(diǎn)：github.com/feiyangqingyun

四、功能特點(diǎn)

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

五、相關(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 << "汽車儀表盤(pán)" << "云臺(tái)儀表盤(pán)" << "多彩儀表盤(pán)" << "指南針表盤(pán)" << "指南針面板"
             << "旋轉(zhuǎn)儀表盤(pán)" << "迷你儀表盤(pán)" << "面板儀表盤(pán)" << "進(jìn)度儀表盤(pán)" << "速度儀表盤(pán)";
    listName << "按鈕進(jìn)度條" << "百分比進(jìn)度" << "環(huán)形進(jìn)度條" << "光暈進(jìn)度條" << "提示進(jìn)度條";
    listName << "電池電量" << "高亮按鈕" << "農(nóng)歷控件" << "游動(dòng)的魚(yú)" << "手機(jī)通訊錄";
    listName << "環(huán)形圖表" << "多邊形狀" << "光暈日歷" << "蜘蛛網(wǎng)圖" << "垂直時(shí)間軸"
             << "自定義飛鏢盤(pán)" << "任務(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)為空)|是否展開(kāi)(0展開(kāi))|提示信息|左側(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)
{
    //如果帶了 . 表示序號(hào),要?jiǎng)h除再比較
    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編寫(xiě)超精美自定義控件的示例代碼的詳細(xì)內(nèi)容，更多關(guān)于Qt自定義控件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: