QMLのコントロール - ColumnとColumnLayout

提供：MochiuWiki : SUSE, EC, PCB
ナビゲーションに移動 検索に移動

概要

ColumnおよびColumnLayoutは、見やすいレイアウトを表示するために用意されている。


Column

専用プロパティ

  • spacing
    値 : qreal (既定値 : 0)
    隣り合うアイテムの間を空けるピクセル数を設定する。
    Grid.spacingプロパティも参照すること。

  • padding
  • topPadding
  • bottomPadding
  • leftPadding
  • rightPadding
    値 : real型
    コンテンツの周りのパディングを設定する。
    このプロパティは、Qt 5.6で導入された。

  • add
    値 : Transition型
    Column内のアイテムに対して実行されるトランジションを設定する。
    アイテムがポジショナーの場合、以下のアイテムが該当する。
    • ポジショナーが作成された後に、ポジショナーの子として作成または再配置されたアイテム
    • 子アイテムのvisibleプロパティの値がfalseからtrueに変更されて、可視状態になったアイテム

    トランジションは、ViewTransitionを使用して、追加されるアイテムの詳細にアクセスできる。
    これらのトランジションの使用に関する詳細と例については、ViewTransitionのドキュメントを参照すること。

    ※注意
    addプロパティは、作成時に既にポジショナーの一部となっているアイテムには適用されない。
    この場合は、代わりにpopulateプロパティが適用される。

    populateやViewTransitionも参照すること。

  • move
    値 : Transition型
    Column内で移動したアイテムに対して実行するトランジションを設定する。

    アイテムがポジショナーの場合、以下のアイテムが該当する。
    • ポジショナー内の他のアイテムの追加、削除、再配置により、位置がずれた子アイテムの移動
    • ポジショナー内の他のアイテムのサイズ変更により再配置された子アイテム

    トランジションでは、ViewTransitionを使用して、移動されるアイテムの詳細にアクセスすることができる。

    ※注意
    ただし、moveプロパティでは、ViewTransition.targetIndexesプロパティとViewTransition.targetItemsプロパティは、
    ポジショナーに他のアイテムが追加されて、moveプロパティがトリガーされた場合にのみ設定される。
    それ以外の場合は、これらのリストは空になる。

    これらのトランジションの詳細や使用例については、ViewTransitionのドキュメントを参照すること。
    また、addプロパティ、populateプロパティも参照すること。

  • populate
    値 : Transition型
    ポジショナーの作成時に、このポジショナーの一部であるアイテムに対して実行されるトランジションを設定する。
    populateプロパティは、ポジショナーが最初に作成された時に実行される。

    populateプロパティは、ViewTransitionを使用して追加されるアイテムの詳細情報にアクセスできる。

    これらのトランジションの詳細や使用例については、ViewTransitionのドキュメントを参照すること。
    また、addプロパティも参照すること。


シグナル

  • positioningComplete()
    このシグナルは、位置決めが完了した時に発行する。

    ※注意
    対応するハンドラは onPositioningComplete()である。

    このシグナルは、Qt 5.9で導入された。


メソッド

  • forceLayout()
    Columnは、通常、フレームごとに1度だけ子アイテムを配置する。

    スクリプト内では、下層の子アイテムが変更されても、Columnがまだ更新されていない可能性がある。
    しかし、forceLayoutメソッドは、Columnが子アイテムの変更に即座に対応することを強制する。

    ※注意
    一般的に、forceLayoutメソッドは、コンポーネントが完了してから呼び出すべきである。

    このメソッドは、Qt 5.9で導入された。


サンプルコード 1

Columnは、子アイテムを1つの列に沿って配置する。
これは、anchorsプロパティを使用せずに、複数のアイテムを垂直に配置する方法として使用できる。

以下の例では、Column内の子アイテムとして、様々なサイズの3つのRectangleを作成している。
Columnでは、これらのアイテムを自動的にこのように縦に並べて配置する。

QML Column 1.png
 Column {
    spacing: 2
 
    Rectangle {
       color: "red"
       width: 50
       height: 50
    }
 
    Rectangle {
       color: "green"
       width: 20
       height: 50
    }
 
    Rectangle {
       color: "blue"
       width: 50
       height: 20
    }
 }


Column内のアイテムが表示されていない場合や幅や高さが0の場合は、そのアイテムはレイアウトされずにColumn内には表示されない。

※注意
Columnは自動的に子アイテムを垂直方向に配置するため、子アイテムのy座標を設定したり、
top、bottom、anchors.verticalCenter、fill、centerIn等のanchorsを使用して垂直方向に固定してはならないことに注意する。

これらの動作を行う必要がある場合は、Columnを使用せずに、アイテムを配置することを検討すること。

Column内のアイテムは、Positionerプロパティを使用して、Column内の位置に関する情報にアクセスできる。

Columnやその他の関連するPositionerアイテムの使用に関する詳細は、QMLのコントロール - Positionerアイテムを参照すること。

