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 Flexible Box Layout と同様に、クイックアイテムを柔軟にレイアウトすることができます。内部的には、Qt FlexboxLayout はyoga エンジンを使用してフレックスアイテムのジオメトリを導きます。yogaライブラリは CSS Flexible Box Layoutのサブセットです。したがって、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

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

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

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

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

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