qmlqmlを使い始める


備考

QMLは、QトンのMイータオブジェクトLの anguageの略頭字語です。これはQtフレームワークの一部である宣言型プログラミング言語です。 QMLの主な目的は、デスクトップ、モバイル、組み込みシステム用のユーザーインターフェイスを迅速かつ簡単に作成することです。 QMLを使用すると、QMLコードに直接JavaScriptを組み込んだり、JavaScriptファイルを組み込んだりすることができます。

バージョン

Qtバージョン QtQuickバージョン発売日
4.7 1.0 2010-09-21
4.8 1.1 2011-12-15
5.0 2.0 2012-12-19
5.1 2.1 2013-06-03
5.2 2.2 2013-12-12
5.3 2.3 2014-05-20
5.4 2.4 2014年12月10日〜10日
5.5 2.5 2015-07-01
5.6 2.6 2016-03-15
5.7 2.7 2016年6月16日
5.8 2.7 2017-01-23

シンプルなボタンの作成

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"
    }
}
 

こんにちは世界

ウィンドウの中央にテキスト「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
    }
}
 

インストール

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

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

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

マウスイベント

この例は、マウスイベントが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.")
            }

        }
    }


}