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.target
qmldir.depends = $$PWD/qmldir
qmldir.path = $$[QT_INSTALL_QML]/Material
qmldir.files = $$qmldir.target
qmldir.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.target
qmldir.depends = $$PWD/qmldir
qmldir.path = $$[QT_INSTALL_QML]/Material
qmldir.files = $$qmldir.target
qmldir.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，赶紧试试吧。