Qt整理的基础控件说明

[MENU]

前序

个人整理Qt开发中常用的基础控件，加以整合以便在后期的项目中直接使用。基础控件中包含了网络收集来的控件和自己编写的控件，来自网络的控件都标明了出处。若有冒犯请及时联系我，予以删除。

Email :[email protected]
QQ :2313828706
Oschina :http://git.oschina.net/kevinlq0912
GitHub :https://github.com/kevinlq

环境说明

本人测试环境
Qt:5.4.2 Mingw
OS:windows7 64b
其他环境测试完成后一并标注

工程说明

本工程将各个控件进行了分类，每类控件都各自封装成对应的库，可以方便调用，各个控件的头文件和源文件分别存放，方便了后期直接调用dll以及头文件，工程大致框架如下所示:

如何编译本工程

打开本项目源码，打开工程文件LQFramKit.pro,去掉影子编译选项，直接点击编译并运行即可，最终生成的可执行文件以及对应的库文件都在bin文件中，具体可以编译完成后查看。

使用本工程

测试用例

测试用例中针对不同的控件进行了说明，也有对应的demo作为展示

若不想生成动态库，则编译时在对应pro文件中添加宏定义

DISABLE_LIBRARY_FEATURES

仪表相关控件测试

1. 汽车仪表1

控件来源:https://www.linux-apps.com/browse/cat/280/page/2/ord/latest/
最终效果:

由于录制关系，动态图显示某些颜色不正常。

2. 汽车仪表2

控件来源:https://www.linux-apps.com/browse/cat/280/page/2/ord/latest/
最终效果

3. 姿势仪表

姿势仪表是展示当前水平以及垂直方向的程度，使用滑块来进行模拟控制，可以很明显的看到，当滑动相应的滑块过程中，姿势发生了相应的变化。

4. 速度仪表1

控件来源:https://github.com/Berrima/Qt-custom-gauge-widget
最终效果如下所示：

5. 速度仪表2

最终效果如下所示：

6. 圆形进度条

圆形进度条继承QWidget，有7种样式可供选择，demo中详细的记录了各种样式效果。

7. 多彩进度条

多彩进度条继承在QWidget,采用QPainter进行了绘制实现的。

8. 速度仪表3

来源于网络，修改了部分bug以及添加一些接口

静态图

界面显示类测试

1. 自定义搜索框

自定义搜素框是继承自QLineEdit，然后对其进行了布局，使得button可以显示出来，最后处理了相关的事件，看起来更加符合常规。更加详细的用法可以看工程中对应的demo。

2.自定义ComBox

自定义ComBox继承自QCombBox，实现了一些特殊用法，源码中写的比较高明，有待于更进一步去学习。

3. 自定义启动界面(带进度条显示)

自定义启动界面继承自QSplashScreen来实现了的，添加了进度条以便显示启动进度，预留出对应的时间接口，可以控制显示的的时间，这个时间根据具体的程序加载时间进行传递。

4. 超炫启动界面

继承自QWidget,在paintEvent事件中进行不断旋转背景图片实现，具体其他效果可以替换其他不同的图片而实现

4. 自定义switch切换按钮

switch切换按钮继承自QWidget,利用QPainter进行绘制而实现，以前弄过一个继承自QPushButton,然后使用逻辑变量控制，当按下button时显示不同的图片，这样太依赖于美工，没有具体样式的图片，按钮演示无法修改，目前使用重绘比较灵活，缺点是性能有缺失，毕竟重绘效率不高。

5. 自定义消息框

自定义消息框继承自QDialog,通过布局实现了一个简单的消息框，所以的样式由样式表进行控制。效果如下所示:

6. 导航进度条

导航进度条继承QWidget,通过QPainter进行绘制。

来源 http://www.qtcn.org/bbs/read-htm-tid-62954.html
使用方法使用时只需要继承该类即可，或者选择控件提升的办法
要显示不同的进度只需要调用setValue()方法即可

7. 尺子

