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

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

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

データを可視化するには、ビューの 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つのデリゲートを作成または保持することができる。キャッシュされたデリゲートは非同期に作成されるため、複数のフレームにまたがって作成することができ、フレームをスキップする可能性が低くなります。描画のパフォーマンスを向上させるために、可視領域外のデリゲートは描画されません。

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

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

ビューのハイライト

List View Highlight とGrid View Highlight セクションでは、ビューのアイテムをハイライトするためのプロパティを指定できます。

Range フィールドの値をApplyRange またはStrictlyEnforceRange に設定すると、リストビューまたはグリッドビューの現在のアイテムがハイライトされます。範囲を適用するように選択すると、ビューは範囲内でハイライトを維持しようとします。しかし、ビューの端やマウス操作によって、ハイライトが範囲外に移動することがあります。範囲を強制するを選択すると、ハイライトが範囲外に移動することはありません。キーボードやマウス操作によってハイライトが範囲外に移動すると、現在の項目が変更されます。

Preferred begin とPreferred 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サポート列は、どのコンポーネントが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	はい	ユーザーが横にスワイプしてページをナビゲートできるようにする。