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

提供：MochiuWiki : SUSE, EC, PCB
ナビゲーションに移動 検索に移動

概要

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


Row

専用プロパティ

  • layoutDirection
    値 : enumeration型 (既定値 : Qt.LeftToRight)
    このプロパティは、行のlayoutDirectionを設定する。

    Qt.LeftToRightは、アイテムが左から右に向かってレイアウトされる。行の幅が明示的に設定されている場合、左アンカーは行の左に残る。
    Qt.RightToLeftは、アイテムが右から左に向かってレイアウトされる。行の幅が明示的に設定されている場合、右アンカーは行の右に残る。

    Grid.layoutDirectionプロパティやFlow.layoutDirectionプロパティも参照すること。

  • effectiveLayoutDirection
    値 : enumeration型
    行の効果的なレイアウト方向を設定する。
    ロケールレイアウトに対してLayoutMirroring.enabledプロパティを使用する場合、行の位置の視覚的なレイアウト方向がミラーリングされる。
    ただし、layoutDirectionプロパティは変更されない。

    Row.layoutDirectionプロパティおよびLayoutMirroringプロパティも参照すること。

  • spacing
    値 : 実数 (既定値 : 0)
    隣り合うアイテムの間を空けるピクセル数を設定する。
    Grid.spacingプロパティも参照すること。

  • padding
  • topPadding
  • bottomPadding
  • leftPadding
  • rightPadding
    値 : real型
    コンテンツの周りのパディングを設定する。
    このプロパティは、Qt 5.6で導入された。

  • add
    値 : Transition型
    Row内のアイテムに対して実行されるトランジションを設定する。
    アイテムがポジショナーの場合、以下のアイテムが該当する。
    • ポジショナーが作成された後に、ポジショナーの子として作成または再配置されたアイテム
    • 子アイテムのvisibleプロパティの値がfalseからtrueに変更されて、可視状態になったアイテム

    トランジションは、ViewTransitionを使用して、追加されるアイテムの詳細にアクセスできる。
    これらのトランジションの使用に関する詳細と例については、ViewTransitionのドキュメントを参照すること。

    ※注意
    addプロパティは、作成時に既にポジショナーの一部となっているアイテムには適用されない。
    この場合は、代わりにpopulateプロパティが適用される。

    populateやViewTransitionも参照すること。

  • move
    値 : Transition型
    Row内で移動したアイテムに対して実行するトランジションを設定する。

    アイテムがポジショナーの場合、以下のアイテムが該当する。
    • ポジショナー内の他のアイテムの追加、削除、再配置により、位置がずれた子アイテムの移動
    • ポジショナー内の他のアイテムのサイズ変更により再配置された子アイテム

    トランジションでは、ViewTransitionを使用して、移動されるアイテムの詳細にアクセスすることができる。

    ※注意
    ただし、moveプロパティでは、ViewTransition.targetIndexesプロパティとViewTransition.targetItemsプロパティは、
    ポジショナーに他のアイテムが追加されて、moveプロパティがトリガーされた場合にのみ設定される。
    それ以外の場合は、これらのリストは空になる。

    これらのトランジションの詳細や使用例については、ViewTransitionのドキュメントを参照すること。
    また、addプロパティ、populateプロパティも参照すること。

  • populate
    値 : Transition型
    ポジショナーの作成時に、このポジショナーの一部であるアイテムに対して実行されるトランジションを設定する。
    populateプロパティは、ポジショナーが最初に作成された時に実行される。

    populateプロパティは、ViewTransitionを使用して追加されるアイテムの詳細情報にアクセスできる。

    これらのトランジションの詳細や使用例については、ViewTransitionのドキュメントを参照すること。
    また、addプロパティも参照すること。


シグナル

  • positioningComplete()
    このシグナルは、位置決めが完了した時に発行する。

    ※注意
    対応するハンドラは onPositioningComplete()である。

    このシグナルは、Qt 5.9で導入された。


メソッド

  • forceLayout()
    Rowは、通常、フレームごとに1度だけ子プロセスを配置する。

    スクリプト内では、下層の子アイテムが変更されても、Rowがまだ更新されていない可能性がある。
    しかし、forceLayoutメソッドは、Rowが子アイテムの変更に即座に対応することを強制する。

    ※注意
    一般的に、forceLayoutメソッドは、コンポーネントが完了してから呼び出すべきである。

    このメソッドは、Qt 5.9で導入された。


サンプルコード

Rowは、子アイテムを1つの行に沿って配置する。
anchorsプロパティを使用せずに、一連のアイテムを水平方向に配置する便利な方法として使用できる。

以下の例では、様々なサイズの3つの矩形を含むRowを作成している。
実行結果として、Rowは、自動的にこれらのアイテムを横に並べて配置する。

