Qt/QML Flickable完全攻略：contentHeightの理解からデバッグまで
2025-05-27
Flickableは、画面に表示しきれない大きなコンテンツを、ユーザーがドラッグしたりフリックしたりしてスクロールできるようにするQMLの要素です。このとき、ユーザーが実際に操作して動かすのは、Flickable自体ではなく、その内部にある「コンテンツ」です。
contentHeightプロパティは、この内部のコンテンツが垂直方向にどれくらいの高さを持っているかを示します。
具体的に説明すると
Flickable.contentHeight: これは、Flickableの内部に配置された「実際のコンテンツ」の全体の高さです。この高さがFlickable自体の高さ（height）よりも大きい場合、コンテンツはスクロール可能になります。Flickableの高さ (height): これは、Flickableコンポーネントが画面上で占める「表示領域」の高さです。つまり、ユーザーに見えている部分の高さです。
例
例えば、縦に非常に長い画像を表示したい場合を考えます。
import QtQuick 2.0
Flickable {
width: 200 // Flickableの表示幅
height: 300 // Flickableの表示高さ
// contentHeightを画像の実際の高さに設定する
contentHeight: image.height
Image {
id: image
source: "very_long_image.png" // 非常に縦長の画像
// widthはFlickableの幅に合わせるなどして、横スクロールが発生しないようにすることが多い
width: parent.width
}
}
この例では、Flickableの表示高さが300ですが、内部のImageの実際の高さ（image.height）が例えば1000だった場合、contentHeightが1000に設定されます。これにより、ユーザーは300の高さの表示領域を通して、1000の高さを持つ画像をスクロールして全体を見ることができるようになります。
- 動的なコンテンツの扱い:
ListViewやGridViewのように、アイテムの数によってコンテンツの高さが変わる場合、contentHeightを動的に更新することで、適切にスクロールできるように設定します（例:contentHeight: contentItem.childrenRect.height）。 - スクロール範囲の決定: ユーザーがどこまでスクロールできるか（コンテンツの終わりがどこか）を
Flickableに教える役割があります。 - スクロールの有効化:
contentHeightがFlickableのheightより大きい場合にのみ、垂直方向のスクロールが可能になります。
Flickable.contentHeightは、Flickableコンポーネントのスクロール動作を適切に制御するために非常に重要なプロパティです。設定ミスや理解不足から、意図しない動作が発生することがよくあります。
スクロールできない、またはスクロール範囲がおかしい
一般的な原因
- 内部のコンテンツの高さが適切に計算されていない。
contentHeightがFlickable自体のheight以下になっている。contentHeightが正しく設定されていない。
トラブルシューティング
-
contentHeightがFlickable.heightより大きいことを確認する
スクロールは、contentHeightがFlickableの表示領域（height）より大きい場合にのみ発生します。これを意識して値を設定してください。Flickable { width: 200 height: 300 // 表示領域の高さ // コンテンツの高さは表示領域より大きくする contentHeight: 1000 // 例えば、コンテンツの実際の高さ // ... } -
内部のコンテンツの高さにバインドする
Flickableの内部に配置されたアイテム（contentItemの子要素）の合計の高さをcontentHeightに設定するのが最も一般的です。contentItemのchildrenRect.heightプロパティが便利です。これは、contentItemのすべての子要素を囲む最小の長方形の高さを示します。Flickable { id: myFlickable width: 200 height: 300 // contentItemの子要素全体の高さにバインド contentHeight: contentItem.childrenRect.height // コンテンツ Column { // またはRow, Gridなど id: contentColumn // コンテンツをここに追加 Rectangle { width: 200; height: 100; color: "red" } Rectangle { width: 200; height: 150; color: "green" } Rectangle { width: 200; height: 200; color: "blue" } Rectangle { width: 200; height: 300; color: "yellow" } Rectangle { width: 200; height: 120; color: "purple" } } }注意
childrenRectは、子要素のx,yプロパティが(0,0)以外の値を持つ場合に正しく機能しないことがあります。通常は子要素をColumnやRowなどのレイアウト要素で囲み、それらをFlickableのcontentItemに配置することで解決します。 -
コンテンツの最小高さ/最大高さの問題
コンテンツ内のアイテムがimplicitHeight（暗黙的な高さ）を持たない場合や、高さが0になっている場合があります。特に、Text要素でtextプロパティが空だったり、Imageでsourceが設定されていなかったりすると、高さが0になり、contentHeightが期待通りに計算されません。- 各アイテムが適切な
heightまたはimplicitHeightを持つことを確認してください。
- 各アイテムが適切な
コンテンツがクリップされない（Flickableの枠からはみ出す）
一般的な原因
clipプロパティがtrueに設定されていない。
トラブルシューティング
Flickableのclipプロパティをtrueに設定します。これにより、Flickableの境界線を超えたコンテンツは描画されなくなります。Flickable { width: 200 height: 300 contentHeight: contentItem.childrenRect.height clip: true // これが重要！ // ... コンテンツ }clip: trueはパフォーマンスにわずかな影響を与える可能性がありますが、ほとんどのユースケースでは許容範囲です。
ListViewやGridViewなどのView系コンポーネント内部での問題
一般的な原因
ListViewのデリゲートの高さが動的に変化する場合に、contentHeightが適切に更新されない。ListViewやGridViewのcontentHeightの計算が複雑で、FlickableのcontentHeightと競合する。ListViewやGridView自体がスクロール機能を持っているため、これらをFlickableでラップする必要がない場合が多い。
トラブルシューティング
- View系のコンポーネントを直接使用する
ほとんどの場合、ListViewやGridViewはそれ自体でスクロール機能を提供します。追加でFlickableでラップする必要はありません。ListView { width: 200 height: 300 model: 100 // 大量のデータ delegate: Rectangle { width: parent.width height: 50 // または動的に変化する高さ color: "lightgray" border.color: "black" Text { text: "Item " + index; anchors.centerIn: parent } } // ここにFlickableをラップする必要はない } - デリゲートの高さが動的に変わる場合
ListViewのデリゲートの高さがテキストの量などによって動的に変わる場合、ListViewは自動的にcontentHeightを再計算しようとしますが、表示領域外のアイテムの高さが正確に計算されず、スクロール範囲がずれることがあります。- 明示的な高さの指定
可能であれば、デリゲートに固定の高さを与えることを検討してください。 - implicitHeightの利用
Textなどの要素はimplicitHeightを持つので、これを活用してデリゲートの高さにバインドします。 - モデルの更新
モデルのデータが変更された際に、ListViewが再描画されるように適切にモデルを更新する必要があります。
- 明示的な高さの指定
MouseAreaとの干渉
一般的な原因
Flickableの内部にMouseAreaが配置されており、MouseAreaがFlickableのスクロールジェスチャーを吸収してしまう。
トラブルシューティング
MouseAreaのpropagateComposedEventsプロパティをtrueに設定することで、イベントを親要素に伝播させ、Flickableがスクロールジェスチャーを認識できるようにします。Flickable { // ... Rectangle { // ... MouseArea { anchors.fill: parent onClicked: { console.log("Rectangle clicked!"); } propagateComposedEvents: true // これが重要！ } } }
レイアウト要素（Column, Row, Gridなど）とFlickableの組み合わせ
一般的な原因
- レイアウト要素を
FlickableのcontentItemの子として直接配置しない。 - レイアウト要素自体に明示的な
heightを設定してしまい、Flickable.contentHeightが正しく計算されない。
トラブルシューティング
-
レイアウト要素のheightは設定しない（またはimplicitHeightを利用する）
ColumnやRowなどのレイアウト要素は、その子要素のサイズに基づいて自身のimplicitWidthやimplicitHeightを決定します。Flickable.contentHeightにバインドする場合、これらのimplicitHeightが正確に伝わるように、レイアウト要素に明示的なheightを設定しないのが一般的です。Flickable { // ... contentHeight: myColumn.implicitHeight // または myColumn.height Column { id: myColumn // height: ... は設定しない（必要なければ） // ... 子要素 } }多くの場合は
contentItem.childrenRect.heightを使うのが最も堅牢です。 -
レイアウト要素をFlickableの直下（contentItemの子）に置く
Flickableは、その直下の要素を自動的にcontentItemの子として扱います。スクロールさせたいコンテンツは、このcontentItemの直下にある必要があります。Flickable { // OK Column { // このColumnがFlickableのcontentItemの子となる // ... } } Flickable { // NG (直接は推奨されない。間に何か挟まることでcontentHeightの計算が複雑になる可能性) Rectangle { Column { // ... } } }
デバッグのヒント
- 境界線の可視化
デバッグ中は、各要素に一時的にborder.colorやcolorを設定して、どこからどこまでがそれぞれの要素の領域になっているかを視覚的に確認すると、レイアウトの問題を発見しやすくなります。 - QML Debuggerを使用する
Qt CreatorのQML Debuggerを使うと、実行中のQMLアプリケーションのプロパティ値をリアルタイムで確認したり、要素ツリーを調べたりできます。これは非常に強力なツールです。 - console.log()を多用する
Flickableのheight、contentHeight、contentItem.childrenRect.heightなどの値を随時console.log()で出力し、期待通りの値になっているか確認してください。Flickable { id: myFlickable width: 200 height: 300 contentHeight: contentItem.childrenRect.height // 状態変化を監視 onHeightChanged: console.log("Flickable height:", myFlickable.height) onContentHeightChanged: console.log("Content height:", myFlickable.contentHeight) onContentXChanged: console.log("Content X:", myFlickable.contentX) onContentYChanged: console.log("Content Y:", myFlickable.contentY) Item { // contentItem id: contentItem onChildrenRectChanged: { console.log("ChildrenRect height:", contentItem.childrenRect.height); } // ... 子要素 } }
静的なコンテンツの高さ
最も基本的なケースで、Flickableの内部コンテンツの高さが固定されている場合です。
main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
Window {
width: 360
height: 640
visible: true
title: "Static ContentHeight Example"
Rectangle {
anchors.fill: parent
color: "#f0f0f0"
Flickable {
id: myFlickable
width: parent.width * 0.8 // 親の幅の80%
height: parent.height * 0.5 // 親の高さの50%
anchors.centerIn: parent
clip: true // コンテンツをFlickableの境界でクリップする
// コンテンツの実際の高さ（Flickableの高さより大きくする）
contentHeight: 800 // 固定値として設定
// Flickableの内部に配置されるコンテンツ
Rectangle {
width: myFlickable.width
height: myFlickable.contentHeight // コンテンツの高さはFlickableのcontentHeightと同じにする
color: "lightblue"
Text {
anchors.centerIn: parent
text: "これは長いテキストの例です。\n" +
"下にスクロールして続きを見てください。\n" +
"Line 1\nLine 2\nLine 3\nLine 4\nLine 5\n" +
"Line 6\nLine 7\nLine 8\nLine 9\nLine 10\n" +
"Line 11\nLine 12\nLine 13\nLine 14\nLine 15\n" +
"Line 16\nLine 17\nLine 18\nLine 19\nLine 20\n" +
"Line 21\nLine 22\nLine 23\nLine 24\nLine 25\n" +
"Line 26\nLine 27\nLine 28\nLine 29\nLine 30\n" +
"Line 31\nLine 32\nLine 33\nLine 34\nLine 35\n" +
"Line 36\nLine 37\nLine 38\nLine 39\nLine 40\n" +
"Line 41\nLine 42\nLine 43\nLine 44\nLine 45\n" +
"Line 46\nLine 47\nLine 48\nLine 49\nLine 50"
font.pixelSize: 18
wrapMode: Text.WordWrap
width: parent.width - 20 // 左右に余白
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
anchors.topMargin: 10
}
}
}
}
}
解説
この例では、FlickableのcontentHeightを固定値800に設定しています。内部のRectangle（コンテンツ）の高さもこのcontentHeightにバインドすることで、Flickableの表示領域（ここではheight: parent.height * 0.5で約320）よりもはるかに大きいコンテンツ全体をスクロールできるようになります。clip: trueは、Flickableの枠外にコンテンツがはみ出さないようにするために重要です。
動的なコンテンツの高さ (Column/Row を使用)
コンテンツの高さが内部の子要素の数やサイズによって動的に変化する場合に、contentItem.childrenRect.height を利用するのが一般的です。
main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15 // Buttonを使用するため
Window {
width: 360
height: 640
visible: true
title: "Dynamic ContentHeight Example"
Rectangle {
anchors.fill: parent
color: "#f0f0f0"
Flickable {
id: myFlickable
width: parent.width * 0.9
height: parent.height * 0.6 // 表示領域の高さ
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
anchors.topMargin: 20
clip: true
// ★重要: contentItemの子要素全体の高さにバインド
contentHeight: contentColumn.height // contentColumnはFlickableのcontentItemの子なので、idで直接参照できる
// スクロールされるコンテンツ（Columnでアイテムを縦に並べる）
Column {
id: contentColumn
width: myFlickable.width // Flickableの幅に合わせる
spacing: 10 // アイテム間の余白
// 初期コンテンツ
Repeater {
model: 5
Rectangle {
width: parent.width - 20
height: 50 + index * 5 // わかりやすいように高さを変える
color: Qt.hsla(index / 10, 0.8, 0.7, 1.0)
Text {
anchors.centerIn: parent
text: "アイテム " + (index + 1)
color: "white"
}
}
}
}
// スクロールバーを追加 (QtQuick.Controls 2.x の機能)
ScrollBar.vertical: ScrollBar {}
}
// アイテムを追加するボタン
Button {
id: addButton
text: "アイテムを追加"
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: myFlickable.bottom
anchors.topMargin: 20
width: 150
height: 40
onClicked: {
// 新しいアイテムを動的に作成し、contentColumnの子として追加
var component = Qt.createComponent("DynamicItem.qml");
if (component.status === Component.Ready) {
var newRect = component.createObject(contentColumn);
// contentColumn.height が自動的に更新され、contentHeightに反映される
} else if (component.status === Component.Error) {
console.log("Error loading component:", component.errorString());
}
}
}
// デバッグ用: FlickableとContentColumnの高さログ
Text {
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: addButton.bottom
anchors.topMargin: 10
font.pixelSize: 14
text: "Flickable Height: " + myFlickable.height.toFixed(0) +
" / Content Height: " + myFlickable.contentHeight.toFixed(0) +
" / Column Implicit Height: " + contentColumn.implicitHeight.toFixed(0)
}
}
}
DynamicItem.qml (新しいファイルとして保存)
import QtQuick 2.15
Rectangle {
// 自身にidはつけない（インスタンスごとに一意に割り当てられるため）
width: parent.width - 20 // 親（Column）の幅に合わせる
height: 70 + Math.random() * 50 // ランダムな高さで動的に変化をシミュレート
color: Qt.hsla(Math.random(), 0.8, 0.7, 1.0)
border.color: "black"
border.width: 1
radius: 5
Text {
anchors.centerIn: parent
text: "新しいアイテム (高さ: " + parent.height.toFixed(0) + ")"
color: "white"
font.pixelSize: 16
}
// デバッグ用
Component.onCompleted: {
console.log("DynamicItem created with height:", height);
}
}
解説
contentHeight: contentColumn.height: これが動的な高さ設定の核心です。FlickableのcontentHeightを、内部のColumn（contentColumn）の高さにバインドしています。Columnの役割:Columnは内部の子要素を縦に並べ、その子要素の合計の高さ（+spacing）に基づいて自身のimplicitHeight（暗黙的な高さ）を決定します。QMLのバインディングメカニズムにより、contentColumnの高さが変化すると、自動的にmyFlickable.contentHeightも更新されます。DynamicItem.qml:Buttonクリック時に、このコンポーネントのインスタンスが作成され、contentColumnの子として追加されます。それぞれのアイテムはランダムな高さを持つため、contentColumnの高さが動的に変化し、それに伴いFlickableのスクロール範囲も適切に調整されます。ScrollBar.vertical: ScrollBar {}: QtQuick.Controls 2.x を使用する場合、Flickableにスクロールバーを簡単に追加できます。
画像のズームとスクロール
contentWidthとcontentHeightを画像の拡大率に応じて変更する例です。
main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
Window {
width: 600
height: 400
visible: true
title: "Zoomable Image Flickable"
Rectangle {
anchors.fill: parent
color: "#d0d0d0"
Flickable {
id: imageFlickable
width: parent.width * 0.9
height: parent.height * 0.9
anchors.centerIn: parent
clip: true // 画像がFlickableの境界からはみ出さないようにクリップ
property real currentZoom: 1.0 // 現在のズーム倍率
property real minZoom: 0.5 // 最小ズーム倍率
property real maxZoom: 3.0 // 最大ズーム倍率
// contentWidth/Height は、元の画像のサイズにズーム倍率をかけたもの
contentWidth: largeImage.width * currentZoom
contentHeight: largeImage.height * currentZoom
// 画像の表示
Image {
id: largeImage
source: "https://picsum.photos/800/600" // 大きな画像のURL (適宜変更してください)
// widthとheightはFlickableのcontentWidth/Heightにバインド
width: parent.width
height: parent.height
fillMode: Image.PreserveAspectFit // アスペクト比を保持してフィット
antialiasing: true // アンチエイリアスを有効にして、拡大時のギザギザを減らす
}
// ズーム操作用MouseArea
MouseArea {
anchors.fill: parent
// マウスホイールでズーム
onWheel: (event) => {
if (event.angleDelta.y > 0) { // 上にスクロール (拡大)
imageFlickable.currentZoom *= 1.1;
} else { // 下にスクロール (縮小)
imageFlickable.currentZoom /= 1.1;
}
// ズーム範囲を制限
imageFlickable.currentZoom = Math.max(imageFlickable.minZoom,
Math.min(imageFlickable.maxZoom,
imageFlickable.currentZoom));
// ズームの中心をマウスカーソルの位置にする
// FlickableのcontentX/Yを調整することで、見た目の中心を維持
var oldContentX = imageFlickable.contentX;
var oldContentY = imageFlickable.contentY;
var newContentX = event.x / imageFlickable.width * (imageFlickable.contentWidth - imageFlickable.width);
var newContentY = event.y / imageFlickable.height * (imageFlickable.contentHeight - imageFlickable.height);
imageFlickable.contentX = newContentX;
imageFlickable.contentY = newContentY;
}
}
}
Text {
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
anchors.bottomMargin: 10
text: "Zoom: " + imageFlickable.currentZoom.toFixed(2)
}
}
}
解説
currentZoomプロパティ: ズーム倍率を管理するカスタムプロパティをFlickable内に定義します。contentWidthとcontentHeightのバインディング:Imageの元のサイズにcurrentZoomを乗算することで、コンテンツの論理的なサイズを拡大・縮小します。MouseAreaでのズーム処理: マウスホイールイベントを捕捉し、currentZoomを増減させます。contentX/contentYの調整: ズームの際に、見た目の中心がずれないようにcontentXとcontentYを調整しています。これにより、ユーザーはマウスカーソルの位置を中心にズームしているように感じられます。
QML Debuggerでの確認
Qt CreatorのQML Debuggerを使うと、実行中のアプリケーションのQML要素のプロパティ値をリアルタイムで確認できます。
- Qt Creatorでプロジェクトを実行します。
- メニューバーから「Debug」>「Start Debugging」>「QML」を選択します。
- デバッガーが起動すると、左下の「QML」タブに要素ツリーが表示されます。
- Flickable要素を選択し、右側の「Properties」タブで
width、height、contentWidth、contentHeight、contentX、contentYなどの値を確認できます。
これにより、期待通りの値が設定されているか、スクロール範囲が正しく計算されているかなどを視覚的に確認できます。
Flickable.contentHeightはスクロール可能なコンテンツの論理的な高さを定義する主要な方法ですが、以下のような代替手段や関連する考慮事項があります。
contentItem.childrenRect.height の利用 (最も一般的な代替/補完)
これはcontentHeightの代替というよりは、contentHeightに最も適切で動的な値を与えるための標準的な方法です。
- 注意点
childrenRectは子要素の配置（x,y）も考慮します。通常はColumnやRowなどのレイアウト要素を使い、要素が重ならないように配置することで期待通りに機能します。 - 使用例
Flickable { id: myFlickable width: 200 height: 300 clip: true // ★これが最も一般的で推奨される方法 contentHeight: contentItem.childrenRect.height // contentItem はFlickableのデフォルトプロパティ // その子要素のサイズに基づいてchildrenRect.heightが計算される Column { id: contentLayout width: myFlickable.width // Flickableの幅に合わせる spacing: 5 Repeater { model: 20 Rectangle { width: parent.width - 20 height: 30 + (index % 5) * 10 // 動的に高さを変える color: "lightsteelblue" Text { text: "Item " + (index + 1); anchors.centerIn: parent } } } } } - 利点
コンテンツの増減やサイズ変更に自動的に追従し、スクロール範囲を適切に調整してくれます。手動で高さを計算・設定する手間が省けます。 - 説明
Flickableの内部コンテンツ（contentItemの子要素）の合計の高さを自動的に計算してcontentHeightにバインドします。
JavaScript を使用した手動計算と設定
コンテンツが非常に複雑でchildrenRect.heightが期待通りに機能しない場合や、特定のロジックで高さを計算したい場合に、JavaScriptで手動でcontentHeightを更新できます。
- 注意点
動的に追加・削除されるアイテムが多い場合、それぞれのonHeightChangedやonVisibleChangedなどのシグナルを監視してupdateContentHeightを呼び出すロジックを適切に実装する必要があります。これはchildrenRect.heightよりも実装が複雑になります。 - 使用例
Flickable { id: myFlickable width: 200 height: 300 clip: true // contentHeightは初期値として0を設定し、JavaScriptで更新する contentHeight: 0 Column { id: contentContainer width: myFlickable.width spacing: 5 // ダミーコンテンツ Repeater { model: 5 Rectangle { id: itemRect width: parent.width - 20 height: 50 + index * 10 color: "lightgray" Text { text: "Item " + (index + 1); anchors.centerIn: parent } // アイテムの高さが変更されたらcontentHeightを再計算 onHeightChanged: myFlickable.updateContentHeight() } } } // contentHeightを更新する関数 function updateContentHeight() { var totalHeight = 0; // contentContainerの子要素のheightを合計する for (var i = 0; i < contentContainer.children.length; i++) { totalHeight += contentContainer.children[i].height; } // spacingも考慮に入れる totalHeight += contentContainer.spacing * (contentContainer.children.length - 1); myFlickable.contentHeight = totalHeight; console.log("Updated contentHeight:", myFlickable.contentHeight); } // Flickableが完成したときに初期計算 Component.onCompleted: { updateContentHeight(); } } - 利点
複雑なレイアウトや特殊な計算が必要な場合に柔軟に対応できます。 - 説明
コンテンツの構成要素が変更されたり、サイズが変化したりするイベントに応じて、JavaScript関数内で各要素の高さと余白を合計し、その結果をFlickable.contentHeightに設定します。
ListView や GridView を使用する
スクロール可能なリストやグリッド状のコンテンツを表示したい場合は、Flickableを直接使うのではなく、専用のListViewやGridViewコンポーネントを使用するのが最も推奨される方法です。
- 注意点
ListViewやGridViewはリスト/グリッド構造に特化しているため、自由なレイアウトには向かない場合があります。- デリゲートの高さが動的に変化する場合は、
ListViewが再計算を行うためのヒントを与えるか、デリゲート内で適切なimplicitHeightを設定する必要があります。
- 使用例
import QtQuick 2.15 import QtQuick.Window 2.15 import QtQuick.Controls 2.15 // For ScrollBar Window { width: 360 height: 480 visible: true title: "ListView Example" ListView { width: parent.width * 0.9 height: parent.height * 0.9 anchors.centerIn: parent clip: true // コンテンツをクリップ // 大量のデータを表示する場合に最適 model: 100 // 100個のアイテム delegate: Rectangle { width: parent.width height: 60 // 各アイテムの高さ color: index % 2 === 0 ? "lightgray" : "white" border.color: "darkgray" border.width: 1 Text { anchors.verticalCenter: parent.verticalCenter anchors.left: parent.left anchors.leftMargin: 10 text: "アイテム #" + (index + 1) } } // ListViewは自動的にcontentHeightを管理するため、明示的に設定する必要はない // contentHeight: contentItem.childrenRect.height // これは不要 ScrollBar.vertical: ScrollBar {} // スクロールバー } } - 利点
- 大規模なデータセットでも高いパフォーマンスを発揮します（仮想化のため）。
- スクロール、フリック、スクロールバーの表示などが標準でサポートされています。
- モデル/ビューの分離により、データの管理が容易になります。
- 説明
これらのコンポーネントは、内部でスクロール機能と仮想化（画面に表示されるアイテムのみを生成・破棄する最適化）を自動的に処理します。contentHeight（またはcontentWidth）は内部で自動的に管理されます。
ScrollView (QtQuick.Controls 2.x) の利用
QtQuick.Controls 2.xにはScrollViewというコンポーネントがあり、これは内部的にFlickableを使用しています。シンプルなスクロール機能が必要な場合に、より高レベルで使いやすい抽象化を提供します。
- 注意点
Flickableに比べて、より詳細なスクロール動作の制御（例:contentX/contentYの直接操作、特定のスクロール量でのアニメーションなど）は、ScrollViewの内部のFlickableを参照して行う必要がある場合があります。ScrollViewの内部実装がFlickableであるため、Flickableの基本的な制約（コンテンツの高さの正確な計算など）は依然として存在します。
- 使用例
import QtQuick 2.15 import QtQuick.Window 2.15 import QtQuick.Controls 2.15 Window { width: 360 height: 480 visible: true title: "ScrollView Example" ScrollView { width: parent.width * 0.9 height: parent.height * 0.9 anchors.centerIn: parent // ScrollViewは自動的にコンテンツの高さを計算し、 // contentHeightを内部で設定してくれるため、明示的な設定は不要 Column { width: parent.width // ScrollViewの幅に合わせる spacing: 5 Repeater { model: 30 Rectangle { width: parent.width - 20 height: 40 + (index % 5) * 5 color: "orange" Text { text: "ScrollView Item " + (index + 1); anchors.centerIn: parent } } } } } } - 利点
Flickableよりも設定が簡単で、一般的なスクロールUIを素早く作成できます。- スクロールバーがデフォルトで提供されます。
- 説明
ScrollViewは、子アイテムを自動的にスクロール可能な領域に配置し、必要に応じてスクロールバーを表示します。内部のコンテンツのサイズに基づいて自動的にcontentWidthとcontentHeightを管理します。
- 特殊なケース
JavaScriptでの手動計算は最終手段として考えますが、通常は上記の方法で対応可能です。 - シンプルなスクロールUI
ScrollViewが手軽で便利です。 - リスト/グリッド状のコンテンツ
ListViewやGridViewを使用するのがパフォーマンスと機能性の面で最適です。 - 最も推奨される方法
Flickableを使用し、contentHeight: contentItem.childrenRect.heightでコンテンツの高さにバインドすることです。これにより、動的なコンテンツにも対応できます。