QMLの基礎 - モデルとビュー - 版の履歴

2023年2月18日 (土) 22:38にWikiによる

2023-02-18T22:38:38Z

← 古い版		2023年2月19日 (日) 07:38時点における版
399行目:		399行目:
	加えて、モデルはQt C++で作成することができ、そのモデルを<code>QQmlEngine</code>クラスを使用してQMLコンポーネントから利用することもできる。<br>		加えて、モデルはQt C++で作成することができ、そのモデルを<code>QQmlEngine</code>クラスを使用してQMLコンポーネントから利用することもできる。<br>
	<br>		<br>
	モデルの作成については、[[QMLの基礎 - モデルの作成]]や[[QMLの基礎 - ~~QMLタイプの作成~~]]を参照すること。<br>		モデルの作成については、[[QMLの基礎 - モデルの作成]]や[[QMLの基礎 - カスタムQMLタイプ]]を参照すること。<br>
	<br>		<br>
	モデルからアイテムを配置する場合は、<code>Repeater</code>を使用することで実現できる。<br>		モデルからアイテムを配置する場合は、<code>Repeater</code>を使用することで実現できる。<br>

Wiki: /* Repeater */

2021-10-27T01:10:39Z

Repeater

@@ 648行目: / 648行目: @@
 また、<code>Repeater</code>が作成するアイテムのテンプレートとして、デリゲートを使用することもできる。<br>
 これは、<code>delegate</code>プロパティで指定する。<br>
 <br><br>
 __FORCETOC__
 [[カテゴリ:Qt]]

Wiki: /* モデル */

2021-10-26T21:51:19Z

モデル

差分を表示

Wiki: /* ListViewのセクション */

2021-10-22T16:23:15Z

ListViewのセクション

差分を表示

2021年10月22日 (金) 13:13にWikiによる

2021-10-22T13:13:09Z

← 古い版		2021年10月22日 (金) 22:13時点における版
39行目:		39行目:
	<br>		<br>
	上記のビューには、それぞれ専用のプロパティと動作がある。<br>		上記のビューには、それぞれ専用のプロパティと動作がある。<br>
	~~<br>~~<br>		<br>
			==== ビューの装飾 ====
	== ビューの装飾 ==
	ビューでは、<code>header</code>、<code>footer</code>、<code>section</code>等の装飾用プロパティを使用して、見た目をカスタマイズすることができる。<br>		ビューでは、<code>header</code>、<code>footer</code>、<code>section</code>等の装飾用プロパティを使用して、見た目をカスタマイズすることができる。<br>
	<br>		<br>
128行目:		127行目:
	<br>		<br>
	[[ファイル:QML Model and View 2.png\|フレームなし\|中央]]		[[ファイル:QML Model and View 2.png\|フレームなし\|中央]]
	~~<br>~~<br>		<br>
			==== マウスとタッチの操作 ====
	== マウスとタッチの操作 ==
	ビューは、コンテンツのドラッグやフリックを処理するが、個々のデリゲートとのタッチ操作は処理しない。<br>		ビューは、コンテンツのドラッグやフリックを処理するが、個々のデリゲートとのタッチ操作は処理しない。<br>
	<br>		<br>
138行目:		136行目:
	<u><code>highlightRangeMode</code>プロパティが<code>StrictlyEnforceRange</code>に設定されている場合、ビューは常に<code>currentIndex</code>プロパティが指定されたハイライト範囲内にあることを保証するため、</u><br>		<u><code>highlightRangeMode</code>プロパティが<code>StrictlyEnforceRange</code>に設定されている場合、ビューは常に<code>currentIndex</code>プロパティが指定されたハイライト範囲内にあることを保証するため、</u><br>
	<u><code>currentIndex</code>プロパティはビューをドラッグおよびフリックしても影響を受けない。</u><br>		<u><code>currentIndex</code>プロパティはビューをドラッグおよびフリックしても影響を受けない。</u><br>
	~~<br>~~<br>		<br>
			==== ListViewのセクション ====
	== ListViewのセクション ==
	<code>ListView</code>のコンテンツはセクションにグループ化されるため、関連するリストアイテムは、そのセクションに応じてラベル付けされる。<br>		<code>ListView</code>のコンテンツはセクションにグループ化されるため、関連するリストアイテムは、そのセクションに応じてラベル付けされる。<br>
	また、セクションは、デリゲートを使用して装飾することもできる。<br>		また、セクションは、デリゲートを使用して装飾することもできる。<br>

