QML 入門 - 状態遷移

目次 はじめての QML 要素 プロパティ 関数 シグナル レイアウト アニメーション 状態遷移 (この記事です) 状態遷移 QML では、要素に複数の状態を定義し、その状態に応じてプロパティの値を切り替えることができます。 今回は MouseArea と Rectangle を用いて、マウスが乗っているときと押下している時に色が変わるボタンを作ってみます。 MouseArea の clicked シグナルで Rectangle の color プロパティの値を直接変更することも可能ではありますが、今回紹介する方法では記述がより簡潔になり、アニメーションによる滑らかな遷移なども簡単に実装できるようになります。 1. State Item を継承した要素には、state プロパティと states プロパティという、状態遷移に関係する2つのプロパティが存在します。 state プロパティには、その要素の現在の状態名を表す文字列を設定します。 states プロパティには、「ある状態の時にどのプロパティをどう変更するか」を表す State 要素を、リスト形式で設定します。 と、日本語で説明しても分かりにくいだけなので、コードを書きながら解説していきます。 まずは準備として、クリックされると clicked シグナルを送るだけの簡単なボタンを Rectangle を継承して作っておきます。 そこに、このボタンで使用する 2 つの状態を定義します。 states プロパティの型は list<State> ですので、JavaScript の配列のようにコンマ区切りで記述します。 State 要素の子要素に PropertyChanges 要素を追加することで、状態によるボタンの色を定義できます。 今回は色の変更だけなので、PropertyChanges には target プロパティ以外に color プロパティしか設定していませんが、色以外も変更したい場合は color プロパティに続けて記述することができます。 また、myButton 以外の要素のプロパティも変更したい場合は、State 内に target プロパティの値が異なる PropertyChanges を増やすことで対応できます。 最後に、MouseArea…

QML 入門 - アニメーション

目次 はじめての QML 要素 プロパティ 関数 シグナル レイアウト アニメーション (この記事です) 状態遷移 アニメーション QML では Animation を継承した要素を用いることで、画面上の要素のプロパティの値を滑らかに変化させることができます。 1. アニメーションの再生 数値のプロパティの値をアニメーションさせるには、Animation を継承した NumberAnimation を使用します。 上の例では、Rectangle の rotation プロパティの値を変化させ、1回転させています。 NumberAnimation の running プロパティに true を設定しているので、アプリケーションの起動と同時にアニメーションが再生されます。 JavaScript から start() 関数を呼ぶことで、任意のタイミングで再生することもできます。 上の例では、target プロパティにアニメーションさせる対象の要素を設定し、property プロパティにアニメーションさせる対象のプロパティ名を設定していますが、リスト形式で複数の要素を設定できる targets プロパティや、コンマ区切りの文字列で複数のプロパティを設定できる properties プロパティも用意されています。 2. アニメーションのループ Animation を継承した要素には、そのループ回数を設定できる loops プロパティが用意されています。 無限ループにしたい場合は Animation.Infinite を設定します。 from プロパティでプロパティ変化前の値を設定しているのは、2 回目以降のループが始まる前に回転角度を元に戻す必要があるためです。 0 度 → 360 度、0 度 → 360 度、0 度 → 360 度…… といった感じです。 from プロパティを設定しなければ、0 度…

QML 入門 - レイアウト

目次 はじめての QML 要素 プロパティ 関数 シグナル レイアウト (この記事です) アニメーション 状態遷移 レイアウト QML で要素をいい感じに配置する方法を紹介します。 1. anchors プロパティ 親要素または兄弟要素との位置関係を設定できます。 left、right、top、bottom 親要素または兄弟要素の左右上下の端に、自身の左右上下の端を合わせられます。 left に right を設定したり、top に bottom を設定したりもできます。 leftMargin、rightMargin、topMargin、bottomMargin 親要素または兄弟要素の左右上下の端からの距離を設定できます。 leftMargin、rightMargin、topMargin、bottomMargin はそれぞれ left、right、top、bottom を設定したときにのみ有効となります。 fill 親要素または兄弟要素いっぱいに広がるように配置できます。 centerIn 親要素または兄弟要素の中央に配置できます。 horizontalCenter、verticalCenter 親要素または兄弟要素に対して、縦方向または横方向についての中央に配置できます。 2. QtQuick.Layouts モジュール 複数の要素を並べるのに便利な3つの要素が用意されています。 利用するにはファイルの先頭部分に import QtQuick.Layouts 1.1 の1行が必要です。 尚、このモジュールの子要素は添付プロパティでサイズを設定することになります。 ColumnLayout 子要素を縦に並べる要素です。 RowLayout 子要素を横に並べる要素です。 GridLayout 子要素を格子状に並べる要素です。 デフォルトでは子要素が左上から右上に並び、columns プロパティで設定した数を超えたら下の行の左に回り込みますが、flow プロパティに GridLayout.TopToBottom を設定することで子要素が左上から左下に並び、rows で設定した数を超えたら右の列に回り込むようになります。

