QMLのコントロール - GridとGridLayoutのソースを表示

== 概要 ==
<code>Grid</code>および<code>GridLayout</code>は、見やすいレイアウトを表示するために用意されている。<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
*: 値 : enumeration (既定値 : <code>Qt.LeftToRight</code>)
*: このプロパティは、アイテムを左から右にレイアウト、または、右から左にレイアウトするかどうかを制御する。(<u>QtQuick.Layouts 1.1</u>で導入された)
*: <br>
*: 既定値のQt.LeftToRightは、アイテムを左から右に配置する。
*: 値にQt.RightToLeftを指定する場合、アイテムを右から左に向かって配置する。
*: また、<code>Qt.RightToLeft</code>が指定されている場合、左揃えのアイテムは右揃えになり、右揃えのアイテムは左揃えになる。<br>
*: <br>
*: <code>RowLayout</code>、<code>ColumnLayout</code>、<code>GridLayout</code>には、<code>layoutDirection</code>プロパティが存在する。<br>
*: <br>
* rowSpacing
*: 値 : real型 (既定値 : 5)
*: 各行の間隔を設定する。
*: <br>
* columnSpacing
*: 値 : real型 (既定値 : 5)
*: 各カラムの間隔を設定する。
*: <br>
* rows
*: 値 : int型 (既定値 : 制限なし)
*: <code>Layout.flow</code>プロパティが<code>GridLayout.TopToBottom</code>の場合、配置されるアイテムの行数制限を設定する。
*: <br>
* columns
*: 値 : int型 (既定値 : 制限なし)
*: <code>Layout.flow</code>プロパティが<code>GridLayout.LeftToRight</code>の場合、配置されるアイテムの列数制限を設定する。
*: <br>
* flow
*: 値 : enumeration型 (既定値 : <code>GridLayout.LeftToRight</code>)
*: セルの位置が明示的に設定されていないアイテムのフロー方向を設定する。
*: このプロパティは、<code>rows</code>プロパティや<code>columns</code>と一緒に使用され、それぞれ、次の行または列にフローがリセットされるタイミングを指定する。
*: <br>
*: 設定可能な値は、以下の通りである。
*:* <code>GridLayout.LeftToRight</code> （既定値）
*:*: アイテムが隣り合って配置されて、次の行に折り返される。
*:* <code>GridLayout.TopToBottom</code>
*:*: アイテムは上から下に向かって隣り合って配置されて、次の列に折り返される。
*: <br>
*: <code>rows</code>プロパティと<code>columns</code>プロパティも参照すること。
*: <br>
* Layout.row
*: 値 : int型 (既定値 : 0)
*: <code>GridLayout</code>内のアイテムの行の位置を設定する。
*: <code>Layout.row</code>プロパティおよび<code>Layout.column</code>プロパティの両方が設定されていない場合、アイテムにセルを割り当てるかどうかは、レイアウトに委ねられる。
*: <code>Layout.column</code>および<code>Layout.rowSpan</code>も参照すること。
*: <br>
* Layout.rowSpan
*: 値 : int型 (既定値 : 1)
*: <code>GridLayout</code>内のアイテムの行のスパンを設定する。
*: <code>Layout.row</code>および<code>Layout.columnSpan</code>も参照すること。
*: <br>
* Layout.column
*: 値 : int型 (既定値 : 0)
*: <code>GridLayout</code>内のアイテムのカラムの位置を設定する。
*: <code>Layout.column</code>プロパティおよび<code>Layout.row</code>プロパティの両方が設定されていない場合、アイテムにセルを割り当てるかどうかは、レイアウトに委ねられる。
*: <code>Layout.row</code>および<code>Layout.columnSpan</code>も参照すること。
*: <br>
* Layout.columnSpan
*: 値 : int型 (既定値 : 1)
*: <code>GridLayout</code>内のアイテムのカラムのスパンを設定する。
*: <code>Layout.column</code>および<code>Layout.rowSpan</code>も参照すること。
<br>
==== プロパティ ====
<code>GridLayout</code>は、以下のプロパティもサポートしている。<br>
* Layout.minimumWidth
*: 値 : real型 (既定値 : アイテムの暗黙の最小幅)
*: レイアウト内のアイテムの最小幅を設定する。
*: アイテムがレイアウトである場合、暗黙の最小幅は、どの項目もその最小幅よりも縮小することなくレイアウトが持つことができる最小幅になる。
*: (その他のアイテムにおける暗黙の最小幅は0である)
*: この値を<code>-1</code>に設定する場合、暗黙的な最小幅にリセットされる。
*: <code>preferredWidth</code>プロパティおよび<code>maximumWidth</code>プロパティも参照すること。
*: <br>
* Layout.minimumHeight
*: 値 : real型 (既定値 : アイテムの暗黙の最小の高さ)
*: レイアウト内のアイテムの最小の高さを設定する。
*: アイテムがレイアウトである場合、暗黙の最小の高さは、どのアイテムもその最小高さよりも縮小することなく、レイアウトが持つことのできる最小の高さになる。
*: (その他のアイテムの暗黙の最小の高さは0である)
*: この値を<code>-1</code>に設定する場合、高さが暗黙の最小値にリセットされる。
*: <code>preferredHeight</code>プロパティと<code>maximumHeight</code>プロパティも参照すること。
*: <br>
* Layout.preferredWidth
*: 値 : real型 (既定値 : -1)
*: レイアウト内のアイテムの優先幅を設定する。
*: 値が<code>-1</code>の場合、preferredWidthプロパティは無視されて、implicitWidthプロパティを使用する。
*: <code>minimumWidth</code>プロパティと<code>maximumWidth</code>プロパティも参照すること。
*: <br>
* Layout.preferredHeight
*: 値 : real型 (既定値 : -1)
*: レイアウト内のアイテムの優先する高さを設定する。
*: 値が-1の場合、preferredWidthプロパティは無視されて、implicitHeightプロパティを使用する。
*: <code>minimumHeight</code>プロパティと<code>maximumHeight</code>プロパティも参照すること。
*: <br>
* Layout.maximumWidth
*: 値 : real型 (既定値 : アイテムの暗黙の最大幅)
*: レイアウト内のアイテムの最大幅を設定する。
*: アイテムがレイアウトの場合、暗黙の最大幅は、レイアウトが最大幅を超えることなくレイアウトが持つことができる最大幅になる。
*: この値を<code>-1</code>に設定すると、幅が暗黙の最大幅にリセットされる。
*: <br>
*: レイアウト以外の場合、暗黙の最大幅は、<code>Number.POSITIVE_INFINITY</code>である。
*: <code>minimumWidth</code>プロパティおよび<code>preferredWidth</code>プロパティも参照すること。
*: <br>
* Layout.maximumHeight
*: 値 : real型 (既定値 : アイテムの暗黙の最大の高さ)
*: レイアウト内のアイテムの最大幅を設定する。
*: アイテムがレイアウトの場合、暗黙の最大の高さは、どのアイテムも最大の高さを超えずにレイアウトが持てる最大の高さになる。
*: この値を<code>-1</code>に設定する場合、高さは暗黙の最大の高さにリセットされる。
*: <br>
*: レイアウト以外の場合、暗黙の最大の高さは、<code>Number.POSITIVE_INFINITY</code>である。
*: <code>minimumHeight</code>プロパティと<code>preferredHeight</code>プロパティも参照すること。
*: <br>
* Layout.fillWidth
*: 値 : bool型 (レイアウトの既定値 : true, レイアウト内のアイテムの既定値 : false)
*: このプロパティが<code>true</code>の場合、レイアウト内のアイテムは、与えられた制約を尊重しながら可能な限り広くなる。
*: このプロパティが<code>false</code>の場合、レイアウト内のアイテムは、望ましい幅に設定された固定幅を持つ。
*: <br>
*: レイアウト内のアイテムの既定値は<code>false</code>であるが、レイアウト自体の既定値は<code>true</code>である。
*: <code>fillHeight</code>プロパティも参照すること。
*: <br>
* Layout.fillHeight
*: 値 : bool型 (レイアウトの既定値 : true, レイアウト内のアイテムの既定値 : false)
*: このプロパティが<code>true</code>の場合、レイアウト内のアイテムは、与えられた制約を尊重しながら可能な限り高さが高くなる。
*: このプロパティが<code>false</code>の場合、レイアウト内のアイテムは、望ましい高さに設定された固定の高さを持つ。
*: <br>
*: レイアウト内のアイテムの既定値は<code>false</code>であるが、レイアウト自体の既定値は<code>true</code>である。
*: <code>fillWidth</code>プロパティも参照すること。
*: <br>
* Layout.alignment
*: 値 : Qt.Alignment型 (既定値 : 0 … 0とは、<code>Qt.AlignVCenter | Qt.AlignLeft</code>のこと)
*: アイテムが占めるセル内の配置を指定する。
*: 既定値は、水平フラグまたは垂直フラグのみが指定された場合にも適用される。
*: 水平フラグのみが指定された場合でも、自動的に垂直フラグが<code>Qt.AlignVCenter</code>に設定される。
*: 垂直フラグのみが指定された場合でも、自動的に水平フラグが<code>Qt.AlignLeft</code>に設定される。
*: <br>
*: 以下に、使用できるフラグを示す。
*:* Qt.AlignLeft
*:* Qt.AlignHCenter
*:* Qt.AlignRight
*:* Qt.AlignTop
*:* Qt.AlignVCenter
*:* Qt.AlignBottom
*:* Qt.AlignBaseline
*: <br>
* Layout.margins
*: 値 : real型 (既定値 : 0)
*: アイテムの外側の余白をすべて同じ値に設定する。
*: アイテム自体は自身のマージンを評価しない。マージンを評価するかどうかは、親アイテムが決定する。
*: <br>
*: 具体的には、マージンが評価されるのは、<code>ColumnLayout</code>、<code>RowLayout</code>、<code>GridLayout</code>、<code>SplitView</code>等のレイアウトであり、マージンが大きくなるとアイテムの有効セルサイズが大きくなる。
*: したがって、マージンを持つアイテムが他のアイテムの子である場合、その位置、サイズ、暗黙のサイズは変更されない。
*: <br>
*: <code>margins</code>と<code>alignment</code>を組み合わせる場合、<code>margins</code>プロパティの値を含めてアイテムの位置を合わせる。
*: 例えば、上のマージンが1、下のマージンが9の垂直方向に中央に配置されたアイテムの場合、セル内でのアイテムの配置は、中央から4ピクセル上となる。
*: <br>
*: このプロパティは、QtQuick.Layouts 1.2で導入された。
*: <code>leftMargin</code>プロパティ、<code>topMargin</code>プロパティ、<code>rightMargin</code>プロパティ、<code>bottomMargin</code>プロパティも参照すること。
*: <br>
* Layout.topMargin
*: 値 : real型 (既定値 : <code>Layout.margins</code>の値)
*: アイテムの外側にある上の余白を設定する。
*: 値が設定されていない場合は、<code>Layout.margins</code>の値を使用する。
*: <br>
*: このプロパティは、QtQuick.Layouts 1.2で導入された。
*: <code>margins</code>プロパティも参照すること。
*: <br>
* Layout.bottomMargin
*: 値 : real型 (既定値 : <code>Layout.margins</code>の値)
*: アイテムの外側にある下の余白を設定する。
*: 値が設定されていない場合は、<code>Layout.margins</code>の値を使用する。
*: <br>
*: このプロパティは、QtQuick.Layouts 1.2で導入された。
*: <code>margins</code>プロパティも参照すること。
*: <br>
* Layout.leftMargin
*: 値 : real型 (既定値 : <code>Layout.margins</code>の値)
*: アイテムの外側にある左の余白を設定する。
*: 値が設定されていない場合は、<code>Layout.margins</code>の値を使用する。
*: <br>
*: このプロパティは、QtQuick.Layouts 1.2で導入された。
*: <code>margins</code>プロパティも参照すること。
*: <br>
* Layout.rightMargin
*: 値 : real型 (既定値 : <code>Layout.margins</code>の値)
*: アイテムの外側にある右の余白を設定する。
*: 値が設定されていない場合は、<code>Layout.margins</code>の値を使用する。
*: <br>
*: このプロパティは、QtQuick.Layouts 1.2で導入された。
*: <code>margins</code>プロパティも参照すること。
*: <br>
<br>
==== サンプルコード ====
<code>GridLayout</code>内の全ての可視アイテムは、レイアウトに属する。<br>
<br>
<code>GridLayout</code>のサイズが変更された場合、レイアウト内の全てのアイテムが再配置される。<br>
これは、ウィジェットベースの<code>QGridLayout</code>に似ている。<br>
<br>
1つの行または1つの列のみを持つレイアウトが必要な場合は、<code>RowLayout</code>または<code>ColumnLayout</code>を使用する。<br>
これらは、より便利なAPIを提供しているため、可読性が向上するからである。<br>
<br>
デフォルトの設定では、アイテムは<code>flow</code>プロパティにしたがって配置される。<br>
(<code>flow</code>プロパティの既定値は、<code>GridLayout.LeftToRight</code>)<br>
<br>
もし、<code>columns</code>プロパティを設定している場合、自動配置が次の行の先頭に折り返される前に、レイアウトが持つことのできる列数の最大値として扱われる。<br>
<code>columns</code>プロパティは、<code>flow</code>プロパティが<code>GridLayout.LeftToRight</code>の場合にのみ使用される。<br>
<br>
以下の例は、GridLayoutのサンプルコードである。<br>
 <syntaxhighlight lang="qml">
 GridLayout {
    id: grid
    columns: 3
 
    Text {
       text: "Three"
       font.bold: true
    }
 
    Text {
       text: "words"
       color: "red"
    }
 
    Text {
       text: "in"
       font.underline: true
    }
 
    Text {
       text: "a"
       font.pixelSize: 20
    }
 
    Text {
       text: "row"
       font.strikeout: true
    }
 }
 </syntaxhighlight>
<br>
<code>rows</code>プロパティも同様に動作するが、アイテムは垂直方向に自動配置される。<br>
また、<code>rows</code>プロパティは、<code>flow</code>が<code>GridLayout.TopToBottom</code>の場合にのみ使用される。<br>
<br>
<code>Layout.row</code>プロパティと<code>Layout.column</code>プロパティを設定することにより、アイテムが占めるセルを設定できる。<br>
また、<code>Layout.rowSpan</code>または<code>Layout.columnSpan</code>プロパティを設定することにより、行のスパンや列のスパンを設定できる。<br>
<br>
<code>GridLayout</code>内のアイテムは、これらの付属プロパティをサポートしている。<br>
<br><br>

__FORCETOC__
[[カテゴリ:Qt]]