QMLのコントロール - Positionerアイテム

概要

Positionerアイテムとは、宣言型UIのアイテムの位置を管理するコンテナアイテムである。
多くのアイテムを通常のレイアウトに配置する必要がある場合に、容易に設計することができる。

Qtの標準的なウィジェットで使用されているレイアウトマネージャと同じように動作するが、それ自体がコンテナであることが異なる。

PositionerアイテムはQt Quick Layoutsに含まれており、UI上のアイテムの位置とサイズの両方を管理しており、サイズ変更可能なデザインに使用する。

Positionerアイテムの種類

下表に、標準的なPositionerアイテムを示す。

Positionerアイテム名	説明
Row	行の中の子を一列に配置する。
Column	列の中に子を配置する。
Grid	グリッドの中の子を配置する。
Flow	必要に応じて折り返しながら、子を横に並べて配置する。
LayoutMirroring	レイアウトの動作をミラーリングするためのプロパティ。
Positioner	Positionerアイテム内の子アイテムがどこに存在するかの詳細を含むプロパティ。

Row

Rowは、アイテムを水平方向に並べるために使用する。

以下の例では、行アイテムを使用して、3つの丸みを帯びたRectangleを、外側のRectangleで定義された領域に配置している。
spacingプロパティは、Rectangleの間にわずかなスペースを空けるように設定している。

親アイテムのRectangleが十分な大きさであることを確認して、水平方向に中央に配置されたRowの端にスペースを空けている。

 import QtQuick 2.0
 
 Rectangle {
    width: 320
    height: 110
    color: "#c0c0c0"
 
    Row {
       anchors.horizontalCenter: parent.horizontalCenter
       anchors.verticalCenter: parent.verticalCenter

       spacing: 5

       Rectangle {
          width: 100
          height: 100
          radius: 20.0
          color: "#024c1c"
       }
 
       Rectangle {
          width: 100
          height: 100
          radius: 20.0
          color: "#42a51c"
       }
 
       Rectangle {
          width: 100
          height: 100
          radius: 20.0
          color: "white"
       }
    }
 }

Column

Columnは、アイテムを垂直に並べるために使用する。

以下の例では、Columnを使用して、外側のアイテムで定義された領域に3つのRectangleを配置している。
spacingプロパティは、四角形の間にわずかなスペースを含むように設定している。

なお、ColumnはItemを継承しているため、背景色が必要な場合は、親のRectangleにプロパティを追加する必要がある。

 import QtQuick 2.0
 
 Item {
    width: 310; height: 170
 
    Column {
       anchors.horizontalCenter: parent.horizontalCenter
       anchors.verticalCenter: parent.verticalCenter
 
       spacing: 5
 
       Rectangle {
          color: "lightblue"
          radius: 10.0
          width: 300
          height: 50
 
          Text {
             anchors.centerIn: parent
             font.pointSize: 24
             text: "Books"
          }
       }
 
       Rectangle {
          color: "gold"
          radius: 10.0
          width: 300
          height: 50
 
          Text {
             anchors.centerIn: parent
             font.pointSize: 24
             text: "Music"
          }
       }
 
       Rectangle {
          color: "lightgreen"
          radius: 10.0
          width: 300
          height: 50
 
          Text {
             anchors.centerIn: parent
             font.pointSize: 24
             text: "Movies"
          }
       }
    }
 }

Grid

Gridは、子アイテムを格子状またはテーブル状に配置する。

以下の例では、Gridを使用して、4つのRectangleを2×2の格子状に配置している。
他のPositionerアイテムと同様、アイテム間の間隔は、spacingプロパティを使用して設定できる。
アイテム間に挿入される水平方向の間隔と垂直方向の間隔には違いが無いため、追加のスペースは子アイテム自体の中に追加する必要がある。

格子状内の空のセルは、Grid内の適切な場所にプレースホルダアイテムを定義して作成する必要がある。

 import QtQuick 2.0
 
 Rectangle {
    width: 112
    height: 112
    color: "#303030"
 
    Grid {
       anchors.horizontalCenter: parent.horizontalCenter
       anchors.verticalCenter: parent.verticalCenter
       columns: 2
       spacing: 6
 
       Rectangle {
          color: "#aa6666"
          width: 50
          height: 50
       }
 
       Rectangle {
          color: "#aaaa66"
          width: 50
          height: 50
       }
 
       Rectangle {
          color: "#9999aa"
          width: 50
          height: 50
       }
 
       Rectangle {
          color: "#6666aa"
          width: 50
          height: 50
       }
    }
 }

Flow

Flowは、ページ上に単語のようなアイテムを、重ならないように行や列で配置する。

これは、Gridのように、1つの軸（短軸）に沿ってアイテムを並べて、もう1つの軸（長軸）に沿ってアイテムを隣り合わせに並べる。
並べる方向とアイテム間の間隔は、flowとspacingプロパティで制御される。
また、Gridと同様に、アイテム間やアイテムの行間の間隔を独立して制御することはできない。

