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

概要

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

RowLayout

プロパティ

layoutDirectionプロパティは、RowLayoutのレイアウト方向を設定する。(QtQuick.Layouts 1.1で導入された)
これは、アイテムを左から右にレイアウトするか、右から左にレイアウトするかを制御する。

例えば、layoutDirectionプロパティにQt.RightToLeftが指定されている場合、左揃えのアイテムは右揃えになり、右揃えのアイテムは左揃えになる。

layoutDirection
値 : Qt.LeftToRight(既定値)

アイテムが左から右にレイアウトされる。

値 : Qt.RightToLeft

項目が右から左に向かって配置される。
spacing
値 : real型 (既定値 : 5)

各セルの間隔を保持する。

GridLayoutやColumnLayoutにもlayoutDirectionプロパティが存在する。

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.leftMargin
Layout.rightMargin
Layout.topMargin
Layout.bottomMargin

サンプルコード

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

 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
       }
    }
 }