绍兴免费做网站,邢台手机网站建设,wordpress 弹窗 网页,温州乐清最新消息一、前言对于现在做前端开发人员来说#xff0c;FlatUI肯定不陌生#xff0c;最近几年扁平化的设计越来越流行#xff0c;大概由于现在PC端和移动端的设备的分辨率越来越高#xff0c;扁平化反而看起来更让人愉悦#xff0c;而通过渐变色产生的质感色彩反而没有扁平化来得…一、前言对于现在做前端开发人员来说FlatUI肯定不陌生最近几年扁平化的设计越来越流行大概由于现在PC端和移动端的设备的分辨率越来越高扁平化反而看起来更让人愉悦而通过渐变色产生的质感色彩反而没有扁平化来得亲切。 Flat UI是基于Bootstrap之上进行二次开发的扁平化前端框架他提供了动感、时尚的风格色调搭配简洁、炫丽的功能组件同时还提供了更为平滑的js交互动画可以称得上前端扁平化设计框架的优秀代表之一。 既然是扁平化设计框架的优秀代表当然需要在自己项目中应用应用本人最早使用VB开发而后转为C#开发最后转为Qt开发都是因为公司项目需要根据需要不断学习新的编程框架语言都是相通的举一反三以前用C#写的vista时钟控件和vista日历控件稍微改改就转移成了Qt写的对应控件非常方便只要掌握了思想熟练了一门语言和框架之后其他的学起来特别快。 Qt中的qss机制和css极为相似感觉就是脱胎于css用qss来实现Qt界面样式不是一般的方便而是相当的爽在看到FlatUI这样的精美的扁平化设计样式后难以抑制手痒痒就想用qss实现类似的风格。开源地址[https://gitee.com/feiyangqingyun/QWidgetDemo](https://gitee.com/feiyangqingyun/QWidgetDemo) [https://github.com/feiyangqingyun/QWidgetDemo](https://github.com/feiyangqingyun/QWidgetDemo)二、实现的功能 * 1:按钮样式设置 * 2:文本框样式设置 * 3:进度条样式 * 4:滑块条样式 * 5:单选框样式 * 6:滚动条样式 * 7:可自由设置对象的高度宽度大小等 * 8:自带默认参数值三、效果图五、核心代码#pragma execution_character_set(utf-8)#include flatui.h#include qmutex.h#include qpushbutton.h#include qlineedit.h#include qprogressbar.h#include qslider.h#include qradiobutton.h#include qcheckbox.h#include qscrollbar.h#include qdebug.hQScopedPointer FlatUI::self;FlatUI *FlatUI::Instance(){ if (self.isNull()) { static QMutex mutex; QMutexLocker locker(mutex); if (self.isNull()) { self.reset(new FlatUI); } } return self.data();}FlatUI::FlatUI(QObject *parent) : QObject(parent){}QString FlatUI::setPushButtonQss(QPushButton *btn, int radius, int padding, const QString normalColor, const QString normalTextColor, const QString hoverColor, const QString hoverTextColor, const QString pressedColor, const QString pressedTextColor){ QStringList list; list.append(QString(QPushButton{border-style:none;padding:%1px;border-radius:%2px;color:%3;background:%4;}) .arg(padding).arg(radius).arg(normalTextColor).arg(normalColor)); list.append(QString(QPushButton:hover{color:%1;background:%2;}) .arg(hoverTextColor).arg(hoverColor)); list.append(QString(QPushButton:pressed{color:%1;background:%2;}) .arg(pressedTextColor).arg(pressedColor)); QString qss list.join(); btn-setStyleSheet(qss); return qss;}QString FlatUI::setLineEditQss(QLineEdit *txt, int radius, int borderWidth, const QString normalColor, const QString focusColor){ QStringList list; list.append(QString(QLineEdit{border-style:none;padding:3px;border-radius:%1px;border:%2px solid %3;}) .arg(radius).arg(borderWidth).arg(normalColor)); list.append(QString(QLineEdit:focus{border:%1px solid %2;}) .arg(borderWidth).arg(focusColor)); QString qss list.join(); txt-setStyleSheet(qss); return qss;}QString FlatUI::setProgressQss(QProgressBar *bar, int barHeight, int barRadius, int fontSize, const QString normalColor, const QString chunkColor){ QStringList list; list.append(QString(QProgressBar{font:%1pt;background:%2;max-height:%3px;border-radius:%4px;text-align:center;border:1px solid %2;}) .arg(fontSize).arg(normalColor).arg(barHeight).arg(barRadius)); list.append(QString(QProgressBar:chunk{border-radius:%2px;background-color:%1;}) .arg(chunkColor).arg(barRadius)); QString qss list.join(); bar-setStyleSheet(qss); return qss;}QString FlatUI::setSliderQss(QSlider *slider, int sliderHeight, const QString normalColor, const QString grooveColor, const QString handleBorderColor, const QString handleColor){ int sliderRadius sliderHeight / 2; int handleWidth (sliderHeight * 3) / 2 (sliderHeight / 5); int handleRadius handleWidth / 2; int handleOffset handleRadius / 2; QStringList list; list.append(QString(QSlider::horizontal{min-height:%1px;}).arg(sliderHeight * 2)); list.append(QString(QSlider::groove:horizontal{background:%1;height:%2px;border-radius:%3px;}) .arg(normalColor).arg(sliderHeight).arg(sliderRadius)); list.append(QString(QSlider::add-page:horizontal{background:%1;height:%2px;border-radius:%3px;}) .arg(normalColor).arg(sliderHeight).arg(sliderRadius)); list.append(QString(QSlider::sub-page:horizontal{background:%1;height:%2px;border-radius:%3px;}) .arg(grooveColor).arg(sliderHeight).arg(sliderRadius)); list.append(QString(QSlider::handle:horizontal{width:%3px;margin-top:-%4px;margin-bottom:-%4px;border-radius:%5px; background:qradialgradient(spread:pad,cx:0.5,cy:0.5,radius:0.5,fx:0.5,fy:0.5,stop:0.6 %1,stop:0.8 %2);}) .arg(handleColor).arg(handleBorderColor).arg(handleWidth).arg(handleOffset).arg(handleRadius)); //偏移一个像素 handleWidth handleWidth 1; list.append(QString(QSlider::vertical{min-width:%1px;}).arg(sliderHeight * 2)); list.append(QString(QSlider::groove:vertical{background:%1;width:%2px;border-radius:%3px;}) .arg(normalColor).arg(sliderHeight).arg(sliderRadius)); list.append(QString(QSlider::add-page:vertical{background:%1;width:%2px;border-radius:%3px;}) .arg(grooveColor).arg(sliderHeight).arg(sliderRadius)); list.append(QString(QSlider::sub-page:vertical{background:%1;width:%2px;border-radius:%3px;}) .arg(normalColor).arg(sliderHeight).arg(sliderRadius)); list.append(QString(QSlider::handle:vertical{height:%3px;margin-left:-%4px;margin-right:-%4px;border-radius:%5px; background:qradialgradient(spread:pad,cx:0.5,cy:0.5,radius:0.5,fx:0.5,fy:0.5,stop:0.6 %1,stop:0.8 %2);}) .arg(handleColor).arg(handleBorderColor).arg(handleWidth).arg(handleOffset).arg(handleRadius)); QString qss list.join(); slider-setStyleSheet(qss); return qss;}QString FlatUI::setRadioButtonQss(QRadioButton *rbtn, int indicatorRadius, const QString normalColor, const QString checkColor){ int indicatorWidth indicatorRadius * 2; QStringList list; list.append(QString(QRadioButton::indicator{border-radius:%1px;width:%2px;height:%2px;}) .arg(indicatorRadius).arg(indicatorWidth)); list.append(QString(QRadioButton::indicator::unchecked{background:qradialgradient(spread:pad,cx:0.5,cy:0.5,radius:0.5,fx:0.5,fy:0.5, stop:0.6 #FFFFFF,stop:0.7 %1);}).arg(normalColor)); list.append(QString(QRadioButton::indicator::checked{background:qradialgradient(spread:pad,cx:0.5,cy:0.5,radius:0.5,fx:0.5,fy:0.5, stop:0 %1,stop:0.3 %1,stop:0.4 #FFFFFF,stop:0.6 #FFFFFF,stop:0.7 %1);}).arg(checkColor)); QString qss list.join(); rbtn-setStyleSheet(qss); return qss;}QString FlatUI::setScrollBarQss(QWidget *scroll, int radius, int min, int max, const QString bgColor, const QString handleNormalColor, const QString handleHoverColor, const QString handlePressedColor){ //滚动条离背景间隔 int padding 0; QStringList list; //handle:指示器,滚动条拉动部分 add-page:滚动条拉动时增加的部分 sub-page:滚动条拉动时减少的部分 add-line:递增按钮 sub-line:递减按钮 //横向滚动条部分 list.append(QString(QScrollBar:horizontal{background:%1;padding:%2px;border-radius:%3px;min-height:%4px;max-height:%4px;}) .arg(bgColor).arg(padding).arg(radius).arg(max)); list.append(QString(QScrollBar::handle:horizontal{background:%1;min-width:%2px;border-radius:%3px;}) .arg(handleNormalColor).arg(min).arg(radius)); list.append(QString(QScrollBar::handle:horizontal:hover{background:%1;}) .arg(handleHoverColor)); list.append(QString(QScrollBar::handle:horizontal:pressed{background:%1;}) .arg(handlePressedColor)); list.append(QString(QScrollBar::add-page:horizontal{background:none;})); list.append(QString(QScrollBar::sub-page:horizontal{background:none;})); list.append(QString(QScrollBar::add-line:horizontal{background:none;})); list.append(QString(QScrollBar::sub-line:horizontal{background:none;})); //纵向滚动条部分 list.append(QString(QScrollBar:vertical{background:%1;padding:%2px;border-radius:%3px;min-width:%4px;max-width:%4px;}) .arg(bgColor).arg(padding).arg(radius).arg(max)); list.append(QString(QScrollBar::handle:vertical{background:%1;min-height:%2px;border-radius:%3px;}) .arg(handleNormalColor).arg(min).arg(radius)); list.append(QString(QScrollBar::handle:vertical:hover{background:%1;}) .arg(handleHoverColor)); list.append(QString(QScrollBar::handle:vertical:pressed{background:%1;}) .arg(handlePressedColor)); list.append(QString(QScrollBar::add-page:vertical{background:none;})); list.append(QString(QScrollBar::sub-page:vertical{background:none;})); list.append(QString(QScrollBar::add-line:vertical{background:none;})); list.append(QString(QScrollBar::sub-line:vertical{background:none;})); QString qss list.join(); scroll-setStyleSheet(qss); return qss;}六、控件介绍 1. 超过160个精美控件涵盖了各种仪表盘、进度条、进度球、指南针、曲线图、标尺、温度计、导航条、导航栏flatui、高亮按钮、滑动选择器、农历等。远超qwt集成的控件数量。 2. 每个类都可以独立成一个单独的控件零耦合每个控件一个头文件和一个实现文件不依赖其他文件方便单个控件以源码形式集成到项目中较少代码量。qwt的控件类环环相扣高度耦合想要使用其中一个控件必须包含所有的代码。 3. 全部纯Qt编写QWidgetQPainter绘制支持Qt4.6到Qt5.13的任何Qt版本支持mingw、msvc、gcc等编译器支持任意操作系统比如windowslinuxmac嵌入式linux等不乱码可直接集成到Qt Creator中和自带的控件一样使用大部分效果只要设置几个属性即可极为方便。 4. 每个控件都有一个对应的单独的包含该控件源码的DEMO方便参考使用。同时还提供一个所有控件使用的集成的DEMO。 5. 每个控件的源代码都有详细中文注释都按照统一设计规范编写方便学习自定义控件的编写。 6. 每个控件默认配色和demo对应的配色都非常精美。 7. 超过130个可见控件6个不可见控件。 8. 部分控件提供多种样式风格选择多种指示器样式选择。 9. 所有控件自适应窗体拉伸变化。 10. 集成自定义控件属性设计器支持拖曳设计所见即所得支持导入导出xml格式。 11. 自带activex控件demo所有控件可以直接运行在ie浏览器中。 12. 集成fontawesome图形字体阿里巴巴iconfont收藏的几百个图形字体享受图形字体带来的乐趣。 13. 所有控件最后生成一个动态库文件(dll或者so等)可以直接集成到qtcreator中拖曳设计使用。 14. 目前已经有qml版本后期会考虑出pyqt版本如果用户需求量很大的话。 15. 自定义控件插件开放动态库使用(永久免费)无任何后门和限制请放心使用。 16. 目前已提供32个版本的dll其中qt_5_7_0_mingw530_32这个版本会一直保证最新的完整的。 17. 不定期增加控件和完善控件不定期更新SDK欢迎各位提出建议谢谢 18. Qt入门书籍推荐霍亚飞的《Qt Creator快速入门》《Qt5编程入门》Qt进阶书籍推荐官方的《C GUI Qt4编程》。 19. 强烈推荐程序员自我修养和规划系列书《大话程序员》《程序员的成长课》《解忧程序员》受益匪浅受益终生 20. SDK地址[https://gitee.com/feiyangqingyun/QUCSDK](https://gitee.com/feiyangqingyun/QUCSDK) [https://github.com/feiyangqingyun/qucsdk](https://github.com/feiyangqingyun/qucsdk)
