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，趕緊試試吧。