QMLのコントロール - RowとRowLayout - 版の履歴

Wiki: /* サンプルコード */

2021-10-13T15:57:16Z

サンプルコード

@@ 131行目: / 131行目: @@
+  }
   </syntaxhighlight>
 <br><br>

Wiki: /* サンプルコード */

2021-10-13T14:55:22Z

サンプルコード

← 古い版		2021年10月13日 (水) 23:55時点における版
278行目:		278行目:

	==== サンプルコード ====		==== サンプルコード ====
	~~以下の例は、RowLayoutのサンプルコードである。~~<br>		以下の例は、<code>RowLayout</code>のサンプルコードである。<br>
			[[ファイル:QML RowLayout 1.png\|フレームなし\|中央]]
	<syntaxhighlight lang="qml">		<syntaxhighlight lang="qml">
	RowLayout {		RowLayout {
284行目:		285行目:
	anchors.fill: parent		anchors.fill: parent
	spacing: 6		spacing: 6

	Rectangle {		Rectangle {
	color: 'teal'		color: 'teal'
291行目:		293行目:
	Layout.maximumWidth: 300		Layout.maximumWidth: 300
	Layout.minimumHeight: 150		Layout.minimumHeight: 150

	Text {		Text {
	anchors.centerIn: parent		anchors.centerIn: parent
303行目:		306行目:
	Layout.preferredWidth: 200		Layout.preferredWidth: 200
	Layout.preferredHeight: 100		Layout.preferredHeight: 100

	Text {		Text {
	anchors.centerIn: parent		anchors.centerIn: parent

Wiki: /* メソッド */

2021-10-13T14:54:13Z

メソッド

@@ 100行目: / 100行目: @@
 *: <br>
 *: このメソッドは、Qt 5.9で導入された。
 <br><br>

Wiki: /* 概要 */

2021-10-13T14:45:35Z

概要

@@ 1行目: / 1行目: @@
 == 概要 ==
 <code>Row</code>および<code>RowLayout</code>は、見やすいレイアウトを表示するために用意されている。<br>
 <br><br>

Wiki: /* RowLayout */

2021-10-13T05:15:26Z

RowLayout

← 古い版		2021年10月13日 (水) 14:15時点における版
4行目:		4行目:

	== RowLayout ==		== RowLayout ==
	==== ~~プロパティ~~ ====		==== 専用プロパティ ====
	~~<code>layoutDirection</code>プロパティは、<code>RowLayout</code>のレイアウト方向を設定する。(<u>QtQuick.Layouts 1.1</u>で導入された)<br>~~
	~~これは、アイテムを左から右にレイアウトするか、右から左にレイアウトするかを制御する。<br>~~
	~~<br>~~
	例えば、<code>layoutDirection</code>プロパティに<code>Qt.RightToLeft</code>が指定されている場合、左揃えのアイテムは右揃えになり、右揃えのアイテムは左揃えになる。<br>
	* layoutDirection		* layoutDirection
	*: 値 : Qt.LeftToRight(~~既定値~~)		*: 値 : enumeration (既定値 : Qt.LeftToRight)
	*: ~~アイテムが左から右にレイアウトされる。~~		*: このプロパティは、アイテムを左から右にレイアウト、または、右から左にレイアウトするかどうかを制御する。(<u>QtQuick.Layouts 1.1</u>で導入された)
	*: 値 : Qt.RightToLeft		*: <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>		*: <br>
	* spacing		* spacing
19行目:		19行目:
	*: 各セルの間隔を保持する。		*: 各セルの間隔を保持する。
	<br>		<br>
	<code>~~GridLayout~~</code>~~や<code>ColumnLayout</code>にも<code>layoutDirection</code>プロパティが存在する。<br>~~		==== プロパティ ====
	~~<br>~~		<code>RowLayout</code>は、以下のプロパティもサポートしている。<br>
	~~RowLayoutは、以下のプロパティもサポートしている。~~<br>
	* Layout.minimumWidth		* Layout.minimumWidth
	*: 値 : real型 (既定値 : アイテムの暗黙の最小幅)		*: 値 : real型 (既定値 : アイテムの暗黙の最小幅)

Wiki: /* プロパティ */

2021-10-13T04:47:46Z

プロパティ

@@ 85行目: / 85行目: @@
 *: <br>
 * Layout.alignment
-*: 値 : Qt.Alignment型 (既定値 : 0) (0とは、<code>Qt.AlignVCenter | Qt.AlignLeft</code>のことである)
+*: 値 : Qt.Alignment型 (既定値 : 0 … 0とは、<code>Qt.AlignVCenter | Qt.AlignLeft</code>のこと)
 *: アイテムが占めるセル内の配置を指定する。
 *: 既定値は、水平フラグまたは垂直フラグのみが指定された場合にも適用される。
@@ 113行目: / 113行目: @@
 *: このプロパティは、QtQuick.Layouts 1.2で導入された。
 *: <code>leftMargin</code>プロパティ、<code>topMargin</code>プロパティ、<code>rightMargin</code>プロパティ、<code>bottomMargin</code>プロパティも参照すること。
 *: <br>
 * Layout.leftMargin
 * Layout.rightMargin
-* Layout.topMargin
+*: 値 : real型 (既定値 : <code>Layout.margins</code>の値)
-* Layout.bottomMargin
+*: アイテムの外側にある右の余白を設定する。
 <br>
 ==== サンプルコード ====
 以下の例は、RowLayoutのサンプルコードである。<br>

Wiki: ページの作成:「== 概要 == `Row`および`RowLayout`は、見やすいレイアウトを表示するために用意されている。

== RowLayout =…」

2021-10-13T03:45:09Z

ページの作成:「== 概要 == <code>Row</code>および<code>RowLayout</code>は、見やすいレイアウトを表示するために用意されている。 == RowLayout =…」

新規ページ

== 概要 ==
<code>Row</code>および<code>RowLayout</code>は、見やすいレイアウトを表示するために用意されている。 
 

== RowLayout ==
==== プロパティ ====
<code>layoutDirection</code>プロパティは、<code>RowLayout</code>のレイアウト方向を設定する。(QtQuick.Layouts 1.1で導入された) 
これは、アイテムを左から右にレイアウトするか、右から左にレイアウトするかを制御する。 
 
例えば、<code>layoutDirection</code>プロパティに<code>Qt.RightToLeft</code>が指定されている場合、左揃えのアイテムは右揃えになり、右揃えのアイテムは左揃えになる。 
* layoutDirection
*: 値 : Qt.LeftToRight(既定値)
*: アイテムが左から右にレイアウトされる。
*: 値 : Qt.RightToLeft
*: 項目が右から左に向かって配置される。
*: 
* spacing
*: 値 : real型 (既定値 : 5)
*: 各セルの間隔を保持する。
 
<code>GridLayout</code>や<code>ColumnLayout</code>にも<code>layoutDirection</code>プロパティが存在する。 
 
RowLayoutは、以下のプロパティもサポートしている。 
* Layout.minimumWidth
*: 値 : real型 (既定値 : アイテムの暗黙の最小幅)
*: レイアウト内のアイテムの最小幅を設定する。
*: アイテムがレイアウトである場合、暗黙の最小幅は、どの項目もその最小幅よりも縮小することなくレイアウトが持つことができる最小幅になる。
*: (その他のアイテムにおける暗黙の最小幅は0である)
*: この値を<code>-1</code>に設定する場合、暗黙的な最小幅にリセットされる。
*: <code>preferredWidth</code>プロパティおよび<code>maximumWidth</code>プロパティも参照すること。
*: 
* Layout.minimumHeight
*: 値 : real型 (既定値 : アイテムの暗黙の最小の高さ)
*: レイアウト内のアイテムの最小の高さを設定する。
*: アイテムがレイアウトである場合、暗黙の最小の高さは、どのアイテムもその最小高さよりも縮小することなく、レイアウトが持つことのできる最小の高さになる。
*: (その他のアイテムの暗黙の最小の高さは0である)
*: この値を<code>-1</code>に設定する場合、高さが暗黙の最小値にリセットされる。
*: <code>preferredHeight</code>プロパティと<code>maximumHeight</code>プロパティも参照すること。
*: 
* Layout.preferredWidth
*: 値 : real型 (既定値 : -1)
*: レイアウト内のアイテムの優先幅を設定する。
*: 値が<code>-1</code>の場合、preferredWidthプロパティは無視されて、implicitWidthプロパティを使用する。
*: <code>minimumWidth</code>プロパティと<code>maximumWidth</code>プロパティも参照すること。
*: 
* Layout.preferredHeight
*: 値 : real型 (既定値 : -1)
*: レイアウト内のアイテムの優先する高さを設定する。
*: 値が-1の場合、preferredWidthプロパティは無視されて、implicitHeightプロパティを使用する。
*: <code>minimumHeight</code>プロパティと<code>maximumHeight</code>プロパティも参照すること。
*: 
* Layout.maximumWidth
*: 値 : real型 (既定値 : アイテムの暗黙の最大幅)
*: レイアウト内のアイテムの最大幅を設定する。
*: アイテムがレイアウトの場合、暗黙の最大幅は、レイアウトが最大幅を超えることなくレイアウトが持つことができる最大幅になる。
*: この値を<code>-1</code>に設定すると、幅が暗黙の最大幅にリセットされる。
*: 
*: レイアウト以外の場合、暗黙の最大幅は、<code>Number.POSITIVE_INFINITY</code>である。
*: <code>minimumWidth</code>プロパティおよび<code>preferredWidth</code>プロパティも参照すること。
*: 
* Layout.maximumHeight
*: 値 : real型 (既定値 : アイテムの暗黙の最大の高さ)
*: レイアウト内のアイテムの最大幅を設定する。
*: アイテムがレイアウトの場合、暗黙の最大の高さは、どのアイテムも最大の高さを超えずにレイアウトが持てる最大の高さになる。
*: この値を<code>-1</code>に設定する場合、高さは暗黙の最大の高さにリセットされる。
*: 
*: レイアウト以外の場合、暗黙の最大の高さは、<code>Number.POSITIVE_INFINITY</code>である。
*: <code>minimumHeight</code>プロパティと<code>preferredHeight</code>プロパティも参照すること。
*: 
* Layout.fillWidth
*: 値 : bool型 (レイアウトの既定値 : true, レイアウト内のアイテムの既定値 : false)
*: このプロパティが<code>true</code>の場合、レイアウト内のアイテムは、与えられた制約を尊重しながら可能な限り広くなる。
*: このプロパティが<code>false</code>の場合、レイアウト内のアイテムは、望ましい幅に設定された固定幅を持つ。
*: 
*: レイアウト内のアイテムの既定値は<code>false</code>であるが、レイアウト自体の既定値は<code>true</code>である。
*: <code>fillHeight</code>プロパティも参照すること。
*: 
* Layout.fillHeight
*: 値 : bool型 (レイアウトの既定値 : true, レイアウト内のアイテムの既定値 : false)
*: このプロパティが<code>true</code>の場合、レイアウト内のアイテムは、与えられた制約を尊重しながら可能な限り高さが高くなる。
*: このプロパティが<code>false</code>の場合、レイアウト内のアイテムは、望ましい高さに設定された固定の高さを持つ。
*: 
*: レイアウト内のアイテムの既定値は<code>false</code>であるが、レイアウト自体の既定値は<code>true</code>である。
*: <code>fillWidth</code>プロパティも参照すること。
*: 
* Layout.alignment
*: 値 : Qt.Alignment型 (既定値 : 0) (0とは、<code>Qt.AlignVCenter | Qt.AlignLeft</code>のことである)
*: アイテムが占めるセル内の配置を指定する。
*: 既定値は、水平フラグまたは垂直フラグのみが指定された場合にも適用される。
*: 水平フラグのみが指定された場合でも、自動的に垂直フラグが<code>Qt.AlignVCenter</code>に設定される。
*: 垂直フラグのみが指定された場合でも、自動的に水平フラグが<code>Qt.AlignLeft</code>に設定される。
*: 
*: 以下に、使用できるフラグを示す。
*:* Qt.AlignLeft
*:* Qt.AlignHCenter
*:* Qt.AlignRight
*:* Qt.AlignTop
*:* Qt.AlignVCenter
*:* Qt.AlignBottom
*:* Qt.AlignBaseline
*: 
* Layout.margins
*: 値 : real型 (既定値 : 0)
*: アイテムの外側の余白をすべて同じ値に設定する。
*: アイテム自体は自身のマージンを評価しない。マージンを評価するかどうかは、親アイテムが決定する。
*: 
*: 具体的には、マージンが評価されるのは、<code>ColumnLayout</code>、<code>RowLayout</code>、<code>GridLayout</code>、<code>SplitView</code>等のレイアウトであり、マージンが大きくなるとアイテムの有効セルサイズが大きくなる。
*: したがって、マージンを持つアイテムが他のアイテムの子である場合、その位置、サイズ、暗黙のサイズは変更されない。
*: 
*: <code>margins</code>と<code>alignment</code>を組み合わせる場合、<code>margins</code>プロパティの値を含めてアイテムの位置を合わせる。
*: 例えば、上のマージンが1、下のマージンが9の垂直方向に中央に配置されたアイテムの場合、セル内でのアイテムの配置は、中央から4ピクセル上となる。
*: 
*: このプロパティは、QtQuick.Layouts 1.2で導入された。
*: <code>leftMargin</code>プロパティ、<code>topMargin</code>プロパティ、<code>rightMargin</code>プロパティ、<code>bottomMargin</code>プロパティも参照すること。
*: 
* Layout.leftMargin
* Layout.rightMargin
* Layout.topMargin
* Layout.bottomMargin
 
==== サンプルコード ====
以下の例は、RowLayoutのサンプルコードである。 
<syntaxhighlight lang="qml">
RowLayout {
id: layout
anchors.fill: parent
spacing: 6
Rectangle {
color: 'teal'
Layout.fillWidth: true
Layout.minimumWidth: 50
Layout.preferredWidth: 100
Layout.maximumWidth: 300
Layout.minimumHeight: 150
Text {
anchors.centerIn: parent
text: parent.width + 'x' + parent.height
}
}

Rectangle {
color: 'plum'
Layout.fillWidth: true
Layout.minimumWidth: 100
Layout.preferredWidth: 200
Layout.preferredHeight: 100
Text {
anchors.centerIn: parent
text: parent.width + 'x' + parent.height
}
}
}
</syntaxhighlight>
 

__FORCETOC__
[[カテゴリ:Qt]]

QMLのコントロール - RowとRowLayout - 版の履歴

Wiki: /* サンプルコード */

Wiki: /* サンプルコード */

Wiki: /* メソッド */

Wiki: /* 概要 */

Wiki: /* RowLayout */

Wiki: /* プロパティ */

Wiki: ページの作成:「== 概要 == RowおよびRowLayoutは、見やすいレイアウトを表示するために用意されている。 == RowLayout =…」

Wiki: ページの作成:「== 概要 == `Row`および`RowLayout`は、見やすいレイアウトを表示するために用意されている。

== RowLayout =…」