QtWidget使用Material风格的组件库

一、qt-material-widget组件库介绍

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

二、编译qt-material-widget组件库

该组件库的下载地址:qt-material-widgets
下载解压后的文件目录：

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

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

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

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

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

App Bar	QtMaterialAppBar
Auto Complete	QtMaterialAutoComplete
Avatar	QtMaterialAvatar
Badge	QtMaterialBadge
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文件中，输入以下命令：

//导入组件库的源文件
SOURCES += \
    SDK/MaterialSDK/components/qtmaterialappbar.cpp \
    SDK/MaterialSDK/components/qtmaterialautocomplete.cpp \
    SDK/MaterialSDK/components/qtmaterialautocomplete_internal.cpp \
    SDK/MaterialSDK/components/qtmaterialavatar.cpp \
    SDK/MaterialSDK/components/qtmaterialbadge.cpp \
    SDK/MaterialSDK/components/qtmaterialcheckbox.cpp \
    SDK/MaterialSDK/components/qtmaterialcircularprogress.cpp \
    SDK/MaterialSDK/components/qtmaterialcircularprogress_internal.cpp \
    SDK/MaterialSDK/components/qtmaterialdialog.cpp \
    SDK/MaterialSDK/components/qtmaterialdialog_internal.cpp \
    SDK/MaterialSDK/components/qtmaterialdrawer.cpp \
    SDK/MaterialSDK/components/qtmaterialdrawer_internal.cpp \
    SDK/MaterialSDK/components/qtmaterialfab.cpp \
    SDK/MaterialSDK/components/qtmaterialflatbutton.cpp \
    SDK/MaterialSDK/components/qtmaterialflatbutton_internal.cpp \
    SDK/MaterialSDK/components/qtmaterialiconbutton.cpp \
    SDK/MaterialSDK/components/qtmateriallist.cpp \
    SDK/MaterialSDK/components/qtmateriallistitem.cpp \
    SDK/MaterialSDK/components/qtmaterialmenu.cpp \
    SDK/MaterialSDK/components/qtmaterialmenu_internal.cpp \
    SDK/MaterialSDK/components/qtmaterialpaper.cpp \
    SDK/MaterialSDK/components/qtmaterialprogress.cpp \
    SDK/MaterialSDK/components/qtmaterialprogress_internal.cpp \
    SDK/MaterialSDK/components/qtmaterialradiobutton.cpp \
    SDK/MaterialSDK/components/qtmaterialraisedbutton.cpp \
    SDK/MaterialSDK/components/qtmaterialscrollbar.cpp \
    SDK/MaterialSDK/components/qtmaterialscrollbar_internal.cpp \
    SDK/MaterialSDK/components/qtmaterialslider.cpp \
    SDK/MaterialSDK/components/qtmaterialslider_internal.cpp \
    SDK/MaterialSDK/components/qtmaterialsnackbar.cpp \
    SDK/MaterialSDK/components/qtmaterialsnackbar_internal.cpp \
    SDK/MaterialSDK/components/qtmaterialtable.cpp \
    SDK/MaterialSDK/components/qtmaterialtabs.cpp \
    SDK/MaterialSDK/components/qtmaterialtabs_internal.cpp \
    SDK/MaterialSDK/components/qtmaterialtextfield.cpp \
    SDK/MaterialSDK/components/qtmaterialtextfield_internal.cpp \
    SDK/MaterialSDK/components/qtmaterialtoggle.cpp \
    SDK/MaterialSDK/components/qtmaterialtoggle_internal.cpp \
    main.cpp \
    widget.cpp

