📢 Webサイト閉鎖と移転のお知らせ
このWebサイトは2026年9月に閉鎖いたします。
新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）
細 Wiki がページ「QMLのコントロール - GridLayout」を「QMLのコントロール - GridとGridLayout」に、リダイレクトを残さずに移動しました |
編集の要約なし |
||
| 1行目: | 1行目: | ||
== 概要 == | == 概要 == | ||
<code>Grid</code>および<code>GridLayout</code>は、見やすいレイアウトを表示するために用意されている。<br> | |||
<br><br> | <br><br> | ||
== 専用プロパティ == | == Grid == | ||
==== 専用プロパティ ==== | |||
* layoutDirection | |||
*: 値 : enumeration型 (既定値 : Qt.LeftToRight) | |||
*: このプロパティは、レイアウトの方向を設定する。 | |||
*: <br> | |||
*: <code>Qt.LeftToRight</code>は、アイテムは上から下、左から右へと配置される。フローの方向は、<code>Grid.flow</code>プロパティに依存する。 | |||
*: <code>Qt.RightToLeft</code>は、アイテムは上から下、右から左へと配置される。フローの方向は、<code>Grid.flow</code>プロパティに依存する。 | |||
*: <br> | |||
*: <code>Row.layoutDirection</code>プロパティや<code>Flow.layoutDirection</code>プロパティも参照すること。 | |||
*: <br> | |||
* effectiveLayoutDirection | |||
*: 値 : enumeration型 | |||
*: グリッドの効果的なレイアウト方向を設定する。 | |||
*: ロケールレイアウトに対して<code>LayoutMirroring.enabled</code>プロパティを使用する場合、グリッドの位置の視覚的なレイアウト方向がミラーリングされる。 | |||
*: ただし、<code>layoutDirection</code>プロパティは変更されない。 | |||
*: <br> | |||
*: <code>Grid.layoutDirection</code>プロパティおよび<code>LayoutMirroring</code>プロパティも参照すること。 | |||
*: <br> | |||
* flow | |||
*: 値 : enumeration型 (既定値 : Grid.LeftToRight) | |||
*: レイアウトのフローを設定する。 | |||
*: <br> | |||
*: <code>Grid.LeftToRight</code>は、アイテムを<code>layoutDirection</code>で隣り合って配置されて、次の行に折り返される。 | |||
*: <code>Grid.TopToBottom</code>は、アイテムを上から下に向かって隣り合って配置されて、次の列に折り返される。 | |||
*: <br> | |||
* spacing | |||
*: 値 : qreal型 (既定値 : 0) | |||
*: 隣り合うアイテムの間を空けるピクセル数を設定する。 | |||
*: <code>Grid.spacing</code>プロパティも参照すること。 | |||
*: <br> | |||
* rowSpacing | |||
*: 値 : qreal型 (既定値 : なし) | |||
*: 行間のピクセル単位の間隔を設定する。 | |||
*: このプロパティが設定されていない場合、行の間隔には、<code>spacing</code>プロパティが使用される。 | |||
*: <br> | |||
*: このプロパティは、Qt 5.0で導入された。 | |||
*: <br> | |||
* columnSpacing | |||
*: 値 : qreal型 (既定値 : なし) | |||
*: 列間のピクセル単位の間隔を設定する。 | |||
*: このプロパティが設定されていない場合、列の間隔には、<code>spacing</code>プロパティが使用される。 | |||
*: <br> | |||
*: このプロパティは、Qt 5.0で導入された。 | |||
*: <code>rowSpacing</code>プロパティも参照すること。 | |||
*: <br> | |||
* padding | |||
* topPadding | |||
* bottomPadding | |||
* leftPadding | |||
* rightPadding | |||
*: 値 : real型 | |||
*: コンテンツの周りのパディングを設定する。 | |||
*: このプロパティは、Qt 5.6で導入された。 | |||
*: <br> | |||
* add | |||
*: 値 : Transition型 | |||
*: <code>Grid</code>内のアイテムに対して実行されるトランジションを設定する。 | |||
*: Positionerアイテムの場合、以下のアイテムが該当する。 | |||
*:* ポジショナーが作成された後に、ポジショナーの子として作成または再配置されたアイテム | |||
*:* 子アイテムの<code>visible</code>プロパティの値が<code>false</code>から<code>true</code>に変更されて、可視状態になったアイテム | |||
*: <br> | |||
*: トランジションは、<code>ViewTransition</code>を使用して、追加されるアイテムの詳細にアクセスできる。 | |||
*: これらのトランジションの使用に関する詳細と例については、<code>ViewTransition</code>のドキュメントを参照すること。 | |||
*: <br> | |||
*: <u>※注意</u> | |||
*: <u><code>add</code>プロパティは、作成時に既にポジショナーの一部となっているアイテムには適用されない。</u> | |||
*: <u>この場合は、代わりに<code>populate</code>プロパティが適用される。</u> | |||
*: <br> | |||
*: <code>populate</code>や<code>ViewTransition</code>も参照すること。 | |||
*: <br> | |||
* move | |||
*: 値 : Transition型 | |||
*: <code>Grid</code>内で移動したアイテムに対して実行するトランジションを設定する。 | |||
*: <br> | |||
*: Positionerアイテムの場合、以下のアイテムが該当する。 | |||
*:* ポジショナー内の他のアイテムの追加、削除、再配置により、位置がずれた子アイテムの移動 | |||
*:* ポジショナー内の他のアイテムのサイズ変更により再配置された子アイテム | |||
*: <br> | |||
*: トランジションでは、<code>ViewTransition</code>を使用して、移動されるアイテムの詳細にアクセスすることができる。 | |||
*: <br> | |||
*: <u>※注意</u> | |||
*: <u>ただし、<code>move</code>プロパティでは、<code>ViewTransition.targetIndexes</code>プロパティと<code>ViewTransition.targetItems</code>プロパティは、</u> | |||
*: <u>ポジショナーに他のアイテムが追加されて、<code>move</code>プロパティがトリガーされた場合にのみ設定される。</u> | |||
*: <u>それ以外の場合は、これらのリストは空になる。</u> | |||
*: <br> | |||
*: これらのトランジションの詳細や使用例については、<code>ViewTransition</code>のドキュメントを参照すること。 | |||
*: また、<code>add</code>プロパティ、<code>populate</code>プロパティ、<code>ViewTransition</code>プロパティも参照すること。 | |||
*: <br> | |||
* populate | |||
*: 値 : Transition型 | |||
*: ポジショナーの作成時に、このポジショナーの一部であるアイテムに対して実行されるトランジションを設定する。 | |||
*: <code>populate</code>プロパティは、ポジショナーが最初に作成された時に実行される。 | |||
*: <br> | |||
*: <code>populate</code>プロパティは、<code>ViewTransition</code>を使用して追加されるアイテムの詳細情報にアクセスできる。 | |||
*: <br> | |||
*: これらのトランジションの詳細や使用例については、<code>ViewTransition</code>のドキュメントを参照すること。 | |||
*: また、<code>add</code>プロパティも参照すること。 | |||
*: <br> | |||
* effectiveHorizontalItemAlignment | |||
* horizontalItemAlignment | |||
* verticalItemAlignment | |||
*: 値 : enumeration型 | |||
*: <code>Grid</code>内のアイテムの水平方向および垂直方向の配置を設定する。 | |||
*: 既定値では、アイテムは垂直方向に上に並んでいる。 | |||
*: 水平方向のアラインメントは、<code>layoutDirection</code>に従う。 | |||
*: <br> | |||
*: 例えば、<code>layoutDirection</code>が<code>LeftToRight</code>の場合、アイテムは左に配置される。 | |||
*: <br> | |||
*: <code>horizontalItemAlignment</code>の有効な値は、<code>Grid.AlignLeft</code>、<code>Grid.AlignRight</code>、<code>Grid.AlignHCenter</code>である。 | |||
*: <code>VerticalItemAlignment</code>の有効な値は、<code>Grid.AlignTop</code>、<code>Grid.AlignBottom</code>、<code>Grid.AlignVCenter</code>である。 | |||
*: <br> | |||
*: <code>LayoutMirroring.enabled</code>プロパティや<code>layoutDirection</code>プロパティの設定してレイアウトをミラーリングする時、アイテムの水平方向もミラーリングされる。 | |||
*: ただし、<code>horizontalItemAlignment</code>プロパティは変更されない。 | |||
*: アイテムの効果的な水平方向の配置を確認するには、読み取り専用である<code>efficHorizontalItemAlignment</code>プロパティを使用する。 | |||
*: <br> | |||
*: これらのプロパティは、Qt 5.1で導入された。 | |||
*: <code>Grid.layoutDirection</code>プロパティおよび<code>LayoutMirroring</code>も参照すること。 | |||
*: <br> | |||
*: 下表は、アイテムを整列させるための3つの例を示している。 | |||
<center> | |||
{| class="wikitable" | style="background-color:#fefefe;" | |||
|- | |||
! style="background-color:#FFFFFF;" | | |||
! style="background-color:#FFFFFF;" | [[ファイル:QML Grid 1.png|フレームなし|中央]] | |||
! style="background-color:#FFFFFF;" | [[ファイル:QML Grid 2.png|フレームなし|中央]] | |||
! style="background-color:#FFFFFF;" | [[ファイル:QML Grid 3.png|フレームなし|中央]] | |||
|- | |||
| Horizontal alignment || AlignLeft || AlignHCenter || AlignHCenter | |||
|- | |||
| Vertical alignment || AlignTop || AlignTop || AlignVCenter | |||
|} | |||
</center> | |||
<br> | |||
==== シグナル ==== | |||
* positioningComplete() | |||
*: このシグナルは、位置決めが完了した時に発行する。 | |||
*: <br> | |||
*: <u>※注意</u> | |||
*: <u>対応するハンドラは <code>onPositioningComplete()</code>である。</u> | |||
*: <br> | |||
*: このシグナルは、Qt 5.9で導入された。 | |||
<br> | |||
==== メソッド ==== | |||
* forceLayout() | |||
*: <code>Grid</code>は、通常、フレームごとに1度だけ子アイテムを配置する。 | |||
*: <br> | |||
*: スクリプト内では、下層の子アイテムが変更されても、<code>Grid</code>がまだ更新されていない可能性がある。 | |||
*: そのため、<code>forceLayout</code>メソッドは、<code>Grid</code>が子アイテムの変更に即座に対応することを強制する。 | |||
*: <br> | |||
*: <u>※注意</u> | |||
*: <u>一般的に、<code>forceLayout</code>メソッドは、コンポーネントが完了してから呼び出すべきである。</u> | |||
*: <br> | |||
*: このメソッドは、Qt 5.9で導入された。 | |||
<br><br> | |||
== GridLayout == | |||
==== 専用プロパティ ==== | |||
* layoutDirection | * layoutDirection | ||
*: 値 : enumeration (既定値 : <code>Qt.LeftToRight</code>) | *: 値 : enumeration (既定値 : <code>Qt.LeftToRight</code>) | ||
| 64行目: | 221行目: | ||
*: <code>GridLayout</code>内のアイテムのカラムのスパンを設定する。 | *: <code>GridLayout</code>内のアイテムのカラムのスパンを設定する。 | ||
*: <code>Layout.column</code>および<code>Layout.rowSpan</code>も参照すること。 | *: <code>Layout.column</code>および<code>Layout.rowSpan</code>も参照すること。 | ||
<br> | |||
==== プロパティ ==== | |||
== プロパティ == | |||
<code>GridLayout</code>は、以下のプロパティもサポートしている。<br> | <code>GridLayout</code>は、以下のプロパティもサポートしている。<br> | ||
* Layout.minimumWidth | * Layout.minimumWidth | ||
| 192行目: | 348行目: | ||
*: <code>margins</code>プロパティも参照すること。 | *: <code>margins</code>プロパティも参照すること。 | ||
*: <br> | *: <br> | ||
<br> | |||
==== サンプルコード ==== | |||
== サンプルコード == | |||
<code>GridLayout</code>内の全ての可視アイテムは、レイアウトに属する。<br> | <code>GridLayout</code>内の全ての可視アイテムは、レイアウトに属する。<br> | ||
<br> | <br> | ||