Qt QtWidget使用Material风格的组件库

一、qtmaterialwidget组件库介绍
　　该组件库拥有炫酷的Material风格的组件，并且该组件库基于QtWidget开发的，目前实现了大约20个Material风格的组件，下面教大家如何编译该组件库，并将这个组件库运用到自己的项目中。

二、编译qtmaterialwidget组件库
　　下载解压后的文件目录：

　　点击qtmaterialwidgets.pro的项目工程文件，选择Release模式并且通过mingw64位的编译器进行编译，就会得到一个以.a结尾的静态库文件:

　　注意:因为我使用的是mingw模式的编译器，所以它会采用gcc进行编译，得到的静态库文件会以.a结尾。如果采用msvc模式的编译器，它就会得到以.lib结尾的静态库文件。

　　该组件库的项目工程分析:

　　如上图所示:cponents是封装组件的目录，examples是对封装组件的使用，叫我们如何使用这些组件到我们的项目中。

　　该组件库目前封装组件的效果图如下：

App Bar	QtMaterialAppBar

Auto Cplete	QtMaterialAutoCplete

Avatar	QtMaterialAvatar

Check Box	QtMaterialCheckBox

Circular Progress	QtMaterialCircularProgress

Dialog	QtMaterialDialog

Drawer	QtMaterialDrawer

FAB	QtMaterialFloatingActionButton

Flat Button	QtMaterialFlatButton

Icon Button	QtMaterialIconButton

Progress	QtMaterialProgress

Radio Button	QtMaterialRadioButton

Raised Button	QtMaterialRaisedButton

、

Scroll Bar	QtMaterialScrollBar

Slider	QtMaterialSlider

Snackbar	QtMaterialSnackBar

Tabs	QtMaterialTabs

Text Field	QtMaterialTextField

Toggle	QtMaterialToggle

三、使用qtmaterialwidget组件库
使用qtmaterialwidgets组件库的流程如下:

在项目的目录下创建名为SDK的文件夹。
然后在SDK文件夹下创建名为MaterialSDK的文件夹。
然后在MaterialSDK的文件夹下创建名为staticlib和cponents的文件夹。
最后将libcponents.a复制到staticlib文件夹下，将组件库中的cponents的代码和资源复制到cponents文件夹下。
做完上述操作后，进入pro文件中，输入以下命令：