QML Row 1.png
 Row {
    spacing: 2
 
    Rectangle {
       color: "red"
       width: 50
       height: 50
    }
 
    Rectangle {
       color: "green"
       width: 20
       height: 50
    }
 
    Rectangle {
       color: "blue"
       width: 50
       height: 20
    }
 }


Row内のアイテムが表示されていない場合、または、幅や高さが0の場合は、そのアイテムはレイアウトされずにRow内に表示されない。

また、Rowは自動的に子アイテムを水平方向に配置するため、
Row内の子アイテムはx位置を設定したり、left、right、anchors.horizontalCenter、fill、centerIn等のアンカーを使用して水平方向に固定してはならない。
もし、上記の動作を行う必要がある場合は、Rowを使用せずにアイテムを配置する。

なお、Row内のアイテムはPositionerを使用して、Row内の位置に関する詳細情報にアクセスできる。

Rowやその他の関連するポジショナの使用方法については、Positionerを参照する。
また、Column、Grid、Flow、RowLayoutも参照すること。


RowLayout

専用プロパティ

  • layoutDirection
    値 : enumeration (既定値 : Qt.LeftToRight)
    このプロパティは、アイテムを左から右にレイアウト、または、右から左にレイアウトするかどうかを制御する。(QtQuick.Layouts 1.1で導入された)

    既定値のQt.LeftToRightは、アイテムを左から右に配置する。
    値にQt.RightToLeftを指定する場合、アイテムを右から左に向かって配置する。
    また、Qt.RightToLeftが指定されている場合、左揃えのアイテムは右揃えになり、右揃えのアイテムは左揃えになる。

    RowLayout、ColumnLayout、GridLayoutには、layoutDirectionプロパティが存在する。

  • spacing
    値 : real型 (既定値 : 5)
    各セルの間隔を保持する。


プロパティ

