Qt5のqmlfirststepsのCreating QML Applications with Controlsの項目が罠っぽいなーというつぶやき

QML入門したい。そう思って何回も挫折しちゃっているnekomatuです。
イチから学ぶべく、できるだけ公式の情報を元に学ぼうとしています。
その中でううん！？ってなった部分を書きました。

公式のQML入門ページ
First Steps with QML

要約

• QtQuick.Controlsにはバージョン１とバージョン２が存在する。
• QtCreatorで新規プロジェクトの作成でQtQuickControls2Applicationを生成した時の雛形はバージョン２を使ったものになる。
• ところが、QMLの最初に読むページは依然としてバージョン１を使った説明がなされている。
• 入門者にはバージョン１とバージョン２の違いが分かりにくくややこしいと思われる。

電子書籍でちょうどいい同人誌があるので、共有します。
技術書典2で「Qt Quickを使いこなすクロスプラットフォームUIプログラミング2 」を頒布します - 理ろぐ


概ね全て読む必要がありますが、Creating QML Applications with Controlsの章は要注意です。
このwith Controlsというのは、正式にはQt Quick Controlsを指しています。
Qt Quick Controlsにはややこしいことに大まかに２つのバリエーションが存在します。
次のページに整理されて記載されています。
https://doc.qt.io/qt-5/qtquickcontrols2-differences.html
私が理解しているざっくりしたものは次のとおりです。

• Qt Quick Controls
Qt5.1から利用できるようになったものです。 これを使うとWindows/Mac/Linuxなどのネイティブアプリのような見た目のアプリをQMLで書くことができます。 https://doc.qt.io/qt-5/qtquickcontrols-index.html
• Qt Quick Controls2
Qt5.7から利用できるようになったバージョン2です。 しかしながら、なんと無印（ここでは1と表記します）の単純なバージョンアップではありません。 ネイティブアプリという方向性は一旦やめて、スマホ・タブレットライクなUIを簡単に構築できるような方向性で作られており、 またデザインレイアウトを自前で変更しやすいようになっています。 このように1とは思想がだいぶ違うので注意が必要です。 https://doc.qt.io/qt-5/qtquickcontrols2-index.html

さて、注意というのはQtCreator4.3で新規プロジェクト生成したときの雛形はControls2の方で生成されています。
これはimport QtQuick.Controls 2.2ってなっていることから分かります。
一方でFirstStepsのページを見ると、import QtQuick.Controls 1.2となっています。

ApplicationWindowエレメントですが、これはimport QtQuick.Controlsに含まれているエレメントです。
その後ろにつくバージョンによって読み出される実装は全く別物。ということになるわけですね。

FirstStepsの写経をしているとMenuBarというエレメントがあるのですが、先の違いをみると2には含まれていないと書かれています。
つまり、import QtQuick.Controls 2.2　の状態でMenuBarエレメントは使えない！ガッデム…。
おとなしく、importを一層のこと1に切り替えるべきか悩むところですが、ここでは生成されている雛形を崩さずに2を使いたいと思います。
MenuBarの対応については、先のそれぞれの違いのページに書いてあるとおり、Alternatives（代替手段）を使ってみたいと思います。
具体的には次のとおりです。
import Qt.labs.platfrom 1.0 とMenuBarがそれです。
シンタックスハイライトがないので、超醜いと思いますが

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

import Qt.labs.platform 1.0

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

MenuBar{
Menu{
title: "&File"
}
Menu{
title: "&Edit"
}
}

}

FirstStepsに戻って写経すると、次のようになって
Openボタンを押すとコンソールに文字が出て、Exitボタンを押すとプログラムを終了させることができるようになります。

MenuBar{
Menu{
title: "&File"
MenuItem {
text: qsTr("&Open")
onTriggered: console.log("Open action triggered");
}
MenuItem {
text: qsTr("Exit")
onTriggered: Qt.quit();
}
}
Menu{
title: "&Edit"
}
}