Qt QML コンポーネント—ArcGIS AppStudio

アプリのユーザーインターフェイスの設計に使用できる AppStudio QML コンポーネントのほかに、The Qt Company 独自の QML コンポーネントのすべてにアクセスできます。このトピックでは、非常に便利なコンポーネントについて説明します。 Qt QML タイプの完全なリストについては、Qt のドキュメントをご参照ください。

使用頻度の高い QML タイプを以下に示します。

ポジショナー
アンカー
レイアウト
リピーター
国 (複数) / 州 (複数)
接続

注意:

Qt 5.13.1 から Qt 5.15.2 への移行時に、AppStudio アプリやサンプルのユーザーインターフェイス (UI) エレメントの表示に差分が確認されています。位置、サイズ、レイアウト、色、トリミング、折り返し、フォントなどの差分があります。アプリのすべての UI エレメントの表示を確認します。コンポーネントのネストを変更する必要がある場合も、定義するプロパティを追加または削減する必要がある場合もあります。 QML での UI エレメントは非常に柔軟に定義できるため、決まったルールはありません。

リリース 5.15.2 では、bool、string、int などの Qt プロパティタイプが厳密になり、NULL 値や未定義の値をサポートしなくなりました。アプリでこれらのタイプを使用する場合は、NULL 値や未定義の値をサポートする方法を考慮する必要があります。代わりに、プロパティタイプ var を使用することができます。このプロパティタイプは NULL 値や未定義の値だけでなく、他のすべての値を許可します。

ポジショナー

ポジショナーは、ユーザーインターフェイス内のアイテムの位置を管理するコンテナーアイテムです。ポジショナーのタイプには、行、列、グリッド、フローがあります。これらのいずれかに基づいてアイテムを整理することで、サイズ変更可能なユーザーインターフェイスに適した整然としたレイアウトでアイテムを配置できます。たとえば、アイテムをグリッドで整理するとします。アプリを縦向きで表示するとアイテムの 2 x 5 のマトリックスが表示されますが、横向きに切り替えると、アイテムのグリッドが画面に合わせて自動的に再編成され、アイテムの 3 x 4 のマトリックスが表示されます。

ポジショナーの詳細については、Qt のドキュメントをご参照ください。

アンカー

各アイテムは 7 つのアンカーポイントを持つと考えることができ、これらのポイントを基準にして他のアイテムを配置できます。これらのポイントは、上、下、左、右、水平方向中央、垂直方向中央、およびベースライン (アイテム内のテキストが配置されるライン) です。これは、アイテムを互いの位置を考慮しながら配置して、ダイナミックユーザーインターフェイスを作成する場合に適しています。アイテムのディメンションや位置が変わっても、アンカーは残ります。アイテムのアンカーの外側に残すスペースの量を指定して、アンカーのマージンを定義することもできます。

アンカーの詳細については、Qt のドキュメントをご参照ください。

レイアウト

Qt Quick Layouts を使用するには、QML ファイルで追加のモジュールを参照する必要があります。以下に例を示します。

import QtQuick.Layouts 1.15

RowLayout、ColumnLayout、および GridLayout という 3 つのレイアウトがあります。レイアウトを使用すると、行、列、グリッドに比べて、アイテムの配置をより詳細に制御できます。たとえば、レイアウトで各アイテムの配置を指定することもできます。 GridLayout では、個別の列および行の間隔を設定したり、アイテムが行や列にまたがるようにしたり、アイテムの個々のグリッドセルを指定したりすることもできます。また、レイアウトを使用して、各アイテムに対して、幅と高さの推奨値、最大値、最小値を設定したり、幅と高さをできる限り大きくしたりできます。これは、ダイナミックディスプレイまたは複数のディスプレイ向けに設計する場合に特に便利です。レイアウトをミラーリングして、左から右へのレイアウトを右から左へのレイアウトに変更することもできます。

リピーター

リピーターオブジェクトは、モデルのデータを使用して、ポジショナー用にテンプレートからアイテムを作成します。リピーターとポジショナーを組み合わせると、多くのアイテムを効率的にレイアウトできます。モデルは次のいずれです。

リピーターによって作成されるデリゲートの数を示す数値
自由形式のリストデータソース - ListModel
文字列リスト
オブジェクトリスト

デリゲートは、リピーターによってインスタンス化された各アイテムを定義するテンプレートを提供します。リピーターデリゲートは、リピーター内のそのインデックス、およびデリゲートに関連するモデルデータにアクセスできます。

リピーターの詳細については、Qt のドキュメントをご参照ください。

国 (複数) / 州 (複数)

状態は、アプリ内で別のビューまたは画面を表示するために使用できます。状態を使用すると、プロパティの値に基づいてエレメントを表示または非表示にしたり、アンカリングを変更したり、親オブジェクトを変更したりできます。状態に基づいて、アニメーションを開始、停止、または一時停止することも、スクリプトを実行することもできます。アイテムベースの各コンポーネントは、状態プロパティとデフォルトの状態を持ちます。デフォルトの状態は空の文字列 ("") で、すべての初期プロパティ値を含みます。状態プロパティを空の文字列に設定すると、デフォルトの状態が読み込まれます。

状態の詳細については、Qt のドキュメントをご参照ください。

接続

Qt 5.15 では、接続用の新しい構文が用意されています。以前の on<Signal> ハンドラーを作成する方法は非推奨となり、現在は関数構文に準拠する必要があります。次に、以前の接続構文を使用してアプリを実行したときに表示される警告メッセージを示します。

qrc:/qml/main.qml:277:5: QML Connections: Implicitly defined onFoo properties in Connections are deprecated. Use this syntax instead: function onFoo (<arguments>) { ... }

次に、Qt 5.13 以前で通常定義されていた接続の例を示します。

Connections { 
     target: mouseArea 
     onPositionChanged: { 
         console.log( "onPositionChanged: ", mouse.x, mouse.y ); 
     } 
     onPressedChanged: { 
         console.log( "onPressedChanged: ", mouseArea.pressed ); 
     } 
}

次に、Qt 5.15 以降で定義する必要がある接続の例を示します。

Connections { 
     target: mouseArea 
     function onPositionChanged(mouse) { 
         console.log( "onPositionChanged: ", mouse.x, mouse.y ); 
     } 
     function onPressedChanged() { 
         console.log( "onPressedChanged: ", mouseArea.pressed ); 
     } 
}

関数構文が使用されるようになったため、信号パラメーターをすべて明示的にリストする必要があります。パラメーターを省略した場合、信号パラメーターはその名前では使用できず、コード内で未定義の参照が発生する可能性があります。たとえば、onPositionChanged を使用する代わりに function onPositionChanged(mouse) を使用する必要があります。

信号パラメーターをリストする際には、正式な信号パラメーター名を関数のパラメーター名として使用し、すべてのパラメーターを正しい順序でリストすることをお勧めします。たとえば、function onPositionChanged(m) ではなく function onPositionChanged(mouse) を使用します。

プロパティを変更するために信号を定義する場合、プロパティにアクセスするオブジェクトの名前を明示的に指定する必要があります。たとえば、pressed ではなく mouseArea.pressed を使用する必要があります。

接続の詳細については、Qt のドキュメントをご参照ください。

このトピックへのフィードバック

注意:

ポジショナー

アンカー

レイアウト

リピーター

国 (複数) / 州 (複数)

接続

このトピックの内容