qml チュートリアル
qmlを使い始める

備考

バージョン

インストール

QMLには、クロスプラットフォームアプリケーションフレームワークQtの新しいバージョンが付属しています。 ダウンロードセクションでQtの最新バージョンを見つけることができます。

Qt Creator IDEで新しいQMLプロジェクトを作成するには、「ファイル - >新規...」を選択し、「アプリケーション」で「Qtクイックアプリケーション」を選択します。 「選択」をクリックすると、このプロジェクトのパスを設定して設定できるようになりました。 「次へ」を押すと、使用するコンポーネントを選択できます。不明な場合は、デフォルトのままにして「次へ」をクリックします。次の2つのステップでは、必要に応じてキットとソースコントロールをセットアップし、それ以外の場合はデフォルト設定を維持します。

これで、シンプルですぐに使用できるQMLアプリケーションが作成されました。

こんにちは世界

ウィンドウの中央にテキスト「Hello World」を表示する単純なアプリケーション。

import QtQuick 2.3
import QtQuick.Window 2.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World") //The method qsTr() is used for translations from one language to other.

    Text {
        text: qsTr("Hello World")
        anchors.centerIn: parent
    }
}

シンプルなボタンの作成

MouseAreaコンポーネントを使用して、クリック可能なボタン内のすべてのコンポーネントを簡単に変換できます。次のコードは、中央にボタンとテキストがある360x360のウィンドウを表示しています。ボタンを押すとテキストが変更されます：

import QtQuick 2.0

Rectangle {
    width: 360
    height: 360

    Rectangle {
        id: button

        width: 100
        height: 30
        color: "red"
        radius: 5     // Let's round the rectangle's corner a bit, so it resembles more a button
        anchors.centerIn: parent

        Text {
            id: buttonText
            text: qsTr("Button")
            color: "white"
            anchors.centerIn: parent
        }

        MouseArea {
            // We make the MouseArea as big as its parent, i.e. the rectangle. So pressing anywhere on the button will trigger the event
            anchors.fill: parent

            // Exploit the built-in "clicked" signal of the MouseArea component to do something when the MouseArea is clicked.
            // Note that the code associated to the signal is plain JavaScript. We can reference any QML objects by using their IDs
            onClicked: {
                buttonText.text = qsTr("Clicked");
                buttonText.color = "black";
            }
        }
    }
}

画像を表示する

この例は、画像を表示するための画像コンポーネントの最も単純な使い方を示しています。

イメージsourceプロパティは、絶対パスまたは相対パスを持つファイル、インターネットURL（ http:// ）またはQtリソース （ qrc:/ ）のいずれかのURLタイプです。

import QtQuick 2.3

Rectangle {
    width: 640
    height: 480

    Image {
         source: "image.png"
    }
}

マウスイベント

この例は、マウスイベントがQMLでどのように使用されるかを示しています。

import QtQuick 2.7
import QtQuick.Window 2.2

Window {
    visible: true
    Rectangle {
        anchors.fill: parent
        width: 120; height: 240
        color: "#4B7A4A"

        MouseArea {
            anchors.fill: parent // set mouse area (i.e. covering the entire rectangle.)
            acceptedButtons:  Qt.AllButtons
            onClicked: {
                // print to console mouse location
                console.log("Mouse Clicked.")
                console.log("Mouse Location: <",mouseX,",",mouseY,">")

                //change Rectangle color
                if ( mouse.button === Qt.RightButton )
                    parent.color = 'blue'
                if ( mouse.button === Qt.LeftButton )
                    parent.color = 'red'
                if ( mouse.button === Qt.MiddleButton )
                    parent.color = 'yellow'
            }
            onReleased: {
                // print to console
                console.log("Mouse Released.")
            }
            onDoubleClicked: {
                // print to console
                console.log("Mouse Double Clicked.")
            }

        }
    }


}