一、qt-material-widget组件库介绍
该组件库拥有炫酷的Material风格的组件，并且该组件库基于QtWidget开发的，目前实现了大约20个Material风格的组件，下面教大家如何编译该组件库，并将这个组件库运用到自己的项目中。
二、编译qt-material-widget组件库
下载解压后的文件目录：
点击qt-material-widgets.pro的项目工程文件，选择Release模式并且通过mingw64位的编译器进行编译，就会得到一个以.a结尾的静态库文件:
注意:因为我使用的是mingw模式的编译器，所以它会采用gcc进行编译，得到的静态库文件会以.a结尾。如果采用msvc模式的编译器，它就会得到以.lib结尾的静态库文件。
该组件库的项目工程分析:
如上图所示:components是封装组件的目录，examples是对封装组件的使用，叫我们如何使用这些组件到我们的项目中。
该组件库目前封装组件的效果图如下：
| App Bar | QtMaterialAppBar |
|
|
|
| Auto Complete | QtMaterialAutoComplete |
|
|
|
| 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 |
|
|
|
三、使用qt-material-widget组件库
使用qt-material-widgets组件库的流程如下:
在项目的目录下创建名为SDK的文件夹。
然后在SDK文件夹下创建名为MaterialSDK的文件夹。
然后在MaterialSDK的文件夹下创建名为staticlib和components的文件夹。
最后将libcomponents.a复制到staticlib文件夹下，将组件库中的components的代码和资源复制到components文件夹下。
做完上述操作后，进入pro文件中，输入以下命令：
1 //导入组件库的源文件
2 SOURCES += \
3 SDK/MaterialSDK/components/qtmaterialappbar.cpp \
4 SDK/MaterialSDK/components/qtmaterialautocomplete.cpp \
5 SDK/MaterialSDK/components/qtmaterialautocomplete_internal.cpp \
6 SDK/MaterialSDK/components/qtmaterialavatar.cpp \
7 SDK/MaterialSDK/components/qtmaterialbadge.cpp \
8 SDK/MaterialSDK/components/qtmaterialcheckbox.cpp \
9 SDK/MaterialSDK/components/qtmaterialcircularprogress.cpp \
10 SDK/MaterialSDK/components/qtmaterialcircularprogress_internal.cpp \
11 SDK/MaterialSDK/components/qtmaterialdialog.cpp \
12 SDK/MaterialSDK/components/qtmaterialdialog_internal.cpp \
13 SDK/MaterialSDK/components/qtmaterialdrawer.cpp \
14 SDK/MaterialSDK/components/qtmaterialdrawer_internal.cpp \
15 SDK/MaterialSDK/components/qtmaterialfab.cpp \
16 SDK/MaterialSDK/components/qtmaterialflatbutton.cpp \
17 SDK/MaterialSDK/components/qtmaterialflatbutton_internal.cpp \
18 SDK/MaterialSDK/components/qtmaterialiconbutton.cpp \
19 SDK/MaterialSDK/components/qtmateriallist.cpp \
20 SDK/MaterialSDK/components/qtmateriallistitem.cpp \
21 SDK/MaterialSDK/components/qtmaterialmenu.cpp \
22 SDK/MaterialSDK/components/qtmaterialmenu_internal.cpp \
23 SDK/MaterialSDK/components/qtmaterialpaper.cpp \
24 SDK/MaterialSDK/components/qtmaterialprogress.cpp \
25 SDK/MaterialSDK/components/qtmaterialprogress_internal.cpp \
26 SDK/MaterialSDK/components/qtmaterialradiobutton.cpp \
27 SDK/MaterialSDK/components/qtmaterialraisedbutton.cpp \
28 SDK/MaterialSDK/components/qtmaterialscrollbar.cpp \
29 SDK/MaterialSDK/components/qtmaterialscrollbar_internal.cpp \
30 SDK/MaterialSDK/components/qtmaterialslider.cpp \
31 SDK/MaterialSDK/components/qtmaterialslider_internal.cpp \
32 SDK/MaterialSDK/components/qtmaterialsnackbar.cpp \
33 SDK/MaterialSDK/components/qtmaterialsnackbar_internal.cpp \
34 SDK/MaterialSDK/components/qtmaterialtable.cpp \
35 SDK/MaterialSDK/components/qtmaterialtabs.cpp \
36 SDK/MaterialSDK/components/qtmaterialtabs_internal.cpp \
37 SDK/MaterialSDK/components/qtmaterialtextfield.cpp \
38 SDK/MaterialSDK/components/qtmaterialtextfield_internal.cpp \
39 SDK/MaterialSDK/components/qtmaterialtoggle.cpp \
40 SDK/MaterialSDK/components/qtmaterialtoggle_internal.cpp \
41 main.cpp \
42 widget.cpp
43
44 //导入组件库的头文件
45 HEADERS += \
46 SDK/MaterialSDK/components/qtmaterialappbar.h \
47 SDK/MaterialSDK/components/qtmaterialappbar_p.h \
48 SDK/MaterialSDK/components/qtmaterialautocomplete.h \
49 SDK/MaterialSDK/components/qtmaterialautocomplete_internal.h \
50 SDK/MaterialSDK/components/qtmaterialautocomplete_p.h \
51 SDK/MaterialSDK/components/qtmaterialavatar.h \
52 SDK/MaterialSDK/components/qtmaterialavatar_p.h \
53 SDK/MaterialSDK/components/qtmaterialbadge.h \
54 SDK/MaterialSDK/components/qtmaterialbadge_p.h \
55 SDK/MaterialSDK/components/qtmaterialcheckbox.h \
56 SDK/MaterialSDK/components/qtmaterialcheckbox_p.h \
57 SDK/MaterialSDK/components/qtmaterialcircularprogress.h \
58 SDK/MaterialSDK/components/qtmaterialcircularprogress_internal.h \
59 SDK/MaterialSDK/components/qtmaterialcircularprogress_p.h \
60 SDK/MaterialSDK/components/qtmaterialdialog.h \
61 SDK/MaterialSDK/components/qtmaterialdialog_internal.h \
62 SDK/MaterialSDK/components/qtmaterialdialog_p.h \
63 SDK/MaterialSDK/components/qtmaterialdrawer.h \
64 SDK/MaterialSDK/components/qtmaterialdrawer_internal.h \
65 SDK/MaterialSDK/components/qtmaterialdrawer_p.h \
66 SDK/MaterialSDK/components/qtmaterialfab.h \
67 SDK/MaterialSDK/components/qtmaterialfab_p.h \
68 SDK/MaterialSDK/components/qtmaterialflatbutton.h \
69 SDK/MaterialSDK/components/qtmaterialflatbutton_internal.h \
70 SDK/MaterialSDK/components/qtmaterialflatbutton_p.h \
71 SDK/MaterialSDK/components/qtmaterialiconbutton.h \
72 SDK/MaterialSDK/components/qtmaterialiconbutton_p.h \
73 SDK/MaterialSDK/components/qtmateriallist.h \
74 SDK/MaterialSDK/components/qtmateriallist_p.h \
75 SDK/MaterialSDK/components/qtmateriallistitem.h \
76 SDK/MaterialSDK/components/qtmateriallistitem_p.h \
77 SDK/MaterialSDK/components/qtmaterialmenu.h \
78 SDK/MaterialSDK/components/qtmaterialmenu_internal.h \
79 SDK/MaterialSDK/components/qtmaterialmenu_p.h \
80 SDK/MaterialSDK/components/qtmaterialpaper.h \
81 SDK/MaterialSDK/components/qtmaterialpaper_p.h \
82 SDK/MaterialSDK/components/qtmaterialprogress.h \
83 SDK/MaterialSDK/components/qtmaterialprogress_internal.h \
84 SDK/MaterialSDK/components/qtmaterialprogress_p.h \
85 SDK/MaterialSDK/components/qtmaterialradiobutton.h \
86 SDK/MaterialSDK/components/qtmaterialradiobutton_p.h \
87 SDK/MaterialSDK/components/qtmaterialraisedbutton.h \
88 SDK/MaterialSDK/components/qtmaterialraisedbutton_p.h \
89 SDK/MaterialSDK/components/qtmaterialscrollbar.h \
90 SDK/MaterialSDK/components/qtmaterialscrollbar_internal.h \
91 SDK/MaterialSDK/components/qtmaterialscrollbar_p.h \
92 SDK/MaterialSDK/components/qtmaterialslider.h \
93 SDK/MaterialSDK/components/qtmaterialslider_internal.h \
94 SDK/MaterialSDK/components/qtmaterialslider_p.h \
95 SDK/MaterialSDK/components/qtmaterialsnackbar.h \
96 SDK/MaterialSDK/components/qtmaterialsnackbar_internal.h \
97 SDK/MaterialSDK/components/qtmaterialsnackbar_p.h \
98 SDK/MaterialSDK/components/qtmaterialtable.h \
99 SDK/MaterialSDK/components/qtmaterialtable_p.h \
100 SDK/MaterialSDK/components/qtmaterialtabs.h \
101 SDK/MaterialSDK/components/qtmaterialtabs_internal.h \
102 SDK/MaterialSDK/components/qtmaterialtabs_p.h \
103 SDK/MaterialSDK/components/qtmaterialtextfield.h \
104 SDK/MaterialSDK/components/qtmaterialtextfield_internal.h \
105 SDK/MaterialSDK/components/qtmaterialtextfield_p.h \
106 SDK/MaterialSDK/components/qtmaterialtoggle.h \
107 SDK/MaterialSDK/components/qtmaterialtoggle_internal.h \
108 SDK/MaterialSDK/components/qtmaterialtoggle_p.h \
109 widget.h
110
111 #import Material SDK(导入Material组件库的SDK)
112 LIBS += D:/qtDemo/ui/QtMaterialWidgets/SDK/MaterialSDK/staticlib/libcomponents.a
113 INCLUDEPATH += D:/qtDemo/ui/QtMaterialWidgets/SDK/MaterialSDK/components
114 PRE_TARGETDEPS += D:/qtDemo/ui/QtMaterialWidgets/SDK/MaterialSDK/staticlib/libcomponents.a
115
116 //subdirs模板告诉qmake生成一个makefile，它可以进入到特定子目录并为这个目录中的项目文件生成makefile并且为它调用make。
117 SUBDIRS += \
118 SDK/MaterialSDK/components/components.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 { class Widget; }
8 QT_END_NAMESPACE
9
10 class Widget : public QWidget
11 {
12 Q_OBJECT
13
14 public:
15 Widget(QWidget *parent = nullptr);
16 ~Widget();
17
18 private:
19 Ui::Widget *ui;
20 };
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 {
12 ui->setupUi(this);
13 QtMaterialToggle *toggle=new QtMaterialToggle(this);
14 QtMaterialFlatButton *btn=new QtMaterialFlatButton(this);
15 btn->setForegroundColor(QColor(0,198,231));
16 btn->setGeometry(100,100,200,40);
17 btn->setText("I am flat btn");
18 btn->applyPreset(Material::FlatPreset);
19 QFont font;
20 font.setFamily("Calibri Light");
21 font.setPixelSize(25);
22 btn->setFont(font);
23
24
25 }
26
27 Widget::~Widget()
28 {
29 delete ui;
30 }
测试结果如下：
