Back to Qt.io
Contact Us Blog Download Qt

FlexboxLayout QML Type

FlexboxLayout QML コンストラクトは、クイックアイテムのフレックスレイアウトを提供します。詳細...

Import Statement: import QtQuick.Layouts
Since: Qt 6.10
Inherits:

Item

Status: Preliminary

この型は開発中であり、変更される可能性があります。

プロパティ

付属物件

詳細説明

FlexboxLayout は、CSS Flexible Box Layout と同様に、クイックアイテムを柔軟にレイアウトすることができます。内部的には、Qt FlexboxLayout はyoga エンジンを使用してフレックスアイテムのジオメトリを導きます。yogaライブラリは CSS Flexible Box Layoutのサブセットです。したがって、FlexboxLayout はyoga ライブラリでサポートされている機能に限定することができます。

注意： FlexboxLayoutはyogaライブラリのバージョン2.0に準拠しています。

FlexboxLayout 内のアイテムは、既存のレイアウトアタッチプロパティにより、優先サイズ、最小サイズ、最大サイズを設定することができます。例えば、FlexboxLayout 内のアイテムを引き伸ばす必要がある場合、レイアウトアタッチプロパティLayout.fillWidth またはLayout.fillHeight を設定することができます。

FlexboxLayout内のアイテムは、これらのアタッチド・プロパティに対応しています：

attachedプロパティの詳細については、こちらをご覧ください。

このタイプをより効率的に使用できるようにするには、Qt Quick Layouts モジュールの一般的なメカニズムを理解しておくことをお勧めします。詳しくはQt Quick Layouts 概要を参照してください。

使用例

以下のスニペットは、QML FlexboxLayoutを使って矩形アイテムをより柔軟に配置する最小限の例です。

FlexboxLayout {
    id: flexLayout
    anchors.fill: parent
    wrap: FlexboxLayout.Wrap
    direction: FlexboxLayout.Row
    justifyContent: FlexboxLayout.JustifySpaceAround
    Rectangle {
        color: 'teal'
        implicitWidth: 200
        implicitHeight: 200
    }
    Rectangle {
        color: 'plum'
        implicitWidth: 200
        implicitHeight: 200
    }
    Rectangle {
        color: 'olive'
        implicitWidth: 200
        implicitHeight: 200
    }
    Rectangle {
        color: 'beige'
        implicitWidth: 200
        implicitHeight: 200
    }
    Rectangle {
        color: 'darkseagreen'
        implicitWidth: 200
        implicitHeight: 200
    }
}

Note: この API は技術的なプレビューであり、将来の Qt のバージョンでは変更または削除される可能性があります。

ColumnLayout,GridLayout,RowLayout,StackView,Qt Quick Layouts Overviewも参照してください 。

プロパティ Documentation

alignContent : enumeration

このプロパティは、フレックスボックスレイアウトのクロス軸に沿ったフレックスラインの分布を指定します。

指定可能な値

定数説明
FlexboxLayout.AlignStart(デフォルト) フレックスラインはフレックスボックスレイアウトの先頭に整列される。
FlexboxLayout.AlignCenterフ レ ッ ク 線は、 フ レ ッ ク ボ ッ ク ス レ イ ア ウ ト の中央に沿っ て配置 さ れます。
FlexboxLayout.AlignEndフ レ ッ ク 線は、 フ レ ッ ク ボ ッ ク ス レ イ ア ウ ト の末尾に沿っ て配置 さ れる。
FlexboxLayout.AlignStretchフレックスラインは、フレックスボックスレイアウトの高さに応じて引き伸ばされます。
FlexboxLayout.AlignSpaceBetweenスペースは行間に均等に配置され、フレックスボックスレイアウトの端に沿ったスペースはない。
FlexboxLayout.AlignSpaceAroundスペースは行間に均等に配置され、フレックスボックスレイアウトの端にはハーフサイズのスペースがあります。
FlexboxLayout.AlignSpaceEvenlyスペースは行とフレックスボックスレイアウトの端の間に均等に配置されます。Qt 6.10 ではサポートされていません。

デフォルト値はFlexboxLayout.AlignStart です。


alignItems : enumeration

このプロパティは、フレックスボックスレイアウトのフレックスライン内のアイテムのアライメントを指定し、クロス軸（プロパティdirection で定義されているように、主軸に直交する）に沿ってアライメントされます。このプロパティは、付属のプロパティFlexboxLayout.alignSelf を通して、フレックスボックスレイアウト内のアイテムによってオーバーライドすることができます。

可能な値

