ヤマネコでもわかるQtQuick(2)-コンパイルと簡単なデザイン
前回の続きです。 開発環境は導入できたとして,とりあえず画面を表示させるところまで進めます。
まずは
何も考えずに次のファイルを準備してください。
// main.cpp #include <QApplication> #include <QQmlApplicationEngine> #include <QtQml> #include <QTextCodec> #include <QQuickView> int main(int argc, char **argv){ QApplication app(argc, argv); QTextCodec::setCodecForLocale(QTextCodec::codecForLocale()); QQmlApplicationEngine engine("main.qml"); return app.exec(); }
// main.qml import QtQuick 2.0 import QtQuick.Controls 1.0 ApplicationWindow{ id: applicationWindow1 width: 800 minimumWidth: 640 height: 600 minimumHeight: 480 color: "white" title: qsTr("QtSample") visible: true Rectangle { x: 560; y: 180 width: 180; height: 150 anchors.horizontalCenterOffset: 2 anchors.horizontalCenter: parent.horizontalCenter color: "black" radius: 5 Label { x: 10; y: 10 id: label font.pixelSize: 18 text: qsTr("Label") } Button { id: button x:30; y:40 width: 120 text: "Button" onClicked: textarea.text += combo.currentText + "\n" } ComboBox { id: combo x:100; y:80 width: 50 model: [1, 2, 3, 4, 5] } TextArea { id: textarea text: "Text Area\n" x: 40 y: 180 anchors.horizontalCenterOffset: 2 anchors.horizontalCenter: parent.horizontalCenter } } }
そして同じディレクトリで次のコマンドを打ちます。
qmake -project
.proファイルが一つ生成されたと思うので,次の行を足します。
QT += qml quick widgets gui
これでよいでしょう。 続いて次のコマンドでビルドします。
qmake make
補足:Windowsを使用した場合,QtCreatorから.proファイルを開き,そのままビルドが可能です。
さて,このプログラムを実行するとこんな感じのウインドウが開きました。 そしてボタンをクリックするたびテキストボックスの中に,コンボボックスで選択した数字が追記されていきます。
今回は初めての例と言うことで簡単な物を用意しました。 ざっと補足していきます。
補足
main.cpp
- QTextCodec::setCodecForLocale(QTextCodec::codecForLocale()); 文字コードを設定します。日本語の文字化け対策。
- QQmlApplicationEngine engine("main.qml"); QMLのロードをします。
main.qml
- onClicked: textarea.text += combo.currentText + "\n" ボタンがクリックされたときの動作です。 javascriptとしてスクリプトを書くことが出来ます。 今回の場合,id:textareaのtext属性に,コンボボックスの選択中テキストと改行文字を追記しています。 QMLで扱えるタイプは公式ドキュメントが参考になります。 All QML Types | Qt 5.5
とりあえず,QMLの一番シンプルな形を掲載しました。 次はもうちょっと別の例を紹介すると思います。