一、qtmaterialwidget组件库介绍
该组件库拥有炫酷的Material风格的组件，并且该组件库基于QtWidget开发的，目前实现了大约20个Material风格的组件，下面教大家如何编译该组件库，并将这个组件库运用到自己的项目中。
二、编译qtmaterialwidget组件库
下载解压后的文件目录：
点击qtmaterialwidgets.pro的项目工程文件，选择Release模式并且通过mingw64位的编译器进行编译，就会得到一个以.a结尾的静态库文件:
注意:因为我使用的是mingw模式的编译器，所以它会采用gcc进行编译，得到的静态库文件会以.a结尾。如果采用msvc模式的编译器，它就会得到以.lib结尾的静态库文件。
该组件库的项目工程分析:
如上图所示:cponents是封装组件的目录，examples是对封装组件的使用，叫我们如何使用这些组件到我们的项目中。
该组件库目前封装组件的效果图如下：
| Auto Cplete |
QtMaterialAutoCplete |
|
|
| Check Box |
QtMaterialCheckBox |
|
|
| Circular Progress |
QtMaterialCircularProgress |
|
|
| FAB |
QtMaterialFloatingActionButton |
|
|
| Flat Button |
QtMaterialFlatButton |
|
|
| Icon Button |
QtMaterialIconButton |
|
|
| Progress |
QtMaterialProgress |
|
|
| Radio Button |
QtMaterialRadioButton |
|
|
| Raised Button |
QtMaterialRaisedButton |
|
|
、
| Scroll Bar |
QtMaterialScrollBar |
|
|
| Snackbar |
QtMaterialSnackBar |
|
|
| Text Field |
QtMaterialTextField |
|
|
三、使用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