//导入组件库的头文件
HEADERS += \
    SDK/MaterialSDK/components/qtmaterialappbar.h \
    SDK/MaterialSDK/components/qtmaterialappbar_p.h \
    SDK/MaterialSDK/components/qtmaterialautocomplete.h \
    SDK/MaterialSDK/components/qtmaterialautocomplete_internal.h \
    SDK/MaterialSDK/components/qtmaterialautocomplete_p.h \
    SDK/MaterialSDK/components/qtmaterialavatar.h \
    SDK/MaterialSDK/components/qtmaterialavatar_p.h \
    SDK/MaterialSDK/components/qtmaterialbadge.h \
    SDK/MaterialSDK/components/qtmaterialbadge_p.h \
    SDK/MaterialSDK/components/qtmaterialcheckbox.h \
    SDK/MaterialSDK/components/qtmaterialcheckbox_p.h \
    SDK/MaterialSDK/components/qtmaterialcircularprogress.h \
    SDK/MaterialSDK/components/qtmaterialcircularprogress_internal.h \
    SDK/MaterialSDK/components/qtmaterialcircularprogress_p.h \
    SDK/MaterialSDK/components/qtmaterialdialog.h \
    SDK/MaterialSDK/components/qtmaterialdialog_internal.h \
    SDK/MaterialSDK/components/qtmaterialdialog_p.h \
    SDK/MaterialSDK/components/qtmaterialdrawer.h \
    SDK/MaterialSDK/components/qtmaterialdrawer_internal.h \
    SDK/MaterialSDK/components/qtmaterialdrawer_p.h \
    SDK/MaterialSDK/components/qtmaterialfab.h \
    SDK/MaterialSDK/components/qtmaterialfab_p.h \
    SDK/MaterialSDK/components/qtmaterialflatbutton.h \
    SDK/MaterialSDK/components/qtmaterialflatbutton_internal.h \
    SDK/MaterialSDK/components/qtmaterialflatbutton_p.h \
    SDK/MaterialSDK/components/qtmaterialiconbutton.h \
    SDK/MaterialSDK/components/qtmaterialiconbutton_p.h \
    SDK/MaterialSDK/components/qtmateriallist.h \
    SDK/MaterialSDK/components/qtmateriallist_p.h \
    SDK/MaterialSDK/components/qtmateriallistitem.h \
    SDK/MaterialSDK/components/qtmateriallistitem_p.h \
    SDK/MaterialSDK/components/qtmaterialmenu.h \
    SDK/MaterialSDK/components/qtmaterialmenu_internal.h \
    SDK/MaterialSDK/components/qtmaterialmenu_p.h \
    SDK/MaterialSDK/components/qtmaterialpaper.h \
    SDK/MaterialSDK/components/qtmaterialpaper_p.h \
    SDK/MaterialSDK/components/qtmaterialprogress.h \
    SDK/MaterialSDK/components/qtmaterialprogress_internal.h \
    SDK/MaterialSDK/components/qtmaterialprogress_p.h \
    SDK/MaterialSDK/components/qtmaterialradiobutton.h \
    SDK/MaterialSDK/components/qtmaterialradiobutton_p.h \
    SDK/MaterialSDK/components/qtmaterialraisedbutton.h \
    SDK/MaterialSDK/components/qtmaterialraisedbutton_p.h \
    SDK/MaterialSDK/components/qtmaterialscrollbar.h \
    SDK/MaterialSDK/components/qtmaterialscrollbar_internal.h \
    SDK/MaterialSDK/components/qtmaterialscrollbar_p.h \
    SDK/MaterialSDK/components/qtmaterialslider.h \
    SDK/MaterialSDK/components/qtmaterialslider_internal.h \
    SDK/MaterialSDK/components/qtmaterialslider_p.h \
    SDK/MaterialSDK/components/qtmaterialsnackbar.h \
    SDK/MaterialSDK/components/qtmaterialsnackbar_internal.h \
    SDK/MaterialSDK/components/qtmaterialsnackbar_p.h \
    SDK/MaterialSDK/components/qtmaterialtable.h \
    SDK/MaterialSDK/components/qtmaterialtable_p.h \
    SDK/MaterialSDK/components/qtmaterialtabs.h \
    SDK/MaterialSDK/components/qtmaterialtabs_internal.h \
    SDK/MaterialSDK/components/qtmaterialtabs_p.h \
    SDK/MaterialSDK/components/qtmaterialtextfield.h \
    SDK/MaterialSDK/components/qtmaterialtextfield_internal.h \
    SDK/MaterialSDK/components/qtmaterialtextfield_p.h \
    SDK/MaterialSDK/components/qtmaterialtoggle.h \
    SDK/MaterialSDK/components/qtmaterialtoggle_internal.h \
    SDK/MaterialSDK/components/qtmaterialtoggle_p.h \
    widget.h

#import Material SDK(导入Material组件库的SDK)
LIBS += D:/qtDemo/ui/QtMaterialWidgets/SDK/MaterialSDK/staticlib/libcomponents.a
INCLUDEPATH += D:/qtDemo/ui/QtMaterialWidgets/SDK/MaterialSDK/components
PRE_TARGETDEPS += D:/qtDemo/ui/QtMaterialWidgets/SDK/MaterialSDK/staticlib/libcomponents.a

//subdirs模板告诉qmake生成一个makefile，它可以进入到特定子目录并为这个目录中的项目文件生成makefile并且为它调用make。
SUBDIRS += \
    SDK/MaterialSDK/components/components.pro

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

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

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private:
    Ui::Widget *ui;
};
#endif // WIDGET_H

#include "widget.h"
#include "ui_widget.h"
#include<qtmaterialtoggle.h>
#include<qtmaterialflatbutton.h>
#include<qtmaterialflatbutton_internal.h>
using namespace Material;

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    QtMaterialToggle *toggle=new QtMaterialToggle(this);
    QtMaterialFlatButton *btn=new QtMaterialFlatButton(this);
    btn->setForegroundColor(QColor(0,198,231));
    btn->setGeometry(100,100,200,40);
    btn->setText("I am flat btn");
    btn->applyPreset(Material::FlatPreset);
    QFont font;
    font.setFamily("Calibri Light");
    font.setPixelSize(25);
    btn->setFont(font);


}

Widget::~Widget()
{
    delete ui;
}

测试结果如下：