来源 http://www.qtcn.org/bbs/read-htm-tid-61601.html
使用方法

继承crule类即可，或者选择界面提升方法也行。

原作者实现了基本的功能，后期可以添加尺子360°旋转，更加人性化一些

8. IP地址输入框

来源

本空间来源于这篇博客
小豪之家

在原作者基础上主要优化和增加了如下功能：

添加了使用点号自动跳到下个输入框；
添加了使用键盘方向键控制焦点切换；

输入功能基本仿照一般的网络调试助手IP地址输入框功能

使用方法

选择继承或者提升IpAddressWidget类均可以实现对应的效果

获取输入框的IP地址:

    /**
      @brief getIpAddress() 获取IP地址
    */
    QString getIpAddress () const;

9. 弹窗提醒工具

来源 https://git.oschina.net/cassfrontend/qt-notify

10. 树状导航

来源网络

11. tabWidget

辅助工具类测试

辅助工具类包含了常见的一些小工具，比如二维码生成、验证码生成、进制转换、数据通信(串口(232,485)、网络、CAN等)

1. 性能测试工具

性能监测工具可以模拟windows系统自带的性能监测效果，目前显示的波纹采用定时器进行模拟，具体实际使用过程中可以传入相应的数据值。demo中有详细的介绍。

2. 二维码识别工具

二维码识别采用第三发库来实现

测试时使用自己支付宝付款码进行了测试

图表控件类测试

图表控件类包含了常见的图表，比如各种统计图(条形图、扇形图、折线图、饼图等等)

版本更新记录

V 0.0.0.0 构建了控件整体框架，完善了一些表达；
V 0.0.0.1 添加了汽车仪表盘控件，有2中风格，具体效果在自带的demo中可以运行看到；
V 0.0.0.2 添加了自定义搜索框、性能监控、姿势仪表控件；
V 0.0.0.3 添加了2个速度仪表控件;
V 0.0.0.4 添加了圆形进度条控件，并编写对应的demo进行演示;
V 0.0.0.5 添加了启动界面，修复了资源文件添加的bug,多个工程中如果添加的资源文件名称相同，出现了无法调用问题，比如都新建了一个image的资源文件，调用过程中发现一直提醒找不到该文件。
在网上找到了一篇文章：http://www.cnblogs.com/lzjsky/archive/2012/08/20/2647471.html 分析了比较详细，说明了资源文件的前因后果。
V 0.0.0.6 添加了switch切换按钮，并进行了测试；
V 0.0.0.7 添加了自定义消息框界面，编写相关demo测试;
V 0.0.0.8 添加了二维码检测功能空间(后面计划添加二维码生成功能空间)；
V 0.0.0.9 添加超酷启动界面控件demo;
V 0.0.1.0 添加了导航进度条控件以及demo;
V 0.0.1.1 添加了尺子工具及其demo;
V 0.0.1.2 添加了IP地址输入框空间及其demo;
V 0.0.1.3 添加了消息弹窗控件以及demo;
V 0.0.1.4 添加了速度仪表3及其demo；
V 0.0.1.5 添加树状导航及其demo；
V 0.0.1.6 添加tabWidget窗体;
V 0.0.1.7 添加了toleranceBar及其demo；

基础UI组件使用说明

[TOC]

0.如何添加项目

首先拷贝源码到你的工程文件目录;
在你的项目 pro文件中添加:

# import dll
win32: LIBS += -L$$PWD/../bin/ -lNBaseUiKit
DEPENDPATH += $$PWD/../bin

# import dll file
include($$PWD/../NBaseUiKit/NBaseUiKit_inc.pri)

具体的路径请按照你的项目情况进行修改

1. 如何运行测试例子

打开工程文件NBaseUiKit.pro,然后在QtCreator中勾掉show build选项,编译运行即可,生成的文件在bin文件中;

2. 测试用例

