リストやその他のデータモデルの使用

アプリケーションでは通常、リストやグリッドビューに整理されたデータを処理・表示する必要があります。この目的のために、モデル、ビュー、デリゲートが使用されます。これらはデータの可視化をモジュール化することで、データのさまざまな側面を制御できるようにします。 たとえば、データにほとんど変更を加えることなく、リストビューをグリッドビューに置き換えることができます。同様に、データのインスタンスをデリゲートにカプセル化することで、開発者はデータの表示方法や処理方法を指定できるようになります。

モデルには、データとその構造が含まれます。さまざまな種類のモデルを作成するためのコンポーネントがいくつか用意されています。ビューは、データをリストやグリッド、あるいはパスに沿って表示するコンテナです。デリゲートは、ビュー内でデータがどのように表示されるかを指定します。デリゲートは、モデル内の各データ項目を受け取り、それをカプセル化します。その後、そのデータにはデリゲートを介してアクセスできるようになります。

データを可視化するには、ビューの model プロパティをモデルに、delegate プロパティをコンポーネントにバインドします。

詳細については、『Qt Quick 』の「モデルとビュー」を参照してください。

リストビューとグリッドビュー

List View およびGrid View コンポーネントのインスタンスを作成して、他のコンポーネントのインスタンスをリスト形式またはグリッド形式で整理します。これらは、Components >Default Components >Views から入手できます。

List View は他のコンポーネントをリスト形式で整理し、Grid View はグリッド形式で整理します。デフォルトでは、リストビューおよびグリッドビュー内のコンポーネントは、左から右へ縦方向に配置されます。水平方向には左から右へ、垂直方向には上から下へと配置されます。

リスト表示の方向は「Orientation 」フィールドで、グリッド表示の配置方向は「Flow 」フィールドで変更できます。レイアウトの方向は「Layout direction 」フィールドで変更できます。これらのプロパティに値を設定することで、さまざまなレイアウトを作成できます。

リストビューの場合、「Spacing 」フィールドでリスト項目間の間隔を指定できます。グリッドビューの場合、「W 」および「H 」フィールドで各セルの幅と高さを指定できます。

「Navigation wraps 」を選択すると、キー操作によるナビゲーションがビューの端に達した際に、ビューの反対側の端にある次の行またはセルへ選択範囲が移動するように指定できます。

リストビューとグリッドビューは、どちらも本質的にフリック操作が可能です。

「Snap mode 」フィールドの値によって、ドラッグやフリックの後にビューのスクロールがどのように安定するかが決まります。デフォルトでは、ビューは表示領域内の任意の場所で停止します。「SnapToRow 」を選択すると、ビューは、ビューの先頭と揃った行（グリッドビューで上から下へ流れる場合は列）で停止します。 「SnapOneRow 」を選択すると、マウスボタンが離された時点で、ビューは最初に表示されていた行から最大1行または1列離れた位置で停止します。このオプションは、1ページずつ移動する場合に特に便利です。

デリゲートキャッシュ

Cache フィールドの値は、ビューの表示領域外でもデリゲートが保持されるかどうかを決定します。

この値が 0 より大きい場合、ビューは指定されたキャッシュ内に収まる限り、インスタンス化されたデリゲートを保持することができます。たとえば、垂直ビューでデリゲートの高さが 20 ピクセル、列数が 3 列、キャッシュが 40 に設定されている場合、表示領域の上下で最大 6 個のデリゲートが作成または保持される可能性があります。 キャッシュされたデリゲートは非同期で作成されるため、複数のフレームにわたって作成が行われ、フレームスキップの可能性が低減されます。描画パフォーマンスを向上させるため、表示領域外のデリゲートは描画されません。

このプロパティのデフォルト値はプラットフォームに依存しますが、通常はゼロより大きい値になります。負の値は無視されます。

キャッシュはピクセルバッファではありません。追加でインスタンス化されたデリゲートを保持するだけです。

ビューのハイライト

「List View Highlight 」および「Grid View Highlight 」セクションでは、ビュー内の項目をハイライト表示するためのプロパティを指定できます。

Range フィールドの値をApplyRange またはStrictlyEnforceRange に設定すると、リストビューまたはグリッドビューの現在の項目がハイライト表示されます。範囲を適用するように選択すると、ビューはその範囲内でハイライトを維持しようとします。ただし、ビューの端やマウスの操作によって、ハイライトが範囲外に移動する場合があります。 「範囲を強制する」を選択した場合、ハイライトは決して範囲外に移動しません。キーボードやマウスの操作によってハイライトが範囲外に移動してしまう場合、現在の項目が切り替わります。

Preferred begin およびPreferred end フィールドの値は、ビューがスクロールされた際の現在の項目の位置に影響します。たとえば、スクロール時に現在選択されている項目をビューの中央に留めておきたい場合は、begin値とend値を、中央の項目が位置する場所の上端座標と下端座標に設定します。 プログラムによって現在の項目が変更された場合、ビューは自動的にスクロールし、現在の項目がビューの中央に来るようにします。beginの値はendの値より小さくなければなりません。