Wiki: ページの作成:「== 概要 == ソフトウェアはデータを生成して、データを表示する必要がある。
Qt Quickには、データを表示するためのモデル、…」

2021-10-19T07:19:54Z

ページの作成:「== 概要 == ソフトウェアはデータを生成して、データを表示する必要がある。 Qt Quickには、データを表示するためのモデル、…」

新規ページ

== 概要 ==
ソフトウェアはデータを生成して、データを表示する必要がある。 
Qt Quickには、データを表示するためのモデル、ビュー、デリゲートという概念が存在する。 
 
モデル、ビュー、デリゲートは、データの可視化をモジュール化し、開発者がデータの様々な側面をコントロールできる。 
また、データにほとんど変更を加えることなく、リストビューとグリッドビューを入れ替えることができる。 
同様に、データのインスタンスをデリゲートにカプセル化することで、データの表示方法や処理方法を決定することができる。 
 
* モデル
*: データとその構造を含む。
*: モデルを作成するためのQMLタイプがいくつかある。
*: 
* ビュー
*: データを表示するコンテナである。
*: ビューは、リストやグリッドでデータを表示する。
*: 
* デリゲート
*: データがビューにどのように表示されるかを指定する。
*: デリゲートはモデルの各データを受け取り、それをカプセル化する。データはデリゲートを通してアクセスできる。
*: デリゲートは、データを編集可能なモデルに書き戻すこともできる。（例. <code>TextField</code>の<code>onAccepted</code>ハンドラ内）
*: データを可視化するには、ビューの<code>model</code>プロパティをモデル、<code>delegate</code>プロパティをコンポーネントやその他の互換性のあるタイプにバインドする。
 
[[ファイル:QML Model and View 1.png|フレームなし|中央]]
 

== ビューによるデータの表示 ==
ビューは、アイテムのコレクションのためのコンテナである。 
豊富な機能を持ち、スタイルや動作の要求に合わせてカスタマイズすることができる。 
 
Qt Quickの基本セットには、以下に示す標準的なビューが用意されている。 
* ListView
*: 水平または垂直のリストにアイテムを配置する。
*: 
* GridView
*: 利用可能なスペース内のグリッドにアイテムを配置する。
*: 
* PathView
*: アイテムをパス上に配置する。
 
上記のビューには、それぞれ専用のプロパティと動作がある。 
 

== ビューの装飾 ==
ビューでは、<code>header</code>、<code>footer</code>、<code>section</code>等の装飾用プロパティを使用して、見た目をカスタマイズすることができる。 
 
これらのプロパティに対して、オブジェクト（通常は別のビジュアルオブジェクト）をバインドすることにより、ビューを装飾することができる。 
footerには、ボーダーを表示するRectangleアイテムや、ビューの上にロゴを表示するヘッダ等がある。 
 
以下の例では、あるクラブがメンバーリストを自社のブランドカラーで装飾している。 
メンバーリストはモデルの中にあり、デリゲートはモデルのコンテンツを表示している。 
 
クラブは、ビジュアルアイテムを<code>header</code>プロパティと<code>footer</code>プロパティにバインドすることにより、メンバーリストを装飾することができる。 
ビジュアルアイテムは、同一ファイル、他のファイル、<code>Component</code>アイテムで定義することができる。 
<syntaxhighlight lang="qml">
ListModel {
id: nameModel
ListElement { name: "Alice" }
ListElement { name: "Bob" }
ListElement { name: "Jane" }
ListElement { name: "Harry" }
ListElement { name: "Wendy" }
}

