MochiuWiki : SUSE, EC, PCB

「QMLのコントロール - RowとRowLayout」の版間の差分

📢 Webサイト閉鎖と移転のお知らせ
このWebサイトは2026年9月に閉鎖いたします。
新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）

ビジュアルウィキテキスト
ページの作成:「== 概要 == <code>Row</code>および<code>RowLayout</code>は、見やすいレイアウトを表示するために用意されている。<br> <br><br> == RowLayout =…」
 
 
(同じ利用者による、間の5版が非表示)
1行目: 1行目:
== 概要 ==
== 概要 ==
<code>Row</code>および<code>RowLayout</code>は、見やすいレイアウトを表示するために用意されている。<br>
<code>Row</code>および<code>RowLayout</code>は、見やすいレイアウトを表示するために用意されている。<br>
<br><br>
== Row ==
==== 専用プロパティ ====
* layoutDirection
*: 値 : enumeration型 (既定値 : Qt.LeftToRight)
*: このプロパティは、行のlayoutDirectionを設定する。
*: <br>
*: Qt.LeftToRightは、アイテムが左から右に向かってレイアウトされる。行の幅が明示的に設定されている場合、左アンカーは行の左に残る。
*: Qt.RightToLeftは、アイテムが右から左に向かってレイアウトされる。行の幅が明示的に設定されている場合、右アンカーは行の右に残る。
*: <br>
*: Grid.layoutDirectionプロパティやFlow.layoutDirectionプロパティも参照すること。
*: <br>
* effectiveLayoutDirection
*: 値 : enumeration型
*: 行の効果的なレイアウト方向を設定する。
*: ロケールレイアウトに対して<code>LayoutMirroring.enabled</code>プロパティを使用する場合、行の位置の視覚的なレイアウト方向がミラーリングされる。
*: ただし、<code>layoutDirection</code>プロパティは変更されない。
*: <br>
*: <code>Row.layoutDirection</code>プロパティおよび<code>LayoutMirroring</code>プロパティも参照すること。
*: <br>
* spacing
*: 値 : 実数 (既定値 : 0)
*: 隣り合うアイテムの間を空けるピクセル数を設定する。
*: Grid.spacingプロパティも参照すること。
*: <br>
* padding
* topPadding
* bottomPadding
* leftPadding
* rightPadding
*: 値 : real型
*: コンテンツの周りのパディングを設定する。
*: このプロパティは、Qt 5.6で導入された。
*: <br>
* add
*: 値 : Transition型
*: <code>Row</code>内のアイテムに対して実行されるトランジションを設定する。
*: アイテムがポジショナーの場合、以下のアイテムが該当する。
*:* ポジショナーが作成された後に、ポジショナーの子として作成または再配置されたアイテム
*:* 子アイテムの<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>Row</code>内で移動したアイテムに対して実行するトランジションを設定する。
*: <br>
*: アイテムがポジショナーの場合、以下のアイテムが該当する。
*:* ポジショナー内の他のアイテムの追加、削除、再配置により、位置がずれた子アイテムの移動
*:* ポジショナー内の他のアイテムのサイズ変更により再配置された子アイテム
*: <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>プロパティも参照すること。
*: <br>
* populate
*: 値 : Transition型
*: ポジショナーの作成時に、このポジショナーの一部であるアイテムに対して実行されるトランジションを設定する。
*: <code>populate</code>プロパティは、ポジショナーが最初に作成された時に実行される。
*: <br>
*: <code>populate</code>プロパティは、<code>ViewTransition</code>を使用して追加されるアイテムの詳細情報にアクセスできる。
*: <br>
*: これらのトランジションの詳細や使用例については、<code>ViewTransition</code>のドキュメントを参照すること。
*: また、<code>add</code>プロパティも参照すること。
<br>
==== シグナル ====
* positioningComplete()
*: このシグナルは、位置決めが完了した時に発行する。
*: <br>
*: <u>※注意</u>
*: <u>対応するハンドラは <code>onPositioningComplete()</code>である。</u>
*: <br>
*: このシグナルは、Qt 5.9で導入された。
<br>
==== メソッド ====
* forceLayout()
*: <code>Row</code>は、通常、フレームごとに1度だけ子プロセスを配置する。
*: <br>
*: スクリプト内では、下層の子アイテムが変更されても、<code>Row</code>がまだ更新されていない可能性がある。
*: しかし、<code>forceLayout</code>メソッドは、<code>Row</code>が子アイテムの変更に即座に対応することを強制する。
*: <br>
*: <u>※注意</u>
*: <u>一般的に、<code>forceLayout</code>メソッドは、コンポーネントが完了してから呼び出すべきである。</u>
*: <br>
*: このメソッドは、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>