Follows current を選択すると、ビューがハイライトを管理できるようになります。ハイライトは、現在の項目を追跡するようにスムーズに移動します。選択しない場合、ビューによってハイライトは移動されず、移動はハイライト側で実装する必要があります。

「Move duration 」、「Move velocity 」、「Resize duration 」、および「Resize velocity 」フィールドの値は、ハイライトの移動およびサイズ変更アニメーションの速度を制御します。

リストモデルの編集

Grid View 、List View 、またはPath View を追加すると、ListModel およびモデル内の各アイテムのインスタンスを作成するデリゲートコンポーネントが自動的に追加されます。グリッドビューおよびリストビューの場合、Qt Design Studio でリストモデルを編集できます。

リストモデルを編集するには：

1. Components >Default Components >Views から、Grid View またはList View を、Navigator または2D ビューにドラッグします。
2. Navigator でビューを右クリックし、コンテキストメニューから「Edit List Model 」を選択して、リストモデルエディタを開きます。

   

3. 列見出しやセルをダブルクリックして、その値を変更します。
4. ツールバーのボタンを使用して、行や列を追加、削除、または移動します。リストでは、各列がプロパティを表し、各行がリスト項目を追加します。

Code ビューまたは「Edit 」モードでは、デフォルトのモデルやデリゲートを、より複雑なモデルやデリゲートに置き換えることができます。「Item Delegate 」および「Swipe Delegate 」コンポーネントも、Components > Qt Quick Controlsで利用可能です。

パスビュー

Path View コンポーネントは、データモデルから提供されたデータをPath 上に配置します。

グラフィカルなスプラインエディタを使用すると、パスビューのパスを指定することができます。これは、Code ビューやEdit モードでは容易ではない作業です。

パスの編集を開始するには、2D ビューでパスビューをダブルクリックします。エディタは、PathCubic パスオブジェクトのパスを構成します。これらは、2つの制御点を持ち、指定された位置に至る3次ベジェ曲線です。2D ビューで制御点をドラッグアンドドロップして、曲線を構築します。

さらに、PathLine およびPathQuad のパスオブジェクトも間接的にサポートされています。曲線セグメントを直線にするには、コンテキストメニューから「Make Curve Segment Straight 」を選択します。

デフォルトでは、パスは閉じた状態（始点と終点が同一）になっています。始点と終点を別々に設定するには、編集ポイントを右クリックしてコンテキストメニューを開き、「Closed Path 」のチェックを解除します。

曲線セグメントに中間点を追加するには、コンテキストメニューから「Split Segment 」を選択します。

[Path View ] セクションでは、パスビューのその他のプロパティを指定できます。[Drag margin ] フィールドの値は、マウスドラッグを開始するパスからの最大距離を指定します。

アイテムをフリック可能にするには、[Interactive ] チェックボックスをオンにします。[Flick deceleration ] フィールドの値は、フリック時の減速率を指定します。

「Offset 」フィールドでは、アイテムがパス上の初期位置からどの程度離れた位置にあるかを指定します。これは、0 から「Item count 」フィールドの値（モデル内のアイテム数を表示）までの範囲の実数です。

「Path View Highlight 」セクションでは、パスオブジェクトを強調表示するためのプロパティを指定できます。

モデルコンポーネントの概要

次の表は、UI にデータモデルを追加するために使用できるコンポーネントの一覧です。「Location」列は、Components におけるコンポーネントの場所を示しています。「MCU support」列は、MCU でサポートされているコンポーネントを示しています。

アイコン	名前	場所	MCU 対応	目的
	Grid View	デフォルトのコンポーネント - ビュー	なし	モデルのグリッド表示。
	Item Delegate	Qt Quick Controls	いいえ	ListView やComboBox など、さまざまなビューやコントロールでデリゲートとして使用できる標準のビュー項目です。
	List View	デフォルトコンポーネント - ビュー	はい	モデルのリストによる可視化。
	パス・ビュー	デフォルトコンポーネント - ビュー	いいえ	パスに沿ってモデルの内容を可視化します。
	Scroll View	Qt Quick Controls	いいえ	ユーザー定義のコンテンツに対してスクロール機能を提供します。「Flickable 」コンポーネントの代わりに使用できます。
	Stack View	Qt Quick Controls	なし	スタックベースのナビゲーションモデル。
	Swipe Delegate	Qt Quick Controls	いいえ	左右にスワイプすることで、さらなるオプションや情報を表示できるビュー項目です。ListView などのビューにおいて、デリゲートとして使用されます。
	Swipe View	Qt Quick Controls	はい	ユーザーが横方向にスワイプしてページ間を移動できるようにします。