アイテムポジショナー

ポジショナーアイテムは、宣言型ユーザーインターフェースにおいてアイテムの位置を管理するコンテナアイテムです。ポジショナーの動作は、標準の Qt Widgets で使用されるレイアウトマネージャーと似ていますが、それ自体がコンテナでもある点が異なります。

ポジショナーを使用すると、多くのアイテムを規則的なレイアウトに配置する必要がある場合に、作業が容易になります。

Qt Quick レイアウトは、ユーザーインターフェース上でQt Quick のアイテムを配置するためにも使用できます。レイアウトは、宣言型ユーザーインターフェース上のアイテムの位置とサイズの両方を管理し、サイズ変更可能なユーザーインターフェースに最適です。

ポジショナー

Qt Quick の基本的なグラフィカルタイプセットには、一連の標準ポジショナーが用意されています：

Column	子要素を列状に配置します
Flow	子要素を横並びに配置し、必要に応じて改行を行う
Grid	子要素をグリッド状に配置します
LayoutMirroring	レイアウトの挙動を反転させるために使用されるプロパティ
Positioner	ポジショナー内の項目の位置に関する詳細を含む、アタッチドプロパティを提供します
Row	子要素を行に配置します

列アイテム

「本」「音楽」「映画」とラベルが付けられた、縦に積み重ねられた3つの長方形

Column アイテムは、アイテムを縦方向に配置するために使用されます。次の例では、Columnアイテムを使用して、外側のItem で定義された領域内に3つのRectangle アイテムを配置しています。spacing プロパティは、矩形間にわずかなスペースを含めるように設定されています。

import QtQuick

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

なお、ColumnはItemから直接継承されているため、背景色を適用したい場合は、親のRectangleに設定する必要があります。

Rowアイテム

横一列に並んだ3つの角が丸い長方形

Row アイテムは、アイテムを水平方向に配置するために使用されます。次の例では、Row アイテムを使用して、外側の色付き Rectangle で定義された領域内に、3 つの角が丸いRectangle アイテムを配置しています。spacing プロパティは、矩形間にわずかなスペースを確保するように設定されています。

水平方向に中央揃えされたRow項目の周囲に若干の余白が残るように、親のRectangleが十分な大きさになるよう設定しています。

import QtQuick

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

Gridアイテム

2×2のグリッド上に、間隔を空けて配置された4つの色付き長方形

Grid アイテムは、アイテムをグリッドや表のレイアウトに配置するために使用されます。次の例では、Gridアイテムを使用して、4つのRectangle アイテムを2×2のグリッドに配置しています。他のポジショナーと同様に、spacing プロパティを使用してアイテム間の間隔を指定できます。

import QtQuick

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コンテナで囲まれたテキスト項目

Flow フローアイテムは、単語などのアイテムをページ上に配置するために使用され、アイテムが重ならない行または列で構成されます。

フロー項目は、Grid 項目と同様の方法で項目を配置し、項目は 1 つの軸（副軸）に沿って行に並べられ、項目の行は別の軸（主軸）に沿って隣り合って配置されます。フローの方向および項目間の間隔は、flow およびspacing プロパティによって制御されます。

次の例は、複数のText 子アイテムを含むFlowアイテムを示しています。これらは、スクリーンショットに示されているものと同様の方法で配置されています。

import QtQuick

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

GridポジショナーとFlowポジショナーの主な違いは、Flow内のアイテムは短軸上のスペースが不足すると折り返し表示され、アイテムのサイズが均一でない場合、ある行のアイテムが別の行のアイテムと揃わないことがあるという点です。Gridアイテムと同様に、アイテム間の間隔やアイテムの行間の間隔を個別に制御することはできません。

アイテムを配置するその他の方法

ユーザーインターフェース内でアイテムを配置する方法は他にもいくつかあります。座標を直接指定するという基本的な手法に加え、アンカーを使用して他のアイテムを基準に配置したり、Object Model などのQML データモデルと組み合わせて使用したりすることもできます。

アンカーを使用した配置右から左へのユーザーインターフェース

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.