Windows下编译qt-material

Windows下编译qml-material

---

公司新项目里选择用 QML 来做界面，这段时间一直在学习 QML 的语法和基础组件，限于 QML 目前不太成熟，没有十分丰富的控件，加上自己水平有限，做出来的东西感觉不好看，于是想找个开源的项目来学习一下。功夫不负有心人，虽然 QML 目前资料不多，但还是让我找到了 qml-material 这个优秀的开源项目。

关于qml-material

qml-material 是基于谷歌 Material 风格的开源 QML 组件，里面定制了比较丰富的基础控件，不管是用于学习还是直接用于项目，都是非常不错的选择。

Windows 10 下部分界面效果
1、 Bottom Sheet

2、日历

编译并qml-material

1：获取qml-material的源码

qnl-material项目目前托管在github上，我们可以直接在 github 上下载到其源码，链接如下：
https://github.com/papyros/qml-material

下面是其源码结构：

先打开README 看看，里面讲述了如何使用 qpm ， qmake，cmake 三种工具编译 qml-material，笔者没用过qpm，于是选择了qmke 来编译。

编译源码

打开 qt creator，打开项目 选择 src 目录下的 src.pro ，打开后切换到项目模式，构建步骤加上install 参数，如下：

构建项目：

编译器报了一个系统找不到路径 的错误，查看前面执行的动作，先是在构建目录下建立了一个名为out的文件夹，然后把 src 目录下的 qmldir 文件拷贝过去，再将该文件中的# plugin material替换为 plugin material。
看起来应该是mkdir 这个命令执行不成功，查看了一下构建目录下，也确实没有生成 out文件夹， 打开src.pro，将其中创建out 目录的步骤注释掉：

qmldir.target = $$OUT_PWD/out/qmldir#qmldir.commands = mkdir -p $$OUT_PWD/out; // 注释掉此行qmldir.commands += sed \"s/$$LITERAL_HASH plugin material/plugin material/\" $$PWD/qmldir > $$qmldir.targetqmldir.depends = $$PWD/qmldirqmldir.path = $$[QT_INSTALL_QML]/Materialqmldir.files = $$qmldir.targetqmldir.CONFIG += no_check_exist

然后自己手动在构建目录下创建一个名为out的目录：

再构建，又说'sed' 不是内部或外部命令，也不是可运行的程序或批处理文件。，打开src.pro，将其中的qmldir的sed过程也注释掉，手动帮它完成。

qmldir.target = $$OUT_PWD/out/qmldir#qmldir.commands = mkdir -p $$OUT_PWD/out;#qmldir.commands += sed \"s/$$LITERAL_HASH plugin material/plugin material/\" $$PWD/qmldir > $$qmldir.targetqmldir.depends = $$PWD/qmldirqmldir.path = $$[QT_INSTALL_QML]/Materialqmldir.files = $$qmldir.targetqmldir.CONFIG += no_check_exist

再构建，发现不再报错了，仔细看看编译输出，它将前面说的 out 目录下修改好的 qmldir 文件拷贝到了 Material 安装目录下，因为我们注释掉了自动的步骤，因此我们手动来执行一下这个步骤：
1、打开 src 目录下的 qmldir 文件，搜索# plugin material，修改为 plugin material；
2、拷贝第一步修改好的qmldir文件到 Material 的安装目录（在qt 安装目录下的 qml 目录下，比如我的qt安装在E:\Qt\Qt5.8.0，相应的路径就是：E:\Qt\Qt5.8.0\5.8\mingw53_32\qml\Material）。

至此 qml-material 源码就已经编译、安装好了，打开 qml-material 提供的 demo，赶紧试试吧。