定数説明
FlexboxLayout.AlignStart(デ フ ォ ル ト ） 項目は、 フ レ ッ ク ボ ッ ク ス レ イ ア ウ ト の横軸の始点に沿っ て整列 さ れます。
FlexboxLayout.AlignCenter項目は、 フ レ ッ ク ボ ッ ク ス レ イ アウ ト 横軸の中央に沿っ て配置 さ れる。
FlexboxLayout.AlignEnd項目は、 フ レ ッ ク ス ボ ッ ク ス レ イ ア ウ ト 横軸の端に沿っ て配置 さ れる。

注： 可能な値に挙げた整列は、alignItems プロパティにのみ適用されます。

デフォルト値はFlexboxLayout.AlignStart です。


columnGap : real

このプロパティは、インライン軸に沿って FlexboxLayout に適用される必要のあるスペース量を保持します。このプロパティを設定すると、インライン軸に影響するgap の値が上書きされます。

デフォルト値は0 です。


direction : enumeration

このプロパティは、フレックスボックスレイアウト内のアイテムレイアウト方向を保持し、主軸を定義します。

設定可能な値

定数説明
FlexboxLayout.Row(デフォルト) アイテムは左から右にレイアウトされる。
FlexboxLayout.RowReversedアイテムは右から左にレイアウトされる。
FlexboxLayout.Columnアイテムは上から下に並べられます。
FlexboxLayout.ColumnReversedアイテムは下から上に並べられる。

デフォルト値はFlexboxLayout.Row です。


gap : real

このプロパティは、インライン軸とブロック軸の両方で、FlexboxLayout に適用する必要があるスペースの量を保持します。

デフ ォル ト 値は0 です。


justifyContent : enumeration

こ のプ ロ パテ ィ は、 フ レ ッ ク ボ ッ ク ス レ イ ア ウ ト の主軸に沿っ た項目の分布を指定 し ます。

可能な値

定数説明
FlexboxLayout.JustifyStart(デ フ ォ ル ト ） 項目は、 フ レ ッ ク ボ ッ ク ス レ イ ア ウ ト の始点に沿っ て配置 さ れます。
FlexboxLayout.JustifyCenter項目は、 フ レ ッ ク ボ ッ ク ス レ イ ア ウ ト の中央に沿っ て配置 さ れる。
FlexboxLayout.JustifyEnd項目は、 フ レ ッ ク ボ ッ ク ス レ イ ア ウ ト の端に沿っ て配置 さ れます。
FlexboxLayout.JustifySpaceBetweenスペースは項目間に均等に配置され、 フレックスボックスレイアウトの端にはスペースはない。
FlexboxLayout.JustifySpaceAroundアイテム間のスペースが均等に配置され、フレックスボックスレイアウトの端にハーフサイズのスペースがある。
FlexboxLayout.JustiftSpaceEvenlyフ レ ッ ク ボ ッ ク ス レ イ ア ウ ト の端に半角スペースがあ る。

デフォルト値はFlexboxLayout.JustifyStart です。


rowGap : real

このプロパティは、ブロック軸に沿って FlexboxLayout に適用する必要のあるスペース量を保持します。こ のプ ロ パテ ィ を設定す る と 、ブ ロ ッ ク 軸に影響を与え るgap の値が上書き さ れます。

デフ ォル ト 値は0 です。


wrap : enumeration

このプロパティは、フレックスボックスレイアウト内のアイテムが折り返されるかどうかを指定し、子アイテムがフレックスボックスレイアウトのサイズをオーバーフローしたときに発生します。項目が折り返される場合、記載されているようにオーバーフロー条件に応じて複数の行に配置されます。各行は横軸に沿ってアイテムの最大サイズを取ります。

可能な値

定数説明
FlexboxLayout.Wrap項目はフレックスボックスレイアウト内で複数の行に折り返されます。
FlexboxLayout.NoWrap(デ フ ォ ル ト ） 項目は折 り 返 さ れず、 フ レ ッ ク ボ ッ ク ス レ イ アウ ト 内で一行に レ イ ア ウ ト さ れます。
FlexboxLayout.WrapReverse項目は、 フ レ ッ ク ボ ッ ク ス レ イ アウ ト 内で複数行に折 り 返 さ れます。

デ フ ォ ル ト 値はFlexboxLayout.NoWrap です。


Attached Property ドキュメント

FlexboxLayout.alignSelf : enumeration

この Attached プロパティは、このアイテムをフレックス ボックス レイアウト内で交差軸に沿って整列させることができ、親フレックス ボックス レイアウト プロパティalignItems をオーバーライドします。

デフォルトでは、子アイテムは親アイテムからアライメントを継承し、値FlexboxLayout.AlignStart 、FlexboxLayout.AlignCenter 、FlexboxLayout.AlignEnd で親フレックスボックスレイアウトalignItems プロパティをオーバーライドすることができます。

デフォルト値はFlexboxLayout.AlignAuto です。


© 2025 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.