サンプルコード 2

Column内にアイテムを追加する場合やColumn内でアイテムが移動する場合、特定のTransitionを使用してアイテムをアニメーションさせることができる。

以下の例では、moveプロパティに特定のTransitionを設定している。
[Space]キーを押下した時、緑のRectangleの可視値が切り替わる。
緑のRectangleの表示 / 非表示により、青のRectangleが列の中で移動して、moveプロパティが青のRectangleに自動的に適用される。



 Column {
    spacing: 2

    Rectangle {
       color: "red"
       width: 50
       height: 50
    }
 
    Rectangle {
       id: greenRect
       color: "green"
       width: 20
       height: 50
    }
 
    Rectangle {
       color: "blue"
       width: 50
       height: 20
    }

    move: Transition {
        NumberAnimation {
           properties: "x,y"
           duration: 1000
        }
    }

    focus: true
    Keys.onSpacePressed: greenRect.visible = !greenRect.visible
 }


Row、Grid、Flow、Positioner、ColumnLayoutも参照すること。


RowLayout

専用プロパティ

  • layoutDirection
    値 : enumeration (既定値 : Qt.LeftToRight)
    カラムのアイテムを、左から右にレイアウト、または、右から左にレイアウトするかどうかを制御する。(QtQuick.Layouts 1.1で導入された)

    既定値のQt.LeftToRightは、アイテムを左から右に配置する。
    値にQt.RightToLeftを指定する場合、アイテムを右から左に向かって配置する。
    また、Qt.RightToLeftが指定されている場合、左揃えのアイテムは右揃えになり、右揃えのアイテムは左揃えになる。

    RowLayout.layoutDirectionやGridLayout.layoutDirectionも参照すること。

  • spacing
    値 : real型 (既定値 : 5)
    各セルの間隔を保持する。


プロパティ

