QMLのコントロール - GridとGridLayout

概要

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

専用プロパティ

• layoutDirection

  値 : enumeration (既定値 : Qt.LeftToRight)

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

  
  

  既定値のQt.LeftToRightは、アイテムを左から右に配置する。

  値にQt.RightToLeftを指定する場合、アイテムを右から左に向かって配置する。

  また、Qt.RightToLeftが指定されている場合、左揃えのアイテムは右揃えになり、右揃えのアイテムは左揃えになる。
  

  
  

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

  
  

• rowSpacing

  値 : real型 (既定値 : 5)

  各行の間隔を設定する。

  
  

• columnSpacing

  値 : real型 (既定値 : 5)

  各カラムの間隔を設定する。

  
  

• rows

  値 : int型 (既定値 : 制限なし)

  Layout.flowプロパティがGridLayout.TopToBottomの場合、配置されるアイテムの行数制限を設定する。

  
  

• columns

  値 : int型 (既定値 : 制限なし)

  Layout.flowプロパティがGridLayout.LeftToRightの場合、配置されるアイテムの列数制限を設定する。

  
  

• flow

  値 : enumeration型 (既定値 : GridLayout.LeftToRight)

  セルの位置が明示的に設定されていないアイテムのフロー方向を設定する。

  このプロパティは、rowsプロパティやcolumnsと一緒に使用され、それぞれ、次の行または列にフローがリセットされるタイミングを指定する。

  
  

  設定可能な値は、以下の通りである。

  • GridLayout.LeftToRight （既定値）

    アイテムが隣り合って配置されて、次の行に折り返される。

  • GridLayout.TopToBottom

    アイテムは上から下に向かって隣り合って配置されて、次の列に折り返される。

  
  

  rowsプロパティとcolumnsプロパティも参照すること。

  
  

• Layout.row

  値 : int型 (既定値 : 0)

  GridLayout内のアイテムの行の位置を設定する。

  Layout.rowプロパティおよびLayout.columnプロパティの両方が設定されていない場合、アイテムにセルを割り当てるかどうかは、レイアウトに委ねられる。

  Layout.columnおよびLayout.rowSpanも参照すること。

  
  

• Layout.rowSpan

  値 : int型 (既定値 : 1)

  GridLayout内のアイテムの行のスパンを設定する。

  Layout.rowおよびLayout.columnSpanも参照すること。

  
  

• Layout.column

  値 : int型 (既定値 : 0)

  GridLayout内のアイテムのカラムの位置を設定する。

  Layout.columnプロパティおよびLayout.rowプロパティの両方が設定されていない場合、アイテムにセルを割り当てるかどうかは、レイアウトに委ねられる。

  Layout.rowおよびLayout.columnSpanも参照すること。

  
  

• Layout.columnSpan

  値 : int型 (既定値 : 1)

  GridLayout内のアイテムのカラムのスパンを設定する。

  Layout.columnおよびLayout.rowSpanも参照すること。

プロパティ

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

• 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プロパティも参照すること。

  
  

サンプルコード

GridLayout内の全ての可視アイテムは、レイアウトに属する。

GridLayoutのサイズが変更された場合、レイアウト内の全てのアイテムが再配置される。
これは、ウィジェットベースのQGridLayoutに似ている。

1つの行または1つの列のみを持つレイアウトが必要な場合は、RowLayoutまたはColumnLayoutを使用する。
これらは、より便利なAPIを提供しているため、可読性が向上するからである。

デフォルトの設定では、アイテムはflowプロパティにしたがって配置される。
(flowプロパティの既定値は、GridLayout.LeftToRight)

もし、columnsプロパティを設定している場合、自動配置が次の行の先頭に折り返される前に、レイアウトが持つことのできる列数の最大値として扱われる。
columnsプロパティは、flowプロパティがGridLayout.LeftToRightの場合にのみ使用される。

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

 GridLayout {
    id: grid
    columns: 3
 
    Text {
       text: "Three"
       font.bold: true
    }
 
    Text {
       text: "words"
       color: "red"
    }
 
    Text {
       text: "in"
       font.underline: true
    }
 
    Text {
       text: "a"
       font.pixelSize: 20
    }
 
    Text {
       text: "row"
       font.strikeout: true
    }
 }

rowsプロパティも同様に動作するが、アイテムは垂直方向に自動配置される。
また、rowsプロパティは、flowがGridLayout.TopToBottomの場合にのみ使用される。

Layout.rowプロパティとLayout.columnプロパティを設定することにより、アイテムが占めるセルを設定できる。
また、Layout.rowSpanまたはLayout.columnSpanプロパティを設定することにより、行のスパンや列のスパンを設定できる。

GridLayout内のアイテムは、これらの付属プロパティをサポートしている。