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

概要

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では、これらのアイテムを自動的にこのように縦に並べて配置する。

 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に自動的に適用される。

ファイル:QML Column 1.mp4

 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も参照すること。