ヤマネコでもわかる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の一番シンプルな形を掲載しました。 次はもうちょっと別の例を紹介すると思います。