Component {
id: nameDelegate
Text {
text: name;
font.pixelSize: 24
}
}

ListView {
anchors.fill: parent
clip: true

model: nameModel
delegate: nameDelegate

header: bannercomponent

footer: Rectangle {
width: parent.width
height: 30;
gradient: clubcolors
}

highlight: Rectangle {
width: parent.width
color: "lightgray"
}
}

Component { // instantiated when header is processed
id: bannercomponent
Rectangle {
id: banner
width: parent.width
height: 50
gradient: clubcolors

border {
color: "#9EDDF2"
width: 2
}

Text {
anchors.centerIn: parent
text: "Club Members"
font.pixelSize: 32
}
}
}

Gradient {
id: clubcolors

GradientStop {
position: 0.0
color: "#8EE2FE"
}

GradientStop {
position: 0.66
color: "#7ED2EE"
}
}
</syntaxhighlight>
 
[[ファイル:QML Model and View 2.png|フレームなし|中央]]
 

== マウスとタッチの操作 ==
ビューは、コンテンツのドラッグやフリックを処理するが、個々のデリゲートとのタッチ操作は処理しない。 
 
デリゲートがタッチ入力に反応して<code>currentIndex</code>プロパティを設定するためには、適切なタッチ処理を持つ<code>MouseArea</code>アイテムをデリゲートに定義する必要がある。 
 
※注意 
<code>highlightRangeMode</code>プロパティが<code>StrictlyEnforceRange</code>に設定されている場合、ビューは常に<code>currentIndex</code>プロパティが指定されたハイライト範囲内にあることを保証するため、 
<code>currentIndex</code>プロパティはビューをドラッグおよびフリックしても影響を受けない。 
 

== ListViewのセクション ==
<code>ListView</code>のコンテンツはセクションにグループ化されるため、関連するリストアイテムは、そのセクションに応じてラベル付けされる。 
また、セクションは、デリゲートを使用して装飾することもできる。 
 
以下の例では、<code>ListView</code>に、人名とチームの所属を示すリストを作成している。 
 
<code>ListView</code>には、隣接するアイテムや関連するアイテムをセクションにまとめることができる<code>property</code>プロパティが存在する。 
<code>property</code>プロパティは、どのリストタイプのプロパティをセクションとして使用するかを決定する。 
 
<code>cliteria</code>プロパティは、セクション名の表示方法を決定する。 
<code>delegate</code>プロパティは、<code>ListView</code>等の<code>delegate</code>プロパティと同様である。 
<syntaxhighlight lang="qml">
ListModel {
id: nameModel
ListElement { name: "Alice"; team: "Crypto" }
ListElement { name: "Bob"; team: "Crypto" }
ListElement { name: "Jane"; team: "QA" }
ListElement { name: "Victor"; team: "QA" }
ListElement { name: "Wendy"; team: "Graphics" }
}

Component {
id: nameDelegate
Text {
text: name;
font.pixelSize: 24
anchors.left: parent.left
anchors.leftMargin: 2
}
}

ListView {
anchors.fill: parent
model: nameModel
delegate: nameDelegate
focus: true

highlight: Rectangle {
color: "lightblue"
width: parent.width
}

section {
property: "team"
criteria: ViewSection.FullString
delegate: Rectangle {
color: "#b0dfb0"
width: parent.width
height: childrenRect.height + 4
Text {
anchors.horizontalCenter: parent.horizontalCenter
font.pixelSize: 16
font.bold: true
text: section
}
}
}
}
</syntaxhighlight>
 
[[ファイル:QML Model and View 3.png|フレームなし|中央]]
 

__FORCETOC__
[[カテゴリ:Qt]]