1 //导入组件库的源文件 2 SOURCES += \ 3 SDK/MaterialSDK/cponents/qtmaterialappbarpp \ 4 SDK/MaterialSDK/cponents/qtmaterialautocpletepp \ 5 SDK/MaterialSDK/cponents/qtmaterialautocplete_internalpp \ 6 SDK/MaterialSDK/cponents/qtmaterialavatarpp \ 7 SDK/MaterialSDK/cponents/qtmaterialbadgepp \ 8 SDK/MaterialSDK/cponents/qtmaterialcheckboxpp \ 9 SDK/MaterialSDK/cponents/qtmaterialcircularprogresspp \ 10 SDK/MaterialSDK/cponents/qtmaterialcircularprogress_internalpp \ 11 SDK/MaterialSDK/cponents/qtmaterialdialogpp \ 12 SDK/MaterialSDK/cponents/qtmaterialdialog_internalpp \ 13 SDK/MaterialSDK/cponents/qtmaterialdrawerpp \ 14 SDK/MaterialSDK/cponents/qtmaterialdrawer_internalpp \ 15 SDK/MaterialSDK/cponents/qtmaterialfabpp \ 16 SDK/MaterialSDK/cponents/qtmaterialflatbuttonpp \ 17 SDK/MaterialSDK/cponents/qtmaterialflatbutton_internalpp \ 18 SDK/MaterialSDK/cponents/qtmaterialiconbuttonpp \ 19 SDK/MaterialSDK/cponents/qtmateriallistpp \ 20 SDK/MaterialSDK/cponents/qtmateriallistitempp \ 21 SDK/MaterialSDK/cponents/qtmaterialmenupp \ 22 SDK/MaterialSDK/cponents/qtmaterialmenu_internalpp \ 23 SDK/MaterialSDK/cponents/qtmaterialpaperpp \ 24 SDK/MaterialSDK/cponents/qtmaterialprogresspp \ 25 SDK/MaterialSDK/cponents/qtmaterialprogress_internalpp \ 26 SDK/MaterialSDK/cponents/qtmaterialradiobuttonpp \ 27 SDK/MaterialSDK/cponents/qtmaterialraisedbuttonpp \ 28 SDK/MaterialSDK/cponents/qtmaterialscrollbarpp \ 29 SDK/MaterialSDK/cponents/qtmaterialscrollbar_internalpp \ 30 SDK/MaterialSDK/cponents/qtmaterialsliderpp \ 31 SDK/MaterialSDK/cponents/qtmaterialslider_internalpp \ 32 SDK/MaterialSDK/cponents/qtmaterialsnackbarpp \ 33 SDK/MaterialSDK/cponents/qtmaterialsnackbar_internalpp \ 34 SDK/MaterialSDK/cponents/qtmaterialtablepp \ 35 SDK/MaterialSDK/cponents/qtmaterialtabspp \ 36 SDK/MaterialSDK/cponents/qtmaterialtabs_internalpp \ 37 SDK/MaterialSDK/cponents/qtmaterialtextfieldpp \ 38 SDK/MaterialSDK/cponents/qtmaterialtextfield_internalpp \ 39 SDK/MaterialSDK/cponents/qtmaterialtogglepp \ 40 SDK/MaterialSDK/cponents/qtmaterialtoggle_internalpp \ 41 mainpp \ 42 widgetpp 43 44 //导入组件库的头文件 45 HEADERS += \ 46 SDK/MaterialSDK/cponents/qtmaterialappbar.h \ 47 SDK/MaterialSDK/cponents/qtmaterialappbar_p.h \ 48 SDK/MaterialSDK/cponents/qtmaterialautocplete.h \ 49 SDK/MaterialSDK/cponents/qtmaterialautocplete_internal.h \ 50 SDK/MaterialSDK/cponents/qtmaterialautocplete_p.h \ 51 SDK/MaterialSDK/cponents/qtmaterialavatar.h \ 52 SDK/MaterialSDK/cponents/qtmaterialavatar_p.h \ 53 SDK/MaterialSDK/cponents/qtmaterialbadge.h \ 54 SDK/MaterialSDK/cponents/qtmaterialbadge_p.h \ 55 SDK/MaterialSDK/cponents/qtmaterialcheckbox.h \ 56 SDK/MaterialSDK/cponents/qtmaterialcheckbox_p.h \ 57 SDK/MaterialSDK/cponents/qtmaterialcircularprogress.h \ 58 SDK/MaterialSDK/cponents/qtmaterialcircularprogress_internal.h \ 59 SDK/MaterialSDK/cponents/qtmaterialcircularprogress_p.h \ 60 SDK/MaterialSDK/cponents/qtmaterialdialog.h \ 61 SDK/MaterialSDK/cponents/qtmaterialdialog_internal.h \ 62 SDK/MaterialSDK/cponents/qtmaterialdialog_p.h \ SDK/MaterialSDK/cponents/qtmaterialdrawer.h \ 64 SDK/MaterialSDK/cponents/qtmaterialdrawer_internal.h \ 65 SDK/MaterialSDK/cponents/qtmaterialdrawer_p.h \ 66 SDK/MaterialSDK/cponents/qtmaterialfab.h \ 67 SDK/MaterialSDK/cponents/qtmaterialfab_p.h \ 68 SDK/MaterialSDK/cponents/qtmaterialflatbutton.h \ 69 SDK/MaterialSDK/cponents/qtmaterialflatbutton_internal.h \ 70 SDK/MaterialSDK/cponents/qtmaterialflatbutton_p.h \ 71 SDK/MaterialSDK/cponents/qtmaterialiconbutton.h \ 72 SDK/MaterialSDK/cponents/qtmaterialiconbutton_p.h \ 73 SDK/MaterialSDK/cponents/qtmateriallist.h \ 74 SDK/MaterialSDK/cponents/qtmateriallist_p.h \ 75 SDK/MaterialSDK/cponents/qtmateriallistitem.h \ 76 SDK/MaterialSDK/cponents/qtmateriallistitem_p.h \ 77 SDK/MaterialSDK/cponents/qtmaterialmenu.h \ 78 SDK/MaterialSDK/cponents/qtmaterialmenu_internal.h \ 79 SDK/MaterialSDK/cponents/qtmaterialmenu_p.h \ 80 SDK/MaterialSDK/cponents/qtmaterialpaper.h \ 81 SDK/MaterialSDK/cponents/qtmaterialpaper_p.h \ 82 SDK/MaterialSDK/cponents/qtmaterialprogress.h \ 83 SDK/MaterialSDK/cponents/qtmaterialprogress_internal.h \ 84 SDK/MaterialSDK/cponents/qtmaterialprogress_p.h \ 85 SDK/MaterialSDK/cponents/qtmaterialradiobutton.h \ 86 SDK/MaterialSDK/cponents/qtmaterialradiobutton_p.h \ 87 SDK/MaterialSDK/cponents/qtmaterialraisedbutton.h \ 88 SDK/MaterialSDK/cponents/qtmaterialraisedbutton_p.h \ 89 SDK/MaterialSDK/cponents/qtmaterialscrollbar.h \ 90 SDK/MaterialSDK/cponents/qtmaterialscrollbar_internal.h \ 91 SDK/MaterialSDK/cponents/qtmaterialscrollbar_p.h \ 92 SDK/MaterialSDK/cponents/qtmaterialslider.h \ 93 SDK/MaterialSDK/cponents/qtmaterialslider_internal.h \ 94 SDK/MaterialSDK/cponents/qtmaterialslider_p.h \ 95 SDK/MaterialSDK/cponents/qtmaterialsnackbar.h \ 96 SDK/MaterialSDK/cponents/qtmaterialsnackbar_internal.h \ 97 SDK/MaterialSDK/cponents/qtmaterialsnackbar_p.h \ 98 SDK/MaterialSDK/cponents/qtmaterialtable.h \ 99 SDK/MaterialSDK/cponents/qtmaterialtable_p.h \ 100 SDK/MaterialSDK/cponents/qtmaterialtabs.h \ 101 SDK/MaterialSDK/cponents/qtmaterialtabs_internal.h \ 102 SDK/MaterialSDK/cponents/qtmaterialtabs_p.h \ 103 SDK/MaterialSDK/cponents/qtmaterialtextfield.h \ 104 SDK/MaterialSDK/cponents/qtmaterialtextfield_internal.h \ 105 SDK/MaterialSDK/cponents/qtmaterialtextfield_p.h \ 106 SDK/MaterialSDK/cponents/qtmaterialtoggle.h \ 107 SDK/MaterialSDK/cponents/qtmaterialtoggle_internal.h \ 108 SDK/MaterialSDK/cponents/qtmaterialtoggle_p.h \ 109 widget.h 110 111 #import Material SDK(导入Material组件库的SDK) 112 LIBS += D:/qtDemo/ui/QtMaterialWidgets/SDK/MaterialSDK/staticlib/libcponents.a 113 INCLUDEPATH += D:/qtDemo/ui/QtMaterialWidgets/SDK/MaterialSDK/cponents 114 PRE_TARGETDEPS += D:/qtDemo/ui/QtMaterialWidgets/SDK/MaterialSDK/staticlib/libcponents.a 115 116 //subdirs模板告诉qmake生成一个makefile，它可以进入到特定子目录并为这个目录中的项目文件生成makefile并且为它调用make。 117 SUBDIRS += \ 118 SDK/MaterialSDK/cponents/cponents.pro

注意:这是通过qmake语句导入的Material的SDK，不同于cmake。

做完以上操作后即可，使用Material组件库，测试代码如下：

1 #ifndef WIDGET_H 2 #define WIDGET_H 3 4 #include <QWidget> 5 6 QT_BEGIN_NAMESPACE 7 namespace Ui 8 QT_END_NAMESPACE 9 10 class Widget : public QWidget 11 ; 21 #endif // WIDGET_H
1 #include "widget.h" 2 #include "ui_widget.h" 3 #include<qtmaterialtoggle.h> 4 #include<qtmaterialflatbutton.h> 5 #include<qtmaterialflatbutton_internal.h> 6 using namespace Material; 7 8 Widget::Widget(QWidget *parent) 9 : QWidget(parent) 10 , ui(new Ui::Widget) 11 26 27 Widget::~Widget() 28

测试结果如下：

上一篇：衍射极限、MTF与像素大小(2)

下一篇：Git安装教程（保姆级手把手详细图文）

---

Qt