【Qt学習メモ】DAY 2: QML入門

# はじめに
DAY 1から2日間空いてしまったが、続きを学習していく。

https://qiita.com/ryonakano/items/c3b8bd6703d106bc054e

# とりあえずHello Worldする
`ファイル`→`New Project`をクリックして、ウィザードに答えていく。

Qtでアプリ開発をする場合、主に以下の3種類があるらしい。

- Qt: C++で書く
- Qt Quick: QMLで書く
- Qt for Python: Pythonで書く

今回は`Qt Quick アプリケーション`を選択し、QMLを使ってアプリ開発を行う。

![Screenshot_20230101_161905.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292557/2519d370-7a9d-b80e-f09e-6844121e6ac4.png)

プロジェクト名は適当に。
`プロジェクトの規定のパスとして使用する`にチェックをつけておくと、以降このフォルダー内にプロジェクトフォルダーが作られていくので便利。

![Screenshot_20230101_161920.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292557/d622a580-042d-8c92-2b15-800b5ea14979.png)

ビルドシステムはデフォルトでCMakeが選択されているのでそのまま進む。
古いバージョンのQt Creatorを使うと、ここがqmakeになっているらしい。

![Screenshot_20230101_161926.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292557/6dd0755d-d78d-e797-c7b9-761ea509f1a3.png)

最低要求Qtバージョンは今回インストールしたQt 5.15になっていたので、そのまま次へ。

![Screenshot_20230101_161931.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292557/c3490e39-ce9a-769b-566c-76248a5790ff.png)

多言語化は今はしないので、`<none>`のまま次へ。

![Screenshot_20230101_161936.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292557/55fda9a6-e8ad-e2f3-e4d8-ef8f88bbdb97.png)

キットは、今回は`Desktop Qt 5.15.2 GCC 64bit`が選択されていればOK。

![Screenshot_20230101_161942.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292557/d1197a9f-ceb9-884f-9ec9-bfb38452d2e1.png)

Gitの初期化がここでできるようだが、今回はなしで。

![Screenshot_20230101_161954.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292557/eb157ef2-1430-8488-2d18-a01cd6c06782.png)

これでプロジェクトが作成された。
が、よく見ると警告マークがついている。

![Screenshot_20230101_162011.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292557/d2dfbdc3-c1fa-b6d0-4c67-a674ec9e16a0.png)

`全体メッセージ`のところを開いてみると、どうやらライブラリのエラーでCMakeがエラーになっているようだった。

```
Failed to find "GL/gl.h" in "/usr/include/libdrm".
```

![Screenshot_20230101_162204.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292557/57efb1c4-c89b-d3d9-0193-173ac634c824.png)

調べると、どうやら依存関係が足りないのでインストールしてくださいとのこと。

https://stackoverflow.com/questions/58787687/qt-5-12-failed-to-find-gl-gl-h-in-usr-include-libdrm

以下コマンドで依存関係をインストール。

```bash
$ sudo apt install -y mesa-common-dev libglu1-mesa-dev
```

念のためQt Creatorを再起動し、警告が消えることを確認。
画面左下の実行ボタンが押せるようになったので、押してみる。

![Screenshot_20230101_162425.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292557/4b22665b-53a9-0c18-9724-6e2b5b4b4951.png)

プロジェクトがビルドされ、アプリが起動した。

![Screenshot_20230101_162447.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292557/28687e88-2e6b-c911-ff3a-dc46e35d986a.png)

# QMLを書いてみる
`編集`→からプロジェクト内のファイルを覗いてみると、大きく分けて以下の3つから構成されていることがわかる。

![Screenshot_20230101_162605.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292557/3d2b8327-faf9-c55a-3deb-776729a0353e.png)

- CMakeList.txt: CMakeのビルドファイル
- main.cpp: main関数があり、QMLファイルを読み込んでいる
- main.qml: QMLファイル

ウィンドウにウィジェットを追加するには、このQMLファイルにコードを書いていく。
`main.qml`に以下の変更を行い、再度ビルドと実行を行う。

```diff
 import QtQuick 2.15
 import QtQuick.Window 2.15

 Window {
     width: 640
     height: 480
     visible: true
     title: qsTr("Hello World")
+
+    Text {
+        id: text
+        text: qsTr("Hello Qt World!")
+    }
 }
```

すると、指定したテキストが追加された。

![Screenshot_20230101_162700.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292557/e2e56ed8-dbdd-f187-3ecc-29adaea881fd.png)

このように、QMLはSCSSのように要素単位でコードを書いていく。

# アンカーレイアウト
さて、先程のテキストをウィンドウの中央に配置したいとする。

![Screenshot_20230101_200334.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292557/99836188-6ca5-1ed3-499c-854a0a77f931.png)

GTKであれば以下のようなコードを書く。

```vala
var text = new Gtk.Label ("Hello GTK Wolrd!") {
    halign = Gtk.Align.CENTER,
    valign = Gtk.Align.CENTER
};
```

QMLの場合、`anchors.位置: ほかのオブジェクトのID.位置`と書くことで、あるオブジェクトをほかのオブジェクトに合わせた位置にできるようだ。

```diff
 import QtQuick 2.15
 import QtQuick.Window 2.15

 Window {
     width: 640
     height: 480
     visible: true
     title: qsTr("Hello World")

    Text {
        id: text
        text: qsTr("Hello Qt World!")
+       anchors.horizontalCenter: parent.horizontalCenter
+       anchors.verticalCenter: parent.verticalCenter
    }
```

以下のQt公式サイトにある図がとてもわかりやすい。

https://www.qt.io/ja-jp/blog/2011/01/06/qml-layout

中途半端にってしまったが、明日以降レイアウトについて触れていきたい。