RowLayoutは、以下のプロパティもサポートしている。

  • Layout.minimumWidth
    値 : real型 (既定値 : アイテムの暗黙の最小幅)
    レイアウト内のアイテムの最小幅を設定する。
    アイテムがレイアウトである場合、暗黙の最小幅は、どの項目もその最小幅よりも縮小することなくレイアウトが持つことができる最小幅になる。
    (その他のアイテムにおける暗黙の最小幅は0である)
    この値を-1に設定する場合、暗黙的な最小幅にリセットされる。
    preferredWidthプロパティおよびmaximumWidthプロパティも参照すること。

  • Layout.minimumHeight
    値 : real型 (既定値 : アイテムの暗黙の最小の高さ)
    レイアウト内のアイテムの最小の高さを設定する。
    アイテムがレイアウトである場合、暗黙の最小の高さは、どのアイテムもその最小高さよりも縮小することなく、レイアウトが持つことのできる最小の高さになる。
    (その他のアイテムの暗黙の最小の高さは0である)
    この値を-1に設定する場合、高さが暗黙の最小値にリセットされる。
    preferredHeightプロパティとmaximumHeightプロパティも参照すること。

  • Layout.preferredWidth
    値 : real型 (既定値 : -1)
    レイアウト内のアイテムの優先幅を設定する。
    値が-1の場合、preferredWidthプロパティは無視されて、implicitWidthプロパティを使用する。
    minimumWidthプロパティとmaximumWidthプロパティも参照すること。

  • Layout.preferredHeight
    値 : real型 (既定値 : -1)
    レイアウト内のアイテムの優先する高さを設定する。
    値が-1の場合、preferredWidthプロパティは無視されて、implicitHeightプロパティを使用する。
    minimumHeightプロパティとmaximumHeightプロパティも参照すること。

  • Layout.maximumWidth
    値 : real型 (既定値 : アイテムの暗黙の最大幅)
    レイアウト内のアイテムの最大幅を設定する。
    アイテムがレイアウトの場合、暗黙の最大幅は、レイアウトが最大幅を超えることなくレイアウトが持つことができる最大幅になる。
    この値を-1に設定すると、幅が暗黙の最大幅にリセットされる。

    レイアウト以外の場合、暗黙の最大幅は、Number.POSITIVE_INFINITYである。
    minimumWidthプロパティおよびpreferredWidthプロパティも参照すること。

  • Layout.maximumHeight
    値 : real型 (既定値 : アイテムの暗黙の最大の高さ)
    レイアウト内のアイテムの最大幅を設定する。
    アイテムがレイアウトの場合、暗黙の最大の高さは、どのアイテムも最大の高さを超えずにレイアウトが持てる最大の高さになる。
    この値を-1に設定する場合、高さは暗黙の最大の高さにリセットされる。

    レイアウト以外の場合、暗黙の最大の高さは、Number.POSITIVE_INFINITYである。
    minimumHeightプロパティとpreferredHeightプロパティも参照すること。

  • Layout.fillWidth
    値 : bool型 (レイアウトの既定値 : true, レイアウト内のアイテムの既定値 : false)
    このプロパティがtrueの場合、レイアウト内のアイテムは、与えられた制約を尊重しながら可能な限り広くなる。
    このプロパティがfalseの場合、レイアウト内のアイテムは、望ましい幅に設定された固定幅を持つ。

    レイアウト内のアイテムの既定値はfalseであるが、レイアウト自体の既定値はtrueである。
    fillHeightプロパティも参照すること。

  • Layout.fillHeight
    値 : bool型 (レイアウトの既定値 : true, レイアウト内のアイテムの既定値 : false)
    このプロパティがtrueの場合、レイアウト内のアイテムは、与えられた制約を尊重しながら可能な限り高さが高くなる。
    このプロパティがfalseの場合、レイアウト内のアイテムは、望ましい高さに設定された固定の高さを持つ。

    レイアウト内のアイテムの既定値はfalseであるが、レイアウト自体の既定値はtrueである。
    fillWidthプロパティも参照すること。

  • Layout.alignment
    値 : Qt.Alignment型 (既定値 : 0 … 0とは、Qt.AlignVCenter | Qt.AlignLeftのこと)
    アイテムが占めるセル内の配置を指定する。
    既定値は、水平フラグまたは垂直フラグのみが指定された場合にも適用される。
    水平フラグのみが指定された場合でも、自動的に垂直フラグがQt.AlignVCenterに設定される。
    垂直フラグのみが指定された場合でも、自動的に水平フラグがQt.AlignLeftに設定される。

    以下に、使用できるフラグを示す。
    • Qt.AlignLeft
    • Qt.AlignHCenter
    • Qt.AlignRight
    • Qt.AlignTop
    • Qt.AlignVCenter
    • Qt.AlignBottom
    • Qt.AlignBaseline

  • Layout.margins
    値 : real型 (既定値 : 0)
    アイテムの外側の余白をすべて同じ値に設定する。
    アイテム自体は自身のマージンを評価しない。マージンを評価するかどうかは、親アイテムが決定する。

    具体的には、マージンが評価されるのは、ColumnLayout、RowLayout、GridLayout、SplitView等のレイアウトであり、マージンが大きくなるとアイテムの有効セルサイズが大きくなる。
    したがって、マージンを持つアイテムが他のアイテムの子である場合、その位置、サイズ、暗黙のサイズは変更されない。

    marginsとalignmentを組み合わせる場合、marginsプロパティの値を含めてアイテムの位置を合わせる。
    例えば、上のマージンが1、下のマージンが9の垂直方向に中央に配置されたアイテムの場合、セル内でのアイテムの配置は、中央から4ピクセル上となる。

    このプロパティは、QtQuick.Layouts 1.2で導入された。
    leftMarginプロパティ、topMarginプロパティ、rightMarginプロパティ、bottomMarginプロパティも参照すること。

  • Layout.topMargin
    値 : real型 (既定値 : Layout.marginsの値)
    アイテムの外側にある上の余白を設定する。
    値が設定されていない場合は、Layout.marginsの値を使用する。

    このプロパティは、QtQuick.Layouts 1.2で導入された。
    marginsプロパティも参照すること。

  • Layout.bottomMargin
    値 : real型 (既定値 : Layout.marginsの値)
    アイテムの外側にある下の余白を設定する。
    値が設定されていない場合は、Layout.marginsの値を使用する。

    このプロパティは、QtQuick.Layouts 1.2で導入された。
    marginsプロパティも参照すること。

  • Layout.leftMargin
    値 : real型 (既定値 : Layout.marginsの値)
    アイテムの外側にある左の余白を設定する。
    値が設定されていない場合は、Layout.marginsの値を使用する。

    このプロパティは、QtQuick.Layouts 1.2で導入された。
    marginsプロパティも参照すること。

  • Layout.rightMargin
    値 : real型 (既定値 : Layout.marginsの値)
    アイテムの外側にある右の余白を設定する。
    値が設定されていない場合は、Layout.marginsの値を使用する。

    このプロパティは、QtQuick.Layouts 1.2で導入された。
    marginsプロパティも参照すること。


サンプルコード

以下の例は、RowLayoutのサンプルコードである。

QML RowLayout 1.png
 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
       }
    }
 }



「http://mochiuwiki.e2.valueserver.jp/index.php?title=QMLのコントロール_-_RowとRowLayout&oldid=4185」から取得