QMLのコントロール - Positionerアイテム - 版の履歴

Wiki: /* Positionerアイテムの種類 */

2021-10-14T08:54:47Z

Positionerアイテムの種類

← 古い版		2021年10月14日 (木) 17:54時点における版
24行目:		24行目:
	\| [[QMLのコントロール - Flow\|Flow]] \|\| 必要に応じて折り返しながら、子を横に並べて配置する。		\| [[QMLのコントロール - Flow\|Flow]] \|\| 必要に応じて折り返しながら、子を横に並べて配置する。
	\|-		\|-
	\| [[QMLのコントロール - ~~LayoutMirroring~~\|LayoutMirroring]] \|\| レイアウトの動作をミラーリングするためのプロパティ。		\| [[QMLのコントロール - Positionerアイテム#LayoutMirroringプロパティ\|LayoutMirroring]] \|\| レイアウトの動作をミラーリングするためのプロパティ。
	\|-		\|-
	\| [[QMLのコントロール - Positioner\|Positioner]] \|\| Positionerアイテム内の子アイテムがどこに存在するかの詳細を含むプロパティ。		\| [[QMLのコントロール - Positioner\|Positioner]] \|\| Positionerアイテム内の子アイテムがどこに存在するかの詳細を含むプロパティ。

Wiki: /* Flow */

2021-10-14T08:49:12Z

Flow

@@ 256行目: / 256行目: @@
+  }
   </syntaxhighlight>
 <br><br>
 __FORCETOC__
 [[カテゴリ:Qt]]

Wiki: ページの作成:「== 概要 == Positionerアイテムとは、宣言型UIのアイテムの位置を管理するコンテナアイテムである。
多くのアイテムを通常の…」

2021-10-14T05:39:57Z

ページの作成:「== 概要 == Positionerアイテムとは、宣言型UIのアイテムの位置を管理するコンテナアイテムである。 多くのアイテムを通常の…」

新規ページ

== 概要 ==
Positionerアイテムとは、宣言型UIのアイテムの位置を管理するコンテナアイテムである。 
多くのアイテムを通常のレイアウトに配置する必要がある場合に、容易に設計することができる。 
 
Qtの標準的なウィジェットで使用されているレイアウトマネージャと同じように動作するが、それ自体がコンテナであることが異なる。 
 
PositionerアイテムはQt Quick Layoutsに含まれており、UI上のアイテムの位置とサイズの両方を管理しており、サイズ変更可能なデザインに使用する。 
 

== Positionerアイテムの種類 ==
下表に、標準的なPositionerアイテムを示す。 
<center>
{| class="wikitable" | style="background-color:#fefefe;"
|-
! style="background-color:#66CCFF;" | Positionerアイテム名
! style="background-color:#66CCFF;" | 説明
|-
| [[QMLのコントロール - RowとRowLayout|Row]] || 行の中の子を一列に配置する。
|-
| [[QMLのコントロール - ColumnとColumnLayout|Column]] || 列の中に子を配置する。
|-
| [[QMLのコントロール - GridとGridLayout|Grid]] || グリッドの中の子を配置する。
|-
| [[QMLのコントロール - Flow|Flow]] || 必要に応じて折り返しながら、子を横に並べて配置する。
|-
| [[QMLのコントロール - LayoutMirroring|LayoutMirroring]] || レイアウトの動作をミラーリングするためのプロパティ。
|-
| [[QMLのコントロール - Positioner|Positioner]] || Positionerアイテム内の子アイテムがどこに存在するかの詳細を含むプロパティ。
|}
</center>
 

== Row ==
<code>Row</code>は、アイテムを水平方向に並べるために使用する。 
 
以下の例では、行アイテムを使用して、3つの丸みを帯びた<code>Rectangle</code>を、外側の<code>Rectangle</code>で定義された領域に配置している。 
<code>spacing</code>プロパティは、<code>Rectangle</code>の間にわずかなスペースを空けるように設定している。 
 
親アイテムの<code>Rectangle</code>が十分な大きさであることを確認して、水平方向に中央に配置された<code>Row</code>の端にスペースを空けている。 
[[ファイル:QML Positioner Item 1.png|フレームなし|中央]]
<syntaxhighlight lang="qml">
import QtQuick 2.0

Rectangle {
width: 320
height: 110
color: "#c0c0c0"

Row {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter

spacing: 5

Rectangle {
width: 100
height: 100
radius: 20.0
color: "#024c1c"
}

Rectangle {
width: 100
height: 100
radius: 20.0
color: "#42a51c"
}

Rectangle {
width: 100
height: 100
radius: 20.0
color: "white"
}
}
}
</syntaxhighlight>
 

== Column ==
<code>Column</code>は、アイテムを垂直に並べるために使用する。 
 
以下の例では、Columnを使用して、外側のアイテムで定義された領域に3つのRectangleを配置している。 
spacingプロパティは、四角形の間にわずかなスペースを含むように設定している。 
 
なお、<code>Column</code>は<code>Item</code>を継承しているため、背景色が必要な場合は、親の<code>Rectangle</code>にプロパティを追加する必要がある。 
[[ファイル:QML Positioner Item 2.png|フレームなし|中央]]
<syntaxhighlight lang="qml">
import QtQuick 2.0

Item {
width: 310; height: 170

Column {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter

spacing: 5

Rectangle {
color: "lightblue"
radius: 10.0
width: 300
height: 50

Text {
anchors.centerIn: parent
font.pointSize: 24
text: "Books"
}
}

Rectangle {
color: "gold"
radius: 10.0
width: 300
height: 50

Text {
anchors.centerIn: parent
font.pointSize: 24
text: "Music"
}
}

Rectangle {
color: "lightgreen"
radius: 10.0
width: 300
height: 50

Text {
anchors.centerIn: parent
font.pointSize: 24
text: "Movies"
}
}
}
}
</syntaxhighlight>
 

== Grid ==
<code>Grid</code>は、子アイテムを格子状またはテーブル状に配置する。 
 
以下の例では、<code>Grid</code>を使用して、4つの<code>Rectangle</code>を2×2の格子状に配置している。 
他の<code>Positioner</code>アイテムと同様、アイテム間の間隔は、<code>spacing</code>プロパティを使用して設定できる。 
アイテム間に挿入される水平方向の間隔と垂直方向の間隔には違いが無いため、追加のスペースは子アイテム自体の中に追加する必要がある。 
 
格子状内の空のセルは、<code>Grid</code>内の適切な場所にプレースホルダアイテムを定義して作成する必要がある。 
[[ファイル:QML Positioner Item 3.png|フレームなし|中央]]
<syntaxhighlight lang="qml">
import QtQuick 2.0

Rectangle {
width: 112
height: 112
color: "#303030"

Grid {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
columns: 2
spacing: 6

Rectangle {
color: "#aa6666"
width: 50
height: 50
}

Rectangle {
color: "#aaaa66"
width: 50
height: 50
}

Rectangle {
color: "#9999aa"
width: 50
height: 50
}

Rectangle {
color: "#6666aa"
width: 50
height: 50
}
}
}
</syntaxhighlight>
 

== Flow ==
<code>Flow</code>は、ページ上に単語のようなアイテムを、重ならないように行や列で配置する。 
 
これは、<code>Grid</code>のように、1つの軸（短軸）に沿ってアイテムを並べて、もう1つの軸（長軸）に沿ってアイテムを隣り合わせに並べる。 
並べる方向とアイテム間の間隔は、<code>flow</code>と<code>spacing</code>プロパティで制御される。 
また、<code>Grid</code>と同様に、アイテム間やアイテムの行間の間隔を独立して制御することはできない。 
 
以下に、<code>Flow</code>と<code>Grid</code>の主な違いを示す。 
* <code>Flow</code>内のアイテムは短軸のスペースが無くなると折り返される。
* アイテムのサイズが均一でない場合、1行のアイテムが他の行のアイテムと揃わないことがある。
 
以下の例では、<code>Flow</code>内に<code>Text</code>の子アイテムがいくつか作成している。 
これらは、下図で示したものと同様の方法で配置されている。 
[[ファイル:QML Positioner Item 4.png|フレームなし|中央]]
<syntaxhighlight lang="qml">
import QtQuick 2.0

Rectangle {
color: "lightblue"
width: 300
height: 200

Flow {
anchors.fill: parent
anchors.margins: 4
spacing: 10

Text {
text: "Text"
font.pixelSize: 40
}

Text {
text: "items"
font.pixelSize: 40
}

Text {
text: "flowing"
font.pixelSize: 40
}

Text {
text: "inside"
font.pixelSize: 40
}

Text {
text: "a"
font.pixelSize: 40
}

Text {
text: "Flow"
font.pixelSize: 40
}

Text {
text: "item"
font.pixelSize: 40
}
}
}
</syntaxhighlight>
 

__FORCETOC__
[[カテゴリ:Qt]]

QMLのコントロール - Positionerアイテム - 版の履歴

Wiki: /* Positionerアイテムの種類 */

Wiki: /* Flow */

Wiki: ページの作成:「== 概要 == Positionerアイテムとは、宣言型UIのアイテムの位置を管理するコンテナアイテムである。 多くのアイテムを通常の…」

Wiki: ページの作成:「== 概要 == Positionerアイテムとは、宣言型UIのアイテムの位置を管理するコンテナアイテムである。
多くのアイテムを通常の…」