QML 入門 - シグナル

目次 はじめての QML 要素 プロパティ 関数 シグナル (この記事です) レイアウト アニメーション 状態遷移 シグナル QML では、シグナルによってイベントを配信、購読することができます。 1. シグナルハンドラ シグナルに対応する処理を記述します。 シグナルハンドラの名前は on<シグナル名> (キャメルケース) となります。 上の例ではウィンドウいっぱいに広がった MouseArea の clicked シグナルにハンドラを設定しているので、ウィンドウ内のどこをクリックしてもハンドラの処理が実行されます。 内容が1行の場合はブラケットを省略することもできます。 プロパティにおける添付プロパティと同じように、シグナルにも添付シグナルというものが存在します。 添付シグナルハンドラの名前は <添付元要素>.on<シグナル名> (キャメルケース) です。 よく使うのが Component 要素の completed シグナルで、要素の生成が完了したときに一度だけ呼ばれます。 要素の破棄のタイミングで呼ばれるものや、キーイベントを受け取るものなど、様々なものがあります。 シグナルの引数は JavaScript とは違ってハンドラ側では特に指定することなく自動的に渡されます。 MouseArea の clicked シグナルでは mouse という引数が渡されており、そこからマウス座標などの情報が取得できます。 2. スロット シグナルに関数を対応付けます。 JavaScript の addEventListener() と同じようなものです。 シグナルに対応付けられた関数はスロットと呼ばれます。 対応付けはシグナルの connect() 関数で行います。 上の例では MouseArea の clicked シグナルに myClicked() 関数が対応付けられています。 3. 変更通知シグナル QML でプロパティを定義すると、その要素に対して <プロパティ名>Changed という名前のシグナルが自動的に定義され、対応するプロパティの変更に伴って呼び出されます。 上の例では window の width プロパティの値が変更される度に、新しい幅をコンソールに出力しています。 4. カスタムシグナル 既存の要素に本来は存在しないシグナルを定義し、発火させることができます。 signal <シグナル名>(<引数リスト>); で定義でき、普通の関数と同じように呼ぶことで発火できます。 上の例では MyItem…

QML 入門 - 関数

目次 はじめての QML 要素 プロパティ 関数 (この記事です) シグナル レイアウト アニメーション 状態遷移 関数 QML の関数は JavaScript の関数そのものです。 カスタム要素に関数を定義して呼び出すこともできます。 あまり書くことがないので少し関係ないお話をします。 QML で実際に開発を始めると、カスタム要素で外部に公開したくないプライベートなプロパティや関数を定義したい、という場面が出てくるかと思います。 ですが、残念ながら QML にはアクセス修飾子のようなものは存在しません。(private は一応予約語ではあるのですが……) JavaScript であれば名前の先頭にアンダースコアを付けて区別したりすることがあるかと思いますが、QML ではもう少し確実に隠蔽することができます。 プライベートにしたいプロパティや関数を、カスタム要素自身ではなく子要素に定義し、id を通してアクセスします。 外部からは要素内の id にアクセスすることができないので、子要素に定義したプロパティや関数は外部からは見えません。 ただ、この方法だと要素を継承した要素のみがアクセスできる、所謂 protected なプロパティまでは実現できないんですよね…… 何か良い方法があれば教えてください。

QML 入門 - プロパティ

目次 はじめての QML 要素 プロパティ (この記事です) 関数 シグナル レイアウト アニメーション 状態遷移 プロパティ QML では、プロパティによって要素の位置やサイズ、色などの属性を設定、取得することができます。 1. id 要素を識別するための名前です。 ファイル内で同じ id は使えません。 id 自体はプロパティではありませんが、要素のプロパティを活用するのにほぼ必須と言えるものなので、ここで説明しておきます。 id: <id名>; で id を設定できます。 id は小文字で始まる必要があります。 id のスコープについては、今のところはファイル内と思っておいて良いでしょう。 2. プロパティの記述 プロパティの値は基本的に JavaScript の式で記述します。 <プロパティ名>: <値>; でプロパティの値を、<添付元要素>.<プロパティ名>: <値>; で添付プロパティの値を設定できます。 添付プロパティとは親要素などから与えられた特別なプロパティのことですが、あまり出てこないので取りあえずは気にしなくて良いです。 また、上の例で window の幅を参照しているように、<id名>.<プロパティ名> で別の要素のプロパティを参照できます。 id を指定しない場合、自分自身の要素から親要素の方へと検索が行われます。 3. 基本的なプロパティの型 型名 定義域 例 bool true または false true, false int -2147483648 以上 2147483647 以下の整数 12, -256, 200000 real IEEE 754 の double と同じ 20.48, -1853.23579, 100.0 string " または ' で囲まれた文字列 "Hello, world!", 'Hello, world!' enumeration C++ 側で定義、登録された列挙体 Text.AlignRight, Flickable.HorizontalFlick color ARGB カラー '#88ffffff', Qt.rgba(1,…