可移动窗体测试用例

    // 可以移动窗体的测试用例
    NBaseMoveableWidget test_case_001;
    QLabel test_case_001_label(&test_case_001);
    test_case_001_label.setText("可以移动窗体的测试用例");
    test_case_001.setGeometry(0,0,400,400);
    test_case_001.show();

渐入渐出窗体测试用例

	// 渐入渐出窗体测试用例
    NBaseFadeWidget test_case_002;
    QLabel test_case_002_label(&test_case_002);
    test_case_002_label.setText("渐入渐出窗体测试用例");
    test_case_002.setGeometry(400,0,400,400);
    test_case_002.beginFadeShow(5);

// 迷你窗体测试用例

    // 迷你窗体测试用例
    NBaseMiniAppWidget test_case_003;
    test_case_003.setPixmap(QPixmap(":miniImage"));
    test_case_003.show();

阴影窗体测试用例

    // 阴影窗体测试用例
    NBaseShadowWidget test_case_004;
    test_case_004.setGeometry(0,400,400,400);
    test_case_004.show();

弹出窗体测试用例

    // 弹出窗体测试用例
    NBasePopWidget test_case_005;
    QLabel test_case_005_label(&test_case_005);
    test_case_005_label.setText("弹出窗体测试用例");
    test_case_005.setFixedHeight(400);
    test_case_005.setFixedWidth(400);
    test_case_005.showPopDialog();

snowLabel测试用例

	// snowLabel测试用例
    NBaseSnowLabel test_case_006;
    test_case_006.setText("我是测试数据");
    test_case_006.setFont(QFont("微软雅黑", 12, QFont::Bold));
    test_case_006.setAlignment(Qt::AlignHCenter|Qt::AlignVCenter);
    test_case_006.show();

圆周运动窗体测试用例

	// 圆周运动窗体测试用例
    NBaseCircleAnimationWidget test_case_007;
    test_case_007.setCircleInfo(":miniImage",10);
    test_case_007.show();
    test_case_007.startAnimation();

LED窗体测试用例(跑马灯效果)

    NBaseLEDWidget test_case_008;
    test_case_008.setGeometry(0,230,300,40);
    test_case_008.setText("我是跑马灯LED效果。");
    test_case_008.setTimer(500);
    test_case_008.startEffect(true);
    test_case_008.show();

LED窗体测试用例(闪光灯效果)

    NBaseLEDWidget test_case_009;
    test_case_009.setGeometry(330,230,300,40);
    test_case_009.setText("我是闪光灯LED效果。");
    test_case_009.setTimer(500);
    test_case_009.setEffect(NBaseLEDWidget::intermittent);
    test_case_009.startEffect(true);
    test_case_009.show();

跑马灯label测试用例(像素级别)

    NBaseMarqueeLabel test_case_010;
    test_case_010.setText("我是跑马灯测试数据");
    test_case_010.setFont(QFont("Fixed", 20, QFont::Bold));
    test_case_010.setDirection(NBaseMarqueeLabel::RightToLeft);
    test_case_010.setInterval(50);
    test_case_010.start();
    test_case_010.show();

QR测试用例

	NBaseQREncodeWidget test_case_011;
    test_case_011.resize(300,300);
    test_case_011.setQrLogo(":miniImage");
    test_case_011.show();

圆形进度条测试

    // 圆形进度条测试用例(甜甜圈样式)
    QPalette p1;
    p1.setBrush(QPalette::AlternateBase, Qt::darkCyan);
    p1.setColor(QPalette::Text, Qt::yellow);
    NBaseRoundProgressBar test_case_012;
    test_case_012.setOutlinePenWidth(2);
    test_case_012.setPalette(p1);
    test_case_012.setNullPosition(NBaseRoundProgressBar::PositionLeft);
    test_case_012.setDecimals(0);
    test_case_012.setFixedSize(200,200);
    test_case_012.show();

    // 圆形进度条测试用例(线性样式)
    NBaseRoundProgressBar test_case_013;
    test_case_013.setOutlinePenWidth(8);
    test_case_013.setDataPenWidth(10);
    test_case_013.setBarStyle(NBaseRoundProgressBar::StyleLine);
    test_case_013.setDecimals(0);
    test_case_013.setFixedSize(200,200);
    test_case_013.show();

