📢 Webサイト閉鎖と移転のお知らせ
このWebサイトは2026年9月に閉鎖いたします。
新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）
| (同じ利用者による、間の2版が非表示) | |||
| 100行目: | 100行目: | ||
*: <br> | *: <br> | ||
*: このメソッドは、Qt 5.9で導入された。 | *: このメソッドは、Qt 5.9で導入された。 | ||
<br> | |||
==== サンプルコード ==== | |||
<code>Row</code>は、子アイテムを1つの行に沿って配置する。<br> | |||
<code>anchors</code>プロパティを使用せずに、一連のアイテムを水平方向に配置する便利な方法として使用できる。<br> | |||
<br> | |||
以下の例では、様々なサイズの3つの矩形を含む<code>Row</code>を作成している。<br> | |||
実行結果として、<code>Row</code>は、自動的にこれらのアイテムを横に並べて配置する。<br> | |||
[[ファイル:QML Row 1.png|フレームなし|中央]] | |||
<syntaxhighlight lang="qml"> | |||
Row { | |||
spacing: 2 | |||
Rectangle { | |||
color: "red" | |||
width: 50 | |||
height: 50 | |||
} | |||
Rectangle { | |||
color: "green" | |||
width: 20 | |||
height: 50 | |||
} | |||
Rectangle { | |||
color: "blue" | |||
width: 50 | |||
height: 20 | |||
} | |||
} | |||
</syntaxhighlight> | |||
<br> | |||
<code>Row</code>内のアイテムが表示されていない場合、または、幅や高さが0の場合は、そのアイテムはレイアウトされずに<code>Row</code>内に表示されない。<br> | |||
<br> | |||
また、<code>Row</code>は自動的に子アイテムを水平方向に配置するため、<br> | |||
<code>Row</code>内の子アイテムはx位置を設定したり、<code>left</code>、<code>right</code>、<code>anchors.horizontalCenter</code>、<code>fill</code>、<code>centerIn</code>等のアンカーを使用して水平方向に固定してはならない。<br> | |||
もし、上記の動作を行う必要がある場合は、<code>Row</code>を使用せずにアイテムを配置する。<br> | |||
<br> | |||
なお、<code>Row</code>内のアイテムは<code>Positioner</code>を使用して、<code>Row</code>内の位置に関する詳細情報にアクセスできる。<br> | |||
<br> | |||
<code>Row</code>やその他の関連するポジショナの使用方法については、[[QMLのコントロール - Positioner|Positioner]]を参照する。<br> | |||
また、<code>Column</code>、<code>Grid</code>、<code>Flow</code>、<code>RowLayout</code>も参照すること。<br> | |||
<br><br> | <br><br> | ||
| 247行目: | 289行目: | ||
==== サンプルコード ==== | ==== サンプルコード ==== | ||
以下の例は、<code>RowLayout</code>のサンプルコードである。<br> | |||
[[ファイル:QML RowLayout 1.png|フレームなし|中央]] | |||
<syntaxhighlight lang="qml"> | <syntaxhighlight lang="qml"> | ||
RowLayout { | RowLayout { | ||
| 253行目: | 296行目: | ||
anchors.fill: parent | anchors.fill: parent | ||
spacing: 6 | spacing: 6 | ||
Rectangle { | Rectangle { | ||
color: 'teal' | color: 'teal' | ||
| 260行目: | 304行目: | ||
Layout.maximumWidth: 300 | Layout.maximumWidth: 300 | ||
Layout.minimumHeight: 150 | Layout.minimumHeight: 150 | ||
Text { | Text { | ||
anchors.centerIn: parent | anchors.centerIn: parent | ||
| 272行目: | 317行目: | ||
Layout.preferredWidth: 200 | Layout.preferredWidth: 200 | ||
Layout.preferredHeight: 100 | Layout.preferredHeight: 100 | ||
Text { | Text { | ||
anchors.centerIn: parent | anchors.centerIn: parent | ||