== 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行目: 160行目:
*: 各セルの間隔を保持する。
*: 各セルの間隔を保持する。
<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型 (既定値 : アイテムの暗黙の最小幅)
85行目: 225行目:
*: <br>
*: <br>
* Layout.alignment
* Layout.alignment
*: 値 : Qt.Alignment型 (既定値 : 0) (0とは、<code>Qt.AlignVCenter | Qt.AlignLeft</code>のことである)
*: 値 : Qt.Alignment型 (既定値 : 0 … 0とは、<code>Qt.AlignVCenter | Qt.AlignLeft</code>のこと)
*: アイテムが占めるセル内の配置を指定する。
*: アイテムが占めるセル内の配置を指定する。
*: 既定値は、水平フラグまたは垂直フラグのみが指定された場合にも適用される。
*: 既定値は、水平フラグまたは垂直フラグのみが指定された場合にも適用される。
113行目: 253行目:
*: このプロパティは、QtQuick.Layouts 1.2で導入された。
*: このプロパティは、QtQuick.Layouts 1.2で導入された。
*: <code>leftMargin</code>プロパティ、<code>topMargin</code>プロパティ、<code>rightMargin</code>プロパティ、<code>bottomMargin</code>プロパティも参照すること。
*: <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>
*: <br>
* Layout.leftMargin
* Layout.leftMargin
*: 値 : real型 (既定値 : <code>Layout.margins</code>の値)
*: アイテムの外側にある左の余白を設定する。
*: 値が設定されていない場合は、<code>Layout.margins</code>の値を使用する。
*: <br>
*: このプロパティは、QtQuick.Layouts 1.2で導入された。
*: <code>margins</code>プロパティも参照すること。
*: <br>
* Layout.rightMargin
* Layout.rightMargin
* Layout.topMargin
*: 値 : real型 (既定値 : <code>Layout.margins</code>の値)
* Layout.bottomMargin
*: アイテムの外側にある右の余白を設定する。
*: 値が設定されていない場合は、<code>Layout.margins</code>の値を使用する。
*: <br>
*: このプロパティは、QtQuick.Layouts 1.2で導入された。
*: <code>margins</code>プロパティも参照すること。
*: <br>
<br>
<br>
==== サンプルコード ====
==== サンプルコード ====
以下の例は、RowLayoutのサンプルコードである。<br>
以下の例は、<code>RowLayout</code>のサンプルコードである。<br>
[[ファイル:QML RowLayout 1.png|フレームなし|中央]]
  <syntaxhighlight lang="qml">
  <syntaxhighlight lang="qml">
  RowLayout {
  RowLayout {
126行目: 296行目:
     anchors.fill: parent
     anchors.fill: parent
     spacing: 6
     spacing: 6
     Rectangle {
     Rectangle {
       color: 'teal'
       color: 'teal'
133行目: 304行目:
       Layout.maximumWidth: 300
       Layout.maximumWidth: 300
       Layout.minimumHeight: 150
       Layout.minimumHeight: 150
       Text {
       Text {
           anchors.centerIn: parent
           anchors.centerIn: parent
145行目: 317行目:
       Layout.preferredWidth: 200
       Layout.preferredWidth: 200
       Layout.preferredHeight: 100
       Layout.preferredHeight: 100
       Text {
       Text {
           anchors.centerIn: parent
           anchors.centerIn: parent
「http://mochiuwiki.e2.valueserver.jp/index.php?title=QMLのコントロール_-_RowとRowLayout」から取得