目录

Qt开源控件库qt-material-widgets的编译及使用

Qt开源控件库(qt-material-widgets)的编译及使用

项目简介

qt-material-widgets是一个基于 Qt 小部件的 Material Design 规范实现。

项目地址

项目地址:

本地构建环境

Win11 家庭中文版

VS2019

Qt5.15.2 (MSVC2019)

本地构建流程

克隆后的目录结构如图:

https://i-blog.csdnimg.cn/direct/52bd769517d14ce581e2ecc5f1f585d8.png

直接使用Qt Creator打开.pro(因为我要用在VS项目中,因此这里Kit选择MSVC2019):

https://i-blog.csdnimg.cn/direct/f162c755c5ab402ea41c6b3b3d26ed87.png

直接跑release版本:

https://i-blog.csdnimg.cn/direct/f8b7ad687ba64ab68bf1036cd59882c0.png

报错: libcomponents.a does not exists.

https://i-blog.csdnimg.cn/direct/f481a096bdb3440ea396041a2cca875f.png

这是因为.a是Linux的库文件格式,在Windows平台上对应的.lib文件格式,生成的库文件名称也有稍许区别。

https://i-blog.csdnimg.cn/direct/ad7854e8b31349dba6bb567a6c47e5a6.png

这里打开examples.pro,将libcomponents.a 改成components .lib,重新编译即可:

https://i-blog.csdnimg.cn/direct/adfd66e0d66b430593c5519658a3866f.png

可以看到示例程序如下:

https://i-blog.csdnimg.cn/direct/682010a115bf47ff8d09cf765aba7c3a.png

https://i-blog.csdnimg.cn/direct/ae22f3ab597f4f08a3c61860b2d19db6.png

实际应用

如何在自己的项目中,使用qt-material-widgets控件库?

通过上面编译可以知道,控件库主要来源于components这个静态库项目,参考examples项目使用控件库的方式:

①添加.h头文件

②添加.lib库文件

头文件

打开components项目目录:

https://i-blog.csdnimg.cn/direct/e50effd8a7f84ff58ea7317920674d2e.png

将.h文件单独复制出来(注意只需复制.h即可,无需复制_p.h)。

这个库使用pimpl模式实现,可以隐藏实现细节(所有私有的非虚成员),且可减少代码依赖和编译时间,具体介绍可见:

这里单独新建了一个目录(后续直接将该目录拷贝到自己项目的3方库路径下即可):

https://i-blog.csdnimg.cn/direct/cc33c6bae42b479c9614a576e7c38a4b.png

https://i-blog.csdnimg.cn/direct/5af89b78ecf24cc9ab1e5d2ad40a0f26.png

include里面的目录结构尽量和components里面的保持一致:

https://i-blog.csdnimg.cn/direct/3517d1c8aa284795b48650f3b1a8b5a6.png

lib目录中拷贝components项目生成的components.lib:

https://i-blog.csdnimg.cn/direct/13b105bd712f4413927d23af01945666.png

直接将该目录拷贝到自己项目(这里以我的HelloQt5_15_2项目为例)的3方库路径下:

https://i-blog.csdnimg.cn/direct/c8c14a399ff345da87f3fe1800b9c289.png

个人习惯用VS2019 + Qt VS Tools开发,在VS2019中打开我的HelloQt5_15_2项目:

配置附件包含目录:

https://i-blog.csdnimg.cn/direct/e9411d70f332495a92c5ef2f02d9bf1b.png

配置库目录:

https://i-blog.csdnimg.cn/direct/8695f907ab0342b3bbe9a306ca89c8f2.png

添加静态库文件:

https://i-blog.csdnimg.cn/direct/6c5287b40b694543aed1464ee675b5e2.png

在控件中使用控件库控件(这里以使用autocomplete为例):

因为上面添加了头文件附件包含目录,这这里直接包含autocomplete控件头文件即可使用:

#include "mainwidget.h"
#include "ui_mainwidget.h"

#include "qtmaterialautocomplete.h"

MainWidget::MainWidget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::MainWidget)
{
    ui->setupUi(this);

    QtMaterialAutoComplete*  pAutocomplete = new QtMaterialAutoComplete(this);
    pAutocomplete->move(100, 100);
    QStringList states =
    { "Alabama"
    , "Alaska"
    , "American Samoa"
    , "Arizona"
    , "Arkansas"
    , "California"
    , "Colorado"
    , "Connecticut"
    , "Delaware"
    , "District of Columbia"
    , "Florida"
    , "Georgia"
    , "Guam"
    , "Hawaii"
    , "Idaho"
    , "Illinois"
    , "Indiana"
    , "Iowa"
    , "Kansas"
    , "Kentucky"
    , "Louisiana"
    , "Maine"
    , "Maryland"
    , "Massachusetts"
    , "Michigan"
    , "Minnesota"
    , "Mississippi"
    , "Missouri"
    , "Montana"
    , "Nebraska"
    , "Nevada"
    , "New Hampshire"
    , "New Jersey"
    , "New Mexico"
    , "New York"
    , "North Carolina"
    , "North Dakota"
    , "Northern Marianas Islands"
    , "Ohio"
    , "Oklahoma"
    , "Oregon"
    , "Pennsylvania"
    , "Puerto Rico"
    , "Rhode Island"
    , "South Carolina"
    , "South Dakota"
    , "Tennessee"
    , "Texas"
    , "Utah"
    , "Vermont"
    , "Virginia"
    , "Virgin Islands"
    , "Washington"
    , "West Virginia"
    , "Wisconsin"
    , "Wyoming"
    };

    pAutocomplete->setDataSource(states);
}

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

https://i-blog.csdnimg.cn/direct/059443ae759f41cd8a35a4c9bc662a10.png

编译运行验证:

https://i-blog.csdnimg.cn/direct/714955b82fde4977b1ae35a5984d3a47.png

注意事项

①在Windows上编译,需手动修改下examples.pro中对静态库文件的引用

②手动拷贝头文件时只需拷贝.h即可(无需拷_p.h),同时目录结构尽量哈components项目目录保持一致。

③编译控件库的版本,应和实际使用控件库的项目的编译器版本对应。如:VS2019(MSVC2019)编译的components.lib,无法放在VS2015 (MSVC2015)中使用,因为库文件和项目的版本不一致。

总结

综上,本文通过简单示例,详细介绍了自己克隆并编译开源控件库,然后应用在自己的项目中的完整流程及注意事项。

通过该开源控件库项目,可学到动态库项目的编译和使用以及pimpl设计模式在项目中的实际应用,相信对实际工作会有一定的帮助。