toastr 提示测试

	NBaseToastr * test_case_014 = new NBaseToastr(this, "我是刀刀亮测试数据");
    test_case_014->toastr();

阴影文字label 测试

    NBaseShadowLabel * test_case_015 = new NBaseShadowLabel(" 我是刀刀亮测试数据 ");
    test_case_015->setFont(QFont("Fixed", 25, QFont::Bold));
    test_case_015->setFixedSize(400, 50);
    test_case_015->show();

等待框测试

    // 等待框 测试用例
    NBaseWaitDialog * test_case_016 = new NBaseWaitDialog(this);
    test_case_016->showWaitDialog();
	//test_case_016->closeWaitDialog();

纵向触屏列表测试用例

    // 触屏列表 测试用例
    NTouchListWidget *test_case_18 = new NTouchListWidget();
    test_case_18->setFixedSize(200,500);
    test_case_18->show();

    // 插入测试数据
    for(int index = 0;index != 200;index++) test_case_18->addItem(QString("测试项目:%1").arg(index));

翻转页面测试用例

    // 翻转页面 测试用例
    NBaseRotatingStackedWidget *test_case_19 = new NBaseRotatingStackedWidget();
    test_case_19->setFixedSize(400,500);
    test_case_19->show();

    // 插入测试数据
    QMap<QString, QString> colorMap;
    colorMap.insert("相思灰","background-color:rgb(98,92,82);color:white;");
    colorMap.insert("卡其黄","background-color:rgb(213,184,132);color:white;");
    colorMap.insert("番茄红","background-color:rgb(196,71,61);color:white;");
    colorMap.insert("艳红","background-color:rgb(204,53,54);color:white;");
    colorMap.insert("绛紫","background-color:rgb(112,77,78);color:white;");
    colorMap.insert("浅血牙","background-color:rgb(234,205,209);color:white;");
    colorMap.insert("紫藤灰","background-color:rgb(133,126,149);color:white;");
    colorMap.insert("沙绿","background-color:rgb(0,91,90);color:white;");
    colorMap.insert("鸭蛋青","background-color:rgb(209,227,219);color:white;");
    colorMap.insert("柠檬黄","background-color:rgb(233,219,57);color:white;");
    colorMap.insert("芦灰","background-color:rgb(169,176,143);color:white;");
    colorMap.insert("油烟墨","background-color:rgb(63,63,60);color:white;");
    colorMap.insert("米红","background-color:rgb(225,189,162);color:white;");
    colorMap.insert("十样锦","background-color:rgb(252,177,170);color:white;");
    foreach (QString item, colorMap.keys()) {
        QLabel *page = new QLabel(test_case_19);
        page->setStyleSheet(colorMap[item]);
        page->setText(item);
        page->setAlignment(Qt::AlignHCenter|Qt::AlignVCenter);
        page->setFont(QFont("微软雅黑", 18, QFont::Bold));
        QPushButton *btn = new QPushButton(QString("下一个"),page);
        btn->setFont(QFont("微软雅黑", 12, QFont::Bold));
        btn->setFixedWidth(80);
        btn->setStyleSheet("background-color:rgb(41,176,204);color:white;border:none;border-radius:1px;");
        connect(btn,SIGNAL(clicked(bool)),test_case_19,SLOT(nextPage()));
        test_case_19->addWidget(page);
    }

横向触屏测试用例

    // 触屏列表 测试用例
    NTouchListWidget *test_case_20 = new NTouchListWidget();
    test_case_20->setFixedSize(500,200);
    test_case_20->setFlow(QListWidget::LeftToRight);
    test_case_20->show();

    // 插入测试数据
    for(int index = 0;index != 200;index++) test_case_20->addItem(QString("测试项目:%1").arg(index));

