基础UI组件使用说明

    作者: [email protected]
    版本: V1.0.17.1
    修改时间: 2018年5月29日
    联系QQ: 88341189

[TOC]

1. 项目使用说明

1.1 如何从源码构建组件

构建环境	环境说明
windows下	mingw-gcc编译器 + Qt5+
ubuntu 18.04	mingw-gcc编译器

PS1: 在构建时在QtCreator中勾掉show build选项,编译运行即可,生成的文件在bin文件中;

PS2: 你也可以直接使用我构建好的程序点击下载17编译好的版本程序

1.2如何添加项目

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

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

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

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

2. 如何运行测试例子

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

3. 测试用例

可移动窗体测试用例

    // 可以移动窗体的测试用例
    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;~~
~~双态按钮;~~
~~头像生成按钮;~~
~~点击波按钮~~
material风格 checkbox
material风格 dialog
material风格 progress
material风格 Tabs
material风格 Toggle
material风格 Circular Progress

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;
V 1.0.17.1 适配了一下linux下面的编译问题

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

QQ: 88341189

Email: [email protected]

Name		Name	Last commit message	Last commit date
Latest commit History 11 Commits
Example		Example
NBaseUiKit		NBaseUiKit
Scripts		Scripts
.gitignore		.gitignore
NBaseUiKit.pro		NBaseUiKit.pro
README.md		README.md
_config.yml		_config.yml

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

基础UI组件使用说明

1. 项目使用说明

1.1 如何从源码构建组件

1.2如何添加项目

2. 如何运行测试例子

3. 测试用例

3. 组件路线图

4. changelog

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

About

Releases 1

Packages

Languages

daodaoliang/NBaseUiKit

Folders and files

Latest commit

History

Repository files navigation

基础UI组件使用说明

1. 项目使用说明

1.1 如何从源码构建组件

1.2如何添加项目

2. 如何运行测试例子

3. 测试用例

3. 组件路线图

4. changelog

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

About

Topics

Resources

Stars

Watchers

Forks

Releases 1

Packages 0

Languages

Packages