「QMLのコントロール - ColumnとColumnLayout」の版間の差分

📢 Webサイト閉鎖と移転のお知らせ

このWebサイトは2026年9月に閉鎖いたします。

移転先はhttps://mochiu.net/index.php?title=QMLのコントロール - ColumnとColumnLayoutです。

新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）

新しい編集 →

ビジュアルウィキテキスト

@@ 84行目: / 84行目: @@
 *: このメソッドは、Qt 5.9で導入された。
 <br>
-==== サンプルコード ====
+==== サンプルコード 1 ====
 <code>Column</code>は、子アイテムを1つの列に沿って配置する。<br>
 これは、<code>anchors</code>プロパティを使用せずに、複数のアイテムを垂直に配置する方法として使用できる。<br>
@@ 90行目: / 90行目: @@
 以下の例では、<code>Column</code>内の子アイテムとして、様々なサイズの3つの<code>Rectangle</code>を作成している。<br>
 Columnでは、これらのアイテムを自動的にこのように縦に並べて配置する。<br>
+[[ファイル:QML Column 1.png|フレームなし|中央]]
   <syntaxhighlight lang="qml">
   Column {
@@ 125行目: / 126行目: @@
 <br>
 <code>Column</code>やその他の関連する<code>Positioner</code>アイテムの使用に関する詳細は、[[QMLのコントロール - Positionerアイテム]]を参照すること。<br>
+<br>
+==== サンプルコード 2 ====
+<code>Column</code>内にアイテムを追加する場合や<code>Column</code>内でアイテムが移動する場合、特定のTransitionを使用してアイテムをアニメーションさせることができる。<br>
+<br>
+以下の例では、<code>move</code>プロパティに特定のTransitionを設定している。<br>
+[Space]キーを押下した時、緑の<code>Rectangle</code>の可視値が切り替わる。<br>
+緑の<code>Rectangle</code>の表示 / 非表示により、青の<code>Rectangle</code>が列の中で移動して、<code>move</code>プロパティが青の<code>Rectangle</code>に自動的に適用される。<br>
+[[ファイル:QML Column 1.mp4|フレームなし|中央]]
+ <syntaxhighlight lang="qml">
+ 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
+ }
+ </syntaxhighlight>
+<br>
+<code>Row</code>、<code>Grid</code>、<code>Flow</code>、<code>Positioner</code>、<code>ColumnLayout</code>も参照すること。<br>
 <br><br>
 __FORCETOC__
 [[カテゴリ:Qt]]