验证码测试用例

    // 验证码 测试用例
    NBaseCaptcha test_case_21(0,200,50,6);
    QLabel *test_case_21_w = new QLabel;
    test_case_21_w->setPixmap(test_case_21.generateOneCaptcha());
    test_case_21_w->move(x()+width()/2, y()+height()/2);
    test_case_21_w->show();

图片截取测试用例

    // 图片截取的测试用例
    NBaseImageCropper *test_case_22 = new NBaseImageCropper(nullptr,true,true);
    test_case_22->setImage(":testImage");
    test_case_22->setSize(400,600);
    test_case_22->show();

switch按钮测试用例

    // switch按钮 测试用例
    NBaseSwitchButton *test_case_23 = new NBaseSwitchButton;
    test_case_23->show();

卷轴测试用例

    // 卷轴widget 测试用例
    NBaseReelWidget *test_case_24 = new NBaseReelWidget;
    test_case_24->setOriPos(QPoint(x()+width()/2-250, y()+height()/2-150));
    test_case_24->setOriSize(QSize(500,300));
    test_case_24->showExpan();

头像测试用例

    // 头像编辑 测试用例
    NBaseLogoWidget *test_case_25 = new NBaseLogoWidget;
    test_case_25->show();

点击波按钮测试用例

    // 点击波按钮 测试用例
    NBaseClickWave *test_case_26 = new NBaseClickWave;
    test_case_26->setClickColor(QColor(225,189,162));
    test_case_26->setFixedSize(200,80);
    test_case_26->show();

3. 组件路线图

~~可移动widget;~~
~~渐入渐出widget;~~
~~迷你工具widget;~~
~~阴影widget;~~
~~弹出式widget;~~
~~圆周抖动式widget~~
~~LED效果widget;~~
~~反转效果stackwidget~~
~~二维码生成widget~~
~~圆形进度条;~~
~~toastr提示组件;~~
~~阴影文字label组件;~~
~~等待框组件;~~
~~翻转效果的widget;~~
~~触屏效果的list;~~
~~验证码widget;~~
~~图片截取widget;~~
~~switch按钮;~~
~~卷轴效果widget;~~
~~双态按钮;~~
~~头像生成按钮;~~
~~点击波按钮~~

4. changelog

V 1.0.1.0 完成常用的加解密的封装;
V 1.0.2.0 增加LED效果的组件;
V 1.0.3.0 增加跑马灯效果的组件;
V 1.0.4.0 增加二维码效果组件;
V 1.0.5.0 增加圆形进度条组件;
V 1.0.6.0 增加toastr提示组件;
V 1.0.7.0 增加阴影文字label组件;
V 1.0.8.0 增加等待框组件;
V 1.0.9.0 增加触屏效果的list;
V 1.0.10.0 增加翻转效果的组件;
V 1.0.11.0 增加触屏效果的listview 和 Listwidget;
V 1.0.12.0 增加验证码widget和图片截取widget;
V 1.0.13.0 增加switch按钮;
V 1.0.14.0 增加卷轴widget;
V 1.0.15.0 增加头像编辑控件，同时增加了图片截取的控件的比例按钮;
V 1.0.16.0 增加了点击波按钮;
V 1.0.17.0 增加了倒计时波widget;

5. 若是有啥不对的地方随时联系我

QQ: 88341189

Email: [email protected]

Name		Name	Last commit message	Last commit date
Latest commit History 80 Commits
Exmaple		Exmaple
LQAuxiliaryTools		LQAuxiliaryTools
LQChart		LQChart
LQFormWidget		LQFormWidget
LQInstrumentation		LQInstrumentation
NBaseUiKit		NBaseUiKit
Scripts		Scripts
doc		doc
screen		screen
.gitignore		.gitignore
.qmake.stash		.qmake.stash
LICENSE		LICENSE
LQFramKit.pro		LQFramKit.pro
README.md		README.md
test.jpg		test.jpg

License

GitHubFroxy/LQFramKit

Folders and files

Latest commit

History

Repository files navigation