RowLayoutは、以下のプロパティもサポートしている。

  • Layout.minimumWidth
    値 : real型 (既定値 : アイテムの暗黙の最小幅)
    レイアウト内のアイテムの最小幅を設定する。
    アイテムがレイアウトである場合、暗黙の最小幅は、どの項目もその最小幅よりも縮小することなくレイアウトが持つことができる最小幅になる。
    (その他のアイテムにおける暗黙の最小幅は0である)
    この値を-1に設定する場合、暗黙的な最小幅にリセットされる。
    preferredWidthプロパティおよびmaximumWidthプロパティも参照すること。

  • Layout.minimumHeight
    値 : real型 (既定値 : アイテムの暗黙の最小の高さ)
    レイアウト内のアイテムの最小の高さを設定する。
    アイテムがレイアウトである場合、暗黙の最小の高さは、どのアイテムもその最小高さよりも縮小することなく、レイアウトが持つことのできる最小の高さになる。
    (その他のアイテムの暗黙の最小の高さは0である)
    この値を-1に設定する場合、高さが暗黙の最小値にリセットされる。
    preferredHeightプロパティとmaximumHeightプロパティも参照すること。

  • Layout.preferredWidth
    値 : real型 (既定値 : -1)
    レイアウト内のアイテムの優先幅を設定する。
    値が-1の場合、preferredWidthプロパティは無視されて、implicitWidthプロパティを使用する。
    minimumWidthプロパティとmaximumWidthプロパティも参照すること。

  • Layout.preferredHeight
    値 : real型 (既定値 : -1)
    レイアウト内のアイテムの優先する高さを設定する。
    値が-1の場合、preferredWidthプロパティは無視されて、implicitHeightプロパティを使用する。
    minimumHeightプロパティとmaximumHeightプロパティも参照すること。

  • Layout.maximumWidth
    値 : real型 (既定値 : アイテムの暗黙の最大幅)
    レイアウト内のアイテムの最大幅を設定する。
    アイテムがレイアウトの場合、暗黙の最大幅は、レイアウトが最大幅を超えることなくレイアウトが持つことができる最大幅になる。
    この値を-1に設定すると、幅が暗黙の最大幅にリセットされる。

    レイアウト以外の場合、暗黙の最大幅は、Number.POSITIVE_INFINITYである。
    minimumWidthプロパティおよびpreferredWidthプロパティも参照すること。

  • Layout.maximumHeight
    値 : real型 (既定値 : アイテムの暗黙の最大の高さ)
    レイアウト内のアイテムの最大幅を設定する。
    アイテムがレイアウトの場合、暗黙の最大の高さは、どのアイテムも最大の高さを超えずにレイアウトが持てる最大の高さになる。
    この値を-1に設定する場合、高さは暗黙の最大の高さにリセットされる。

    レイアウト以外の場合、暗黙の最大の高さは、Number.POSITIVE_INFINITYである。
    minimumHeightプロパティとpreferredHeightプロパティも参照すること。

  • Layout.fillWidth
    値 : bool型 (レイアウトの既定値 : true, レイアウト内のアイテムの既定値 : false)
    このプロパティがtrueの場合、レイアウト内のアイテムは、与えられた制約を尊重しながら可能な限り広くなる。
    このプロパティがfalseの場合、レイアウト内のアイテムは、望ましい幅に設定された固定幅を持つ。

    レイアウト内のアイテムの既定値はfalseであるが、レイアウト自体の既定値はtrueである。
    fillHeightプロパティも参照すること。

  • Layout.fillHeight
    値 : bool型 (レイアウトの既定値 : true, レイアウト内のアイテムの既定値 : false)
    このプロパティがtrueの場合、レイアウト内のアイテムは、与えられた制約を尊重しながら可能な限り高さが高くなる。
    このプロパティがfalseの場合、レイアウト内のアイテムは、望ましい高さに設定された固定の高さを持つ。

    レイアウト内のアイテムの既定値はfalseであるが、レイアウト自体の既定値はtrueである。
    fillWidthプロパティも参照すること。

  • Layout.alignment
    値 : Qt.Alignment型 (既定値 : 0 … 0とは、Qt.AlignVCenter | Qt.AlignLeftのこと)
    アイテムが占めるセル内の配置を指定する。
    既定値は、水平フラグまたは垂直フラグのみが指定された場合にも適用される。
    水平フラグのみが指定された場合でも、自動的に垂直フラグがQt.AlignVCenterに設定される。
    垂直フラグのみが指定された場合でも、自動的に水平フラグがQt.AlignLeftに設定される。

    以下に、使用できるフラグを示す。
    • Qt.AlignLeft
    • Qt.AlignHCenter
    • Qt.AlignRight
    • Qt.AlignTop
    • Qt.AlignVCenter
    • Qt.AlignBottom
    • Qt.AlignBaseline

  • Layout.margins
    値 : real型 (既定値 : 0)
    アイテムの外側の余白をすべて同じ値に設定する。
    アイテム自体は自身のマージンを評価しない。マージンを評価するかどうかは、親アイテムが決定する。

    具体的には、マージンが評価されるのは、ColumnLayout、RowLayout、GridLayout、SplitView等のレイアウトであり、マージンが大きくなるとアイテムの有効セルサイズが大きくなる。
    したがって、マージンを持つアイテムが他のアイテムの子である場合、その位置、サイズ、暗黙のサイズは変更されない。

    marginsとalignmentを組み合わせる場合、marginsプロパティの値を含めてアイテムの位置を合わせる。
    例えば、上のマージンが1、下のマージンが9の垂直方向に中央に配置されたアイテムの場合、セル内でのアイテムの配置は、中央から4ピクセル上となる。

    このプロパティは、QtQuick.Layouts 1.2で導入された。
    leftMarginプロパティ、topMarginプロパティ、rightMarginプロパティ、bottomMarginプロパティも参照すること。

  • Layout.topMargin
    値 : real型 (既定値 : Layout.marginsの値)
    アイテムの外側にある上の余白を設定する。
    値が設定されていない場合は、Layout.marginsの値を使用する。

    このプロパティは、QtQuick.Layouts 1.2で導入された。
    marginsプロパティも参照すること。

  • Layout.bottomMargin
    値 : real型 (既定値 : Layout.marginsの値)
    アイテムの外側にある下の余白を設定する。
    値が設定されていない場合は、Layout.marginsの値を使用する。

    このプロパティは、QtQuick.Layouts 1.2で導入された。
    marginsプロパティも参照すること。

  • Layout.leftMargin
    値 : real型 (既定値 : Layout.marginsの値)
    アイテムの外側にある左の余白を設定する。
    値が設定されていない場合は、Layout.marginsの値を使用する。

    このプロパティは、QtQuick.Layouts 1.2で導入された。
    marginsプロパティも参照すること。

  • Layout.rightMargin
    値 : real型 (既定値 : Layout.marginsの値)
    アイテムの外側にある右の余白を設定する。
    値が設定されていない場合は、Layout.marginsの値を使用する。

    このプロパティは、QtQuick.Layouts 1.2で導入された。
    marginsプロパティも参照すること。


サンプルコード

以下の例は、ColumnLayoutのサンプルコードである。

QML ColumnLayout 1.png
 ColumnLayout {
    spacing: 2
 
    Rectangle {
       Layout.alignment: Qt.AlignCenter
       color: "red"
       Layout.preferredWidth: 40
       Layout.preferredHeight: 40
    }
 
    Rectangle {
       Layout.alignment: Qt.AlignRight
       color: "green"
       Layout.preferredWidth: 40
       Layout.preferredHeight: 70
    }
 
    Rectangle {
       Layout.alignment: Qt.AlignBottom
       Layout.fillHeight: true
       color: "blue"
       Layout.preferredWidth: 70
       Layout.preferredHeight: 40
    }
 }



「http://mochiuwiki.e2.valueserver.jp/index.php?title=QMLのコントロール_-_ColumnとColumnLayout&oldid=7746」から取得