以下に、FlowとGridの主な違いを示す。

• Flow内のアイテムは短軸のスペースが無くなると折り返される。
• アイテムのサイズが均一でない場合、1行のアイテムが他の行のアイテムと揃わないことがある。

以下の例では、Flow内にTextの子アイテムがいくつか作成している。
これらは、下図で示したものと同様の方法で配置されている。

 import QtQuick 2.0
 
 Rectangle {
    color: "lightblue"
    width: 300
    height: 200
 
    Flow {
       anchors.fill: parent
       anchors.margins: 4
       spacing: 10
 
       Text {
          text: "Text"
          font.pixelSize: 40
       }
 
       Text {
          text: "items"
          font.pixelSize: 40
       }
 
       Text {
          text: "flowing"
          font.pixelSize: 40
       }
 
       Text {
          text: "inside"
          font.pixelSize: 40
       }
 
       Text {
          text: "a"
          font.pixelSize: 40
       }
 
       Text {
          text: "Flow"
          font.pixelSize: 40
       }
 
       Text {
          text: "item"
          font.pixelSize: 40
       }
    }
 }

LayoutMirroringプロパティ

LayoutMirroringとは、レイアウトの動作をミラーリングするためのプロパティである。

専用プロパティ

ミラーリングは視覚的な変化である。

LayoutMirroringプロパティは、アイテムのアンカー、RowやGrid等のPositionerやGridViewやListView等のViewを水平方向にミラーリング(反転)する。
(左のアンカーが右のアンカーになる等)

ミラーリングは、enabledプロパティをtrueに設定することにより、アイテムに対して有効になる。

既定値では、ミラーリングはアイテム自身にのみ影響する。
childrenInheritプロパティをtrueに設定することにより、ミラーリングの動作が全ての子アイテムにも継承される。

※注意
Qt 5.8以降、LayoutMirroringはWindowに対しても使用できるようになった。
LayoutMirroringプロパティを、WindowのcontentItemにアタッチするのと同様に使用できる。

• childrenInherit

  値 : bool (既定値 : false)

  アイテムのLayoutMirroring.enabledの値が、その子アイテムたちに継承されるかどうかを設定する。

  
  

• enabled

  値 : bool (既定値 : false)

  アイテムのレイアウトが水平方向にミラーリングされるかどうかを設定する。

  水平方向にtrueを設定する場合、左のアンカーが右に、右のアンカーが左になるようにアンカーの設定が反転する。

  RowやGrid等のPositionerやGridViewやListView等のViewでは、アイテムの水平方向もミラーリングされる。

サンプルコード

以下の例では、ミラーリングの動作を示しており、Rowは親の左に固定されるように指定している。
ただし、ミラーリングが有効になっているため、アンカーは水平方向に反転して、右に固定されている。

また、既定値ではRow内のアイテムは左から右に配置されるが、アイテムの番号や不透明度から分かるように、右から左に配置されている。

 import QtQuick 2.0
 
 Rectangle {
    LayoutMirroring.enabled: true
    LayoutMirroring.childrenInherit: true
 
    width: 300
    height: 50
    color: "yellow"
    border.width: 1
 
    Row {
       anchors {
          left: parent.left
          margins: 5
       }
       y: 5
       spacing: 5
 
       Repeater {
          model: 5
 
          Rectangle {
             color: "red"
             opacity: (5 - index) / 5
             width: 40; height: 40
 
             Text {
                text: index + 1
                anchors.centerIn: parent
             }
          }
       }
    }
 }

LayoutMirroringは、異なる言語圏をターゲットとするソフトウェアにおいて、左から右へのレイアウトと右から左へのレイアウトの両方をサポートする必要がある場合に便利である。

childrenInheritプロパティを使用する場合、ソフトウェア内の全てのアイテムに対してレイアウト設定を手動で行うことなく、LayoutMirroringを適用することができる。

ただし、ミラーリングは、アイテムのx座標の値で定義される位置関係には影響しないため、
ミラーリングを有効にしても、希望のレイアウト方向に対応するためには、レイアウトの修正が必要になることに注意する。

また、ミラーリングが望ましい動作ではない場合や既に子アイテムが他の方法でミラーリングを行っている場合は、
個々の子アイテムのミラーリングを無効（各アイテムに対して、LayoutMirroring.enabledをfalse)に設定する必要があるかもしれない。

ソフトウェアの既定のレイアウト方向に基づいて変更するには、以下を使用する。

 LayoutMirroring.enabled: Qt.application.layoutDirection === Qt.RightToLeft

レイアウト方向の変更において、LayoutMirroringやその他の関連機能の詳細は、QMLのコントロール - レイアウト方向の変更を参照すること。