QML 入門 - 要素

目次 はじめての QML 要素 (この記事です) プロパティ 関数 シグナル レイアウト アニメーション 状態遷移 要素 QML では、画面上に何らかの描画行ったり、データを保持したりする要素をウィンドウに配置していくことでアプリケーションを構築します。 1. 要素の配置 画面に配置する要素は x、y プロパティで位置を設定し、width、height プロパティでサイズを設定することができます。 座標はウィンドウの左上を原点とし、右下に向けて広がります。 要素を入れ子にすると、子要素の原点は親要素の左上になります。 visible プロパティは親要素から継承されます。(基本的には、ですが。これに関してはまた別途解説したいと思います。) 2. 基本的な要素 要素名 説明 QtObject 全ての要素の基底要素です。特に何をするわけでもありません。 Item 画面に配置できるほとんどの要素の基底要素です。位置やサイズ、回転角度、透明度などが設定できますが、何も描画されません。 Rectangle 四角形を描画します。radius プロパティによって角丸の四角形や円も表現できます。 Text 文字列を描画します。フォントや折り返し、文字列が長すぎる場合の省略方法などが設定できます。 MouseArea マウスイベントを受け取ります。enter、exit、press、release に加え、クリックやダブルクリック、長押しなどのイベントも受け取ることができます。タッチ操作はシングルタッチのみに対応しています。 Flickable スクロール領域です。スクロール方向やスクロール速度の制限、バウンススクロールなどが設定できます。 WebView WebView です。 これらの基本的な要素に加え、QtQuick.Controls モジュールではボタンやスライダ等の UI コントロールが多数用意されています。 各要素の使い方やプロパティ、他の要素などについては公式ドキュメントを参照してください。 3. 要素の継承 QML では既存の要素を継承し、独自の変更を加えたものをカスタム要素として定義することができます。 1 ファイルに 1 つのカスタム要素を定義することができ、そのファイル名の拡張子を除いたものがカスタム要素名となります。 要素名の先頭は大文字である必要があります。 プロジェクトを右クリック > 新しいファイルを追加... Qt > QML File (Qt Quick 2) > 選択... 名前: MyRect > 次へ > 完了 これで MyRect.qml が生成され、このプロジェクトで MyRect が使えるようになります。 MyRect を Rectangle を継承してさらに 2 つの四角形を内包する要素として定義します。 MyRect の継承元は Rectangle なので color プロパティを設定することができます。 4.…

QML 入門 - はじめての QML

目次 はじめての QML (この記事です) 要素 プロパティ 関数 シグナル レイアウト アニメーション 状態遷移 はじめての QML プロジェクトの作成から Hello, world! までを行います。 QtCreater のインストールは終わっているものとします。 1. プロジェクトの作成 ファイル > ファイル / プロジェクトの新規作成... プロジェクト > Application > Qt Quick アプリケーション > 選択... 名前: test > 次へ > 次へ ビルド対象にするプラットフォームを選択 > 次へ > 完了 2. Hello, world! まずは Hello, world! です。 プロジェクト作成と同時に作られた main.qml を書き換えます。 QML では、基本的には要素の中に自身のプロパティと子要素を記述することでアプリケーションを構成していきます。 Window や Text などの要素はモジュールで定義されており、必要なモジュールを読み込むことで利用できるようになります。 モジュールの読み込みは、ファイルの先頭に import <モジュール名> <モジュールバージョン> と記述して行います。 プロパティは JSON 風な記法です。 末尾の ; は省略可能です。(省略することが多いみたいです) 3. ちょっと改良 文字列がウィンドウ中央に来るようにしてみました。 詳しいことは後の章で解説していきます。

QML 入門

QML 入門 1. はじめての QML プロジェクトの作成から Hello, world! までを行います。 2. 要素 画面上に何らかの描画行ったり、データを保持したりする要素について、その配置方法や継承方法を解説します。 3. プロパティ 要素の属性を表すプロパティの使い方や、カスタムプロパティの定義の方法、プロパティバインディングなどについて解説します。 4. 関数 要素の機能を表す関数の呼び出し方や定義の方法を説明します。 5. シグナル イベントを配信、購読するのに用いるシグナルやシグナルハンドラについて解説します。 6. レイアウト 要素を良い感じに並べるのに用いる方法を紹介します。 7. アニメーション 要素のプロパティの値を滑らかに変化させる方法を紹介します。 8. 状態遷移 QML での状態やその遷移について解説します。 9. 続き? 要素の動的配置や UI コントロールのモジュールなど、まだまだ便利なものがたくさんあるので続きの記事を書くかもしれません。 気が向いたらです。(重要)