FlexboxLayout QML Type

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

このタイプはテクノロジープレビュー段階にあり、変更される可能性があります。

• 継承されたメンバーを含む、すべてのメンバーの一覧

プロパティ

• alignContent : enumeration
• alignItems : enumeration
• columnGap : real
• direction : enumeration
• gap : real
• justifyContent : enumeration
• rowGap : real
• wrap : enumeration

関連プロパティ

• alignSelf : enumeration

詳細な説明

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

FlexboxLayout内のアイテムは、既存のレイアウト関連プロパティを通じて、推奨サイズ、最小サイズ、最大サイズを設定できます。例えば、FlexboxLayout内のアイテムを伸縮させる必要がある場合は、レイアウト関連プロパティLayout.fillWidth またはLayout.fillHeight を設定できます。

FlexboxLayout内のアイテムは、以下のアタッチドプロパティをサポートしています：

• FlexboxLayout.alignSelf
• Layout.minimumWidth
• Layout.minimumHeight
• Layout.preferredWidth
• Layout.preferredHeight
• Layout.maximumWidth
• Layout.maximumHeight
• Layout.fillWidth
• Layout.fillHeight
• Layout.margins
• Layout.leftMargin
• Layout.rightMargin
• Layout.topMargin
• Layout.bottomMargin

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

このタイプをより効率的に使用するためには、Qt Quick レイアウト モジュールの一般的な仕組みを理解しておくことをお勧めします。詳細については、「Qt Quick レイアウトの概要」を参照してください。

使用例

以下のスニペットは、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
    }
}

関連項目: ColumnLayout 、GridLayout 、RowLayout 、StackView 、およびQt Quick Layouts Overview。

プロパティのドキュメント

alignContent : enumeration

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

指定可能な値：

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

alignItems : enumeration

このプロパティは、フレックスボックスレイアウトのフレックス行内における項目の配置を指定するもので、クロス軸（direction プロパティで定義されるメイン軸に直交する軸）に沿って配置されます。このプロパティは、フレックスボックスレイアウト内の項目が、アタッチドプロパティFlexboxLayout.alignSelf を通じて上書きすることができます。

有効な値：

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

columnGap : real

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

デフォルト値は `0` です。

direction : enumeration

このプロパティは、フレックスボックスレイアウト内の項目の配置方向を指定し、主軸を定義します。

指定可能な値：

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

gap : real

このプロパティは、FlexboxLayout に対して、インライン軸とブロック軸の両方に適用されるスペースの量を指定します。

デフォルト値は `0` です。

justifyContent : enumeration

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

指定可能な値：

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

rowGap : real

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

デフォルト値は `0` です。

wrap : enumeration

このプロパティは、フレックスボックスレイアウト内のアイテムが行を折り返すかどうかを指定するもので、子要素がフレックスボックスレイアウトのサイズからはみ出した場合に発生します。アイテムが行を折り返す場合、前述のオーバーフローの状態に応じて、複数の行に配置されます。各行は、横軸に沿ってアイテムの最大サイズを占めます。

有効な値：

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

関連するプロパティのドキュメント

FlexboxLayout.alignSelf : enumeration [attached]

この添付プロパティを使用すると、フレックスボックスレイアウトにおいて、このアイテムをクロス軸に沿って配置することができ、親のフレックスボックスレイアウトプロパティ `alignItems` を上書きします。

デフォルトでは、子要素は親要素からの配置を継承しますが、値 `FlexboxLayout.AlignStart`、`FlexboxLayout.AlignCenter `、および `FlexboxLayout.AlignEnd` を使用して、親要素のフレックスボックスレイアウトプロパティ `alignItems ` を上書きすることができます。

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