Flickable.horizontalOvershoot
2025-05-26
Flickable.horizontalOvershootは、Qt QuickのFlickable QMLタイプに属する読み取り専用のプロパティです。これは、Flickableのコンテンツが、そのFlickable自体の水平方向の境界をどれだけ超えてドラッグまたはフリックされたかを示す値を保持します。
具体的には、以下のようになります。
- 境界内に収まっている場合: 値は0になります。
- 境界の終了位置を超えてドラッグまたはフリックされた場合: 値は正になります。
- 境界の開始位置を超えてドラッグまたはフリックされた場合: 値は負になります。
このプロパティは、コンテンツが境界を超えて移動した場合に、例えばゴムのような弾性のある動き（オーバースクロール効果）や、カスタムのエッジエフェクトを実装する際に利用されます。
boundsBehavior と boundsMovement との関係
horizontalOvershootの値がどのように報告されるかは、FlickableのboundsBehaviorプロパティによって決まります。
Flickable.StopAtBounds: コンテンツが境界を超えて移動しないようにしますが、それでもhorizontalOvershootとverticalOvershootの値は、コンテンツが境界に「当たった」場合にその仮想的なオーバーシュート距離を報告します。この場合、これらの値を利用してカスタムの「エッジエフェクト」を実装できます。例えば、コンテンツが境界に到達したときに、視覚的なフィードバック（色が変わる、アニメーションするなど）を与えることができます。Flickable.OvershootBounds: フリックの場合のみ境界を超えて移動でき、ドラッグではできません。horizontalOvershootはフリックによるオーバーシュートを報告します。Flickable.DragAndOvershootBounds(デフォルト): ドラッグとフリックの両方で境界を超えて移動でき、horizontalOvershootもその距離を報告します。
使用例
例えば、horizontalOvershootの値を使って、フリックされた際にコンテンツが境界を超えて「引っ張られた」ときに、その引っ張り具合に応じて視覚的な効果（例: 回転や変形）を適用することができます。
import QtQuick 2.0
import QtQuick.Window 2.0
Window {
visible: true
width: 400
height: 400
title: "Flickable horizontalOvershoot Example"
Flickable {
id: flickable
anchors.fill: parent
contentWidth: image.width
contentHeight: image.height
// boundsMovementをFlickable.StopAtBoundsに設定すると、
// コンテンツは境界を超えないが、overshootの値は取得できる。
// boundsBehavior: Flickable.DragAndOvershootBounds // デフォルトではドラッグもフリックもオーバースクロール可能
boundsMovement: Flickable.StopAtBounds // コンテンツは境界を超えないようにするが、overshoot値は利用できる
Image {
id: image
source: "qrc:/your_large_image.png" // 実際の大きな画像パスに置き換えてください
width: 800 // Flickableの幅より大きく設定
height: 400
// horizontalOvershootの値に応じて回転させる例
transform: Rotation {
axis { x: 0; y: 1; z: 0 } // Y軸を中心に回転
origin.x: flickable.width / 2
origin.y: flickable.height / 2
// horizontalOvershootの値を制限して角度に変換
angle: Math.min(30, Math.max(-30, flickable.horizontalOvershoot * 0.1))
}
}
// デバッグ用にhorizontalOvershootの値を表示
Text {
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
text: "Overshoot: " + flickable.horizontalOvershoot.toFixed(2)
color: "white"
}
}
}
Flickable.horizontalOvershoot自体が直接エラーを引き起こすことは稀ですが、その値が期待通りにならない、またはその値を利用した効果が機能しないといった問題が発生することがあります。
horizontalOvershoot が常に 0.0 のままになる
原因
- コンテンツが小さすぎる
Flickable内のコンテンツがFlickable自体のサイズより小さい場合、フリックする領域がないためovershootは発生しません。 - boundsBehavior の設定が不適切
Flickable.StopAtBoundsに設定されている場合、コンテンツは物理的に境界を超えませんが、overshootの値は報告されます。しかし、開発者が「コンテンツが動かないからovershootも出ない」と誤解することがあります。Flickable.DragOverBoundsに設定されている場合、ドラッグではオーバーシュートしますが、フリックではオーバーシュートしません。
- contentWidth が適切に設定されていない
Flickableがフリック可能な領域（contentWidthとcontentHeight）を正しく認識していない場合、コンテンツが境界を超えてもovershoot値が発生しません。例えば、contentWidthがFlickable自体のwidth以下になっていると、フリックする余地がないため、オーバーシュートも発生しません。
トラブルシューティング
- コンテンツのサイズを確認する
コンテンツがFlickableの表示領域よりも大きいことを確認してください。そうでなければ、フリックする必要がありません。 - boundsBehavior の設定を確認する
期待する動作に応じてboundsBehaviorを正しく設定しているか確認してください。- フリックでもドラッグでもオーバーシュートさせたいなら
Flickable.DragAndOvershootBounds(デフォルト)。 - フリックのみオーバーシュートさせたいなら
Flickable.OvershootBounds。 - コンテンツは境界に止まるが、
overshoot値を検出してカスタムエフェクトを適用したいならFlickable.StopAtBounds。
- フリックでもドラッグでもオーバーシュートさせたいなら
- contentWidth と contentHeight を確認する
Flickable内に表示するコンテンツの実際の幅と高さを、FlickableのcontentWidthとcontentHeightに正しく設定しているか確認してください。特に、コンテンツのサイズが動的に変わる場合は、contentItem.childrenRect.widthやcontentItem.childrenRect.heightなどを利用してバインドすると良いでしょう。Flickable { id: myFlickable width: 200 height: 200 contentWidth: contentItem.childrenRect.width // または明示的にコンテンツの幅を設定 contentHeight: contentItem.childrenRect.height // または明示的にコンテンツの高さを設定 Rectangle { // Flickable内のコンテンツ width: 400 height: 200 color: "lightgray" } }
horizontalOvershoot の値が期待した範囲にならない、またはエフェクトが過剰/不足
原因
- エフェクトの計算式が不適切
overshootの値を使った計算式に誤りがある可能性があります。 - 感度の問題
horizontalOvershootはピクセル単位で報告されます。この値を直接エフェクトに適用すると、環境やエフェクトの種類によっては感度が強すぎたり弱すぎたりすることがあります。
トラブルシューティング
- 値をクランプする
overshootの値が非常に大きくなることを防ぐために、Math.min()やMath.max()などを使って値の範囲を制限することを検討してください。angle: Math.min(30, Math.max(-30, flickable.horizontalOvershoot * 0.1)) // -30度から30度の範囲に制限 - 値をスケーリングする
horizontalOvershootの値を適切な係数で乗算または除算して、エフェクトの感度を調整します。// 例: overshoot値を角度に変換し、感度を調整 angle: flickable.horizontalOvershoot * 0.1 // 0.1 は調整係数
Flickable の内容がクリップされない
原因
- clip プロパティが false (デフォルト)
Flickableはデフォルトでコンテンツをクリップしません。つまり、コンテンツがFlickableの境界を超えて表示される可能性があります。これはhorizontalOvershootの値に直接関連するエラーではありませんが、視覚的に問題となることがあります。
トラブルシューティング
Flickableのclipプロパティをtrueに設定することで、境界を超えたコンテンツを非表示にできます。Flickable { // ... clip: true // コンテンツをFlickableの境界内でクリップする }
horizontalOvershoot の値が更新されない（バインディングの問題）
原因
- プロパティへのバインディングが正しくない
horizontalOvershootプロパティが変更されたときに、それを監視している他のプロパティやシグナルが正しく更新されていない可能性があります。
トラブルシューティング
- デバッグ用に
onHorizontalOvershootChangedシグナルハンドラを使用して、値が期待通りに変化しているかconsole.log()で確認してみましょう。Flickable { id: myFlickable // ... onHorizontalOvershootChanged: { console.log("horizontalOvershoot: " + horizontalOvershoot); } } horizontalOvershootを使用しているプロパティが、FlickableのIDを介して正しくバインドされているか確認してください。
Flickable 自体のフリック動作が期待通りでない
原因
- flickDeceleration の設定
flickDecelerationが非常に高い値に設定されていると、フリックがすぐに止まってしまい、オーバーシュートする前に減速してしまう可能性があります。 - 他のMouseAreaなどがイベントを消費している
Flickable内に配置された別のMouseAreaなどが、フリックイベントを先に処理してしまい、Flickableにイベントが伝播していない。 - interactive プロパティが false
Flickableがユーザーの操作を受け付けない設定になっている。
flickDecelerationの値を調整してみてください。デフォルト値から大きく変更している場合は、それがフリックの挙動に影響を与えている可能性があります。Flickableの内部にMouseAreaがある場合、propagateComposedEventsプロパティをtrueに設定するか、onPressed,onReleased,onPositionChangedハンドラ内でmouse.accepted = falseとしてイベントを消費しないように調整することを検討してください。Flickableのinteractiveプロパティがtrue(デフォルト) であることを確認してください。
例1：オーバースクロールによるコンテンツの透明度変化
この例では、Flickableのコンテンツが水平方向の境界を超えてフリックされたときに、そのオーバーシュート量に応じてコンテンツの透明度を変化させます。コンテンツが大きく引っ張られるほど、透明度が増すような効果を想定します。
import QtQuick 2.15
import QtQuick.Window 2.15
Window {
visible: true
width: 600
height: 400
title: "Overshoot Opacity Example"
Flickable {
id: flickable
anchors.fill: parent
contentWidth: contentRect.width // コンテンツの実際の幅に合わせる
contentHeight: contentRect.height // コンテンツの実際の高さに合わせる
clip: true // コンテンツをFlickableの境界内でクリップする
// 境界動作を設定: ドラッグもフリックもオーバーシュートを許可
// デフォルトではDragAndOvershootBoundsですが、明示的に記述
boundsBehavior: Flickable.DragAndOvershootBounds
Rectangle {
id: contentRect
width: 1200 // Flickableの幅より大きく設定
height: 380
color: "lightblue"
// horizontalOvershootの値に応じて不透明度を変更
// Math.max(0.2, ...) で最低透明度を0.2に保ち、完全に消えないようにする
// Math.abs(flickable.horizontalOvershoot) / flickable.width で正規化し、感度を調整
opacity: Math.max(0.2, 1.0 - Math.abs(flickable.horizontalOvershoot) / flickable.width * 2) // * 2 で感度を上げる
Text {
anchors.centerIn: parent
text: "横にフリックして変化を見てください！\nOvershoot: " + flickable.horizontalOvershoot.toFixed(2)
font.pointSize: 24
color: "darkblue"
horizontalAlignment: Text.AlignHCenter
}
// コンテンツの左端と右端を示すインジケーター
Rectangle {
width: 10
height: parent.height
color: "red"
x: 0
}
Rectangle {
width: 10
height: parent.height
color: "red"
anchors.right: parent.right
}
}
// デバッグ用に現在のhorizontalOvershoot値を表示
Text {
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
text: "Current Overshoot: " + flickable.horizontalOvershoot.toFixed(2)
font.pointSize: 16
color: "black"
}
}
}
解説
Math.max(0.2, ...)で、コンテンツが完全に透明になることを防ぎ、最低限の視認性を保っています。* 2は感度調整のための係数です。この値を変更することで、透明度が変化する速さを調整できます。flickable.widthで割ることで、Flickableの幅に対する相対的なオーバーシュート量を得て、異なるサイズのFlickableでも同様の感度になるようにしています。Math.abs()で絶対値を取ることで、どちらの方向にフリックしても同じように透明度が変化するようにしています。flickable.horizontalOvershootの値が負（左にフリック）または正（右にフリック）になるのに応じて、contentRectのopacityを変化させています。
例2：境界でのアイコンの視覚フィードバック
この例では、Flickableが水平方向の境界に到達し、さらにフリックされたときに、矢印アイコンが境界から「飛び出す」ような視覚効果を実装します。コンテンツ自体は境界を超えないように設定します。
import QtQuick 2.15
import QtQuick.Window 2.15
Window {
visible: true
width: 600
height: 400
title: "Overshoot Icon Feedback Example"
Flickable {
id: flickable
anchors.fill: parent
contentWidth: contentArea.width
contentHeight: contentArea.height
// コンテンツは境界を超えないように設定
// しかし、horizontalOvershootの値は報告される
boundsMovement: Flickable.StopAtBounds
boundsBehavior: Flickable.DragAndOvershootBounds // ドラッグでもovershootを検出
Rectangle {
id: contentArea
width: 1000 // Flickableより大きく設定
height: 380
color: "lightgray"
Text {
anchors.centerIn: parent
text: "フリックして左右の境界を確認！\nコンテンツは動きませんがアイコンが反応します"
font.pointSize: 20
color: "black"
horizontalAlignment: Text.AlignHCenter
}
Row {
anchors.fill: parent
spacing: 10
Repeater {
model: 10
Rectangle {
width: 90
height: parent.height - 20
color: "white"
radius: 5
Text {
anchors.centerIn: parent
text: index + 1
font.pointSize: 30
}
}
}
}
}
// 左端のオーバーシュートインジケーター
// horizontalOvershootが負の値のときに表示される
Rectangle {
width: 50
height: 50
color: "green"
radius: 25
anchors.verticalCenter: parent.verticalCenter
x: -width / 2 + Math.max(0, -flickable.horizontalOvershoot * 0.5) // overshootが負のときに右に移動
opacity: Math.min(1.0, Math.abs(flickable.horizontalOvershoot) / 50) // overshootに応じて透明度変化
visible: flickable.horizontalOvershoot < 0 // 左にフリックされたときのみ表示
Text {
anchors.centerIn: parent
text: "<"
font.pointSize: 30
color: "white"
}
}
// 右端のオーバーシュートインジケーター
// horizontalOvershootが正の値のときに表示される
Rectangle {
width: 50
height: 50
color: "green"
radius: 25
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
x: -width / 2 + Math.min(0, -flickable.horizontalOvershoot * 0.5) // overshootが正のときに左に移動
opacity: Math.min(1.0, Math.abs(flickable.horizontalOvershoot) / 50)
visible: flickable.horizontalOvershoot > 0 // 右にフリックされたときのみ表示
Text {
anchors.centerIn: parent
text: ">"
font.pointSize: 30
color: "white"
}
}
}
}
解説
visibleプロパティをflickable.horizontalOvershoot < 0またはflickable.horizontalOvershoot > 0で制御することで、適切な方向の矢印のみが表示されるようにしています。Math.max(0, -flickable.horizontalOvershoot * 0.5)やMath.min(0, -flickable.horizontalOvershoot * 0.5)を使うことで、負の値のオーバーシュート（左端）と正の値のオーバーシュート（右端）で、それぞれ異なる矢印アイコンが境界から飛び出すように見せています。- その
horizontalOvershootの値を利用して、左右に配置された矢印アイコンのx座標とopacityを動的に変更しています。 boundsMovement: Flickable.StopAtBoundsを設定することで、コンテンツ自体はFlickableの境界を超えて動きません。しかし、horizontalOvershootの値は、ユーザーがコンテンツを境界を超えて移動させようとした「仮想的な」距離を報告し続けます。
例3：カスタムのリバウンドアニメーション（発展）
horizontalOvershootは、Flickableのリバウンド動作をカスタマイズする際にも使えます。ただし、Flickableはデフォルトで良いリバウンドアニメーションを持っているため、この例はより高度なユースケース向けです。
import QtQuick 2.15
import QtQuick.Window 2.15
Window {
visible: true
width: 600
height: 400
title: "Custom Rebound Animation Example"
Flickable {
id: flickable
anchors.fill: parent
contentWidth: contentRect.width
contentHeight: contentRect.height
// リバウンドアニメーションを無効化（既存のものを上書きする場合）
// flickable.rebound: null // これは直接無効化する方法ではないが、カスタムで制御する意図
// 代わりに、contentX/Yを自分で制御してアニメーションを作る
// コンテンツは境界を超えないように設定
boundsMovement: Flickable.StopAtBounds
boundsBehavior: Flickable.DragAndOvershootBounds
Rectangle {
id: contentRect
width: 1000
height: 380
color: "lightcoral"
// contentRectのx座標をhorizontalOvershootに基づいて計算
// これにより、デフォルトのリバウンド動作を上書きし、カスタムの動きを作成
x: flickable.contentX + (flickable.horizontalOvershoot * 0.5) // オーバーシュートに応じてコンテンツが少しずれる
// Math.atan() を使うと、オーバーシュートが大きくなっても動きが飽和するような効果が得られる
// x: flickable.contentX + (Math.atan(flickable.horizontalOvershoot / 50) * 50)
Text {
anchors.centerIn: parent
text: "カスタムリバウンド効果を試してください。\nOvershoot: " + flickable.horizontalOvershoot.toFixed(2)
font.pointSize: 20
color: "white"
horizontalAlignment: Text.AlignHCenter
}
}
// horizontalOvershootが変化したときに、コンテンツのxをアニメーションさせる
Behavior on contentX {
// FlickableがcontentXを動かすときに、TransitionではなくBehaviorで制御することで
// より細かなアニメーション制御が可能
SmoothedAnimation {
velocity: 200 // 動きの滑らかさを調整
}
}
// overshootが0に戻る際のアニメーションを制御したい場合
// onContentXChanged シグナルで検出し、カスタムアニメーションをトリガーすることも可能
// overshootの値の表示
Text {
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
text: "Current Overshoot: " + flickable.horizontalOvershoot.toFixed(2)
font.pointSize: 16
color: "black"
}
}
}
Behavior on contentXでSmoothedAnimationを使うことで、contentXが変化する際のリバウンドの滑らかさを調整できます。boundsMovement: Flickable.StopAtBoundsとすることで、Flickableがコンテンツを境界内に保持しようとしますが、horizontalOvershootの値は発生し続けます。このovershootを利用して、コンテンツ自体が視覚的に境界から「はみ出る」ような効果を出しています。- この例では、
contentRectのxプロパティをflickable.contentX + (flickable.horizontalOvershoot * 0.5)のように直接バインドしています。これにより、Flickableの内部的なcontentXの動きに加えて、horizontalOvershootに応じた追加のオフセットがコンテンツに適用されます。
ここでは、Flickable.horizontalOvershootを使わない、またはそれを補完する代替方法について説明します。
Flickable の contentX/contentY プロパティと onContentXChanged イベントの利用
horizontalOvershootは、コンテンツが境界を超えて移動した「距離」を直接報告します。しかし、単にコンテンツのスクロール位置を追跡したいだけであれば、FlickableのcontentX（水平方向のスクロール位置）とcontentY（垂直方向のスクロール位置）プロパティを監視するだけでも十分な場合があります。
特徴
- カスタムのリバウンド/スナップ動作
contentXの変化を監視し、その値に基づいてコンテンツの位置を強制的に修正したり、カスタムのアニメーションを適用したりできます。 - オーバースクロール状態の「推測」
contentXが0未満（左端を超えた）またはcontentWidth - widthより大きい（右端を超えた）場合に、手動でオーバースクロール状態を判定できます。 - 基本的なスクロール位置の追跡
コンテンツがどこにあるかを正確に把握できます。
使用例
コンテンツが左端を超えたときに特別なエフェクトを適用し、それを元の位置に戻す（スナップする）例。
import QtQuick 2.15
import QtQuick.Window 2.15
Window {
visible: true
width: 600
height: 400
title: "ContentX-based Overshoot Alternative"
Flickable {
id: flickable
anchors.fill: parent
contentWidth: contentRect.width
contentHeight: contentRect.height
clip: true
// ここでは boundsMovement を Flickable.StopAtBounds に設定してもよいが、
// Flickable.DragAndOvershootBounds のままでも contentX でオーバーシュートを検出できる
// ただし、Flickable自体のリバウンドアニメーションと競合する可能性があるので注意
boundsMovement: Flickable.StopAtBounds // コンテンツが物理的に境界を超えないようにする
Rectangle {
id: contentRect
width: 1000
height: 380
color: "lightgreen"
Text {
anchors.centerIn: parent
text: "contentX を監視してオーバースクロールを検出\nContentX: " + flickable.contentX.toFixed(2)
font.pointSize: 20
color: "darkgreen"
horizontalAlignment: Text.AlignHCenter
}
}
// contentXが変化したときにオーバースクロールを検出
onContentXChanged: {
if (contentX < 0) {
// 左端を超えた場合
console.log("Left overshoot detected! contentX: " + contentX);
// 例: 左端の要素を少し回転させる
// ここでカスタムのアニメーションをトリガーする
// 例として、contentRectのxを直接操作する
// contentRect.x = contentX + (Math.abs(contentX) * 0.2); // 軽微な引っ張り効果
} else if (contentX > contentWidth - width) {
// 右端を超えた場合
console.log("Right overshoot detected! contentX: " + contentX);
}
// contentXが境界内にない場合に、ゆっくりと境界に戻すカスタムアニメーション
// この手法はFlickableのデフォルトのリバウンドと競合する可能性があるため、
// boundsMovement: Flickable.StopAtBounds と組み合わせて使うと効果的
if (contentX < 0 || contentX > contentWidth - width) {
// TimerやPropertyAnimationを使って、contentXを0またはcontentWidth - widthに戻す
// 例: TimerとPropertyAnimationで滑らかに戻す
if (contentX < 0) {
reboundAnimation.from = contentX;
reboundAnimation.to = 0;
} else {
reboundAnimation.from = contentX;
reboundAnimation.to = contentWidth - width;
}
reboundAnimation.start();
}
}
PropertyAnimation {
id: reboundAnimation
target: flickable // FlickableのcontentXをアニメーションさせる
property: "contentX"
duration: 300
easing.type: Easing.OutQuart // 滑らかなリバウンド効果
}
}
}
MouseArea と position プロパティの利用
Flickableを使用せず、より低レベルでフリック動作やオーバースクロールを完全に自作する場合に、MouseAreaとマウスのpositionプロパティ（mouse.x, mouse.y）を直接利用します。
特徴
- パフォーマンスチューニングの可能性
必要に応じて、最適化を細かく制御できます。 - 複雑なジェスチャー
より複雑なカスタムジェスチャー（例: ピンチズームと同時スクロールなど）と組み合わせやすい。 - 完全な制御
フリック、ドラッグ、オーバースクロールの全てをゼロから実装できます。
注意点
- モバイルでの考慮事項
指の動きの微調整、複数指のサポートなどを考慮する必要があります。 - 実装コストが高い
フリックの慣性、減衰、境界でのリバウンドなど、Flickableが提供する多くの機能を自分で実装する必要があります。
使用例（概念的）： この例は非常に単純化されており、実際のフリック動作は含まれていません。オーバースクロールの検出と要素の移動のみを示します。
import QtQuick 2.15
import QtQuick.Window 2.15
Window {
visible: true
width: 600
height: 400
title: "Custom Overshoot with MouseArea"
// コンテンツを保持するRectangle
Rectangle {
id: contentContainer
width: 1000 // 実際のコンテンツ幅
height: 380
x: 0 // コンテンツの現在のX位置
y: (parent.height - height) / 2
color: "lightsteelblue"
Text {
anchors.centerIn: parent
text: "MouseAreaでカスタムフリック\nX: " + contentContainer.x.toFixed(2)
font.pointSize: 20
color: "navy"
horizontalAlignment: Text.AlignHCenter
}
MouseArea {
anchors.fill: parent
property real lastX: 0
property real startX: 0
onPressed: {
lastX = mouse.x;
startX = contentContainer.x;
// フリックアニメーションがある場合は停止する
}
onPositionChanged: {
var deltaX = mouse.x - lastX;
var newX = contentContainer.x + deltaX;
// 境界チェックとオーバースクロール効果の適用
// contentContainer.parent.width は Flickableの幅に相当
if (newX > 0) { // 左端を超えた場合
// オーバーシュート量を計算
var overshootAmount = newX;
// 引っ張り効果を弱める (例: ルートを取る、対数関数を使うなど)
contentContainer.x = startX + Math.sqrt(overshootAmount) * Math.sign(newX);
// より高度なリバウンドアニメーションや視覚フィードバックをここに実装
} else if (newX < parent.width - contentContainer.width) { // 右端を超えた場合
var overshootAmount = (parent.width - contentContainer.width) - newX;
contentContainer.x = startX - Math.sqrt(oversheetAmount) * Math.sign(newX);
} else {
// 通常のドラッグ
contentContainer.x = newX;
}
lastX = mouse.x;
}
onReleased: {
// 指を離したときに、境界に戻るアニメーションをトリガーする
if (contentContainer.x > 0) {
contentSnapAnimation.from = contentContainer.x;
contentSnapAnimation.to = 0;
contentSnapAnimation.start();
} else if (contentContainer.x < parent.width - contentContainer.width) {
contentSnapAnimation.from = contentContainer.x;
contentSnapAnimation.to = parent.width - contentContainer.width;
contentSnapAnimation.start();
}
// ここでフリックの慣性アニメーション（速度に基づいて移動を続ける）も実装する
}
}
PropertyAnimation {
id: contentSnapAnimation
target: contentContainer
property: "x"
duration: 200
easing.type: Easing.OutQuart
}
}
}
ScrollView (Qt Quick Controls) の利用
ScrollViewは、Flickableの上に構築されており、スクロールバーなどのUI要素が追加されています。ScrollView自体にはhorizontalOvershootのような直接的なプロパティはありませんが、内部のflickableItemプロパティを介してFlickableにアクセスし、そのhorizontalOvershootを利用することができます。
特徴
- タッチとマウスのインタラクションの自動切り替え
デバイスに応じて適切なインタラクションを提供します。 - Flickableの機能へのアクセス
ScrollView.flickableItem.horizontalOvershootのようにアクセスできます。 - スクロールバーの自動提供
標準的なスクロールバーが必要な場合に便利です。
使用例
ScrollViewを使って、内部のFlickableのhorizontalOvershootを検出する例。
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Window 2.15
Window {
visible: true
width: 600
height: 400
title: "ScrollView with Flickable.horizontalOvershoot"
ScrollView {
id: scrollView
anchors.fill: parent
// ScrollViewは内部的にFlickableを持っています
// そのFlickableにアクセスしてhorizontalOvershootを取得
// boundsBehavior: Flickable.DragAndOvershootBounds はデフォルトなので不要だが、
// 必要に応じてここで flickableItem.boundsBehavior を設定できる
contentItem: Rectangle {
width: 1000 // ScrollViewの幅より大きく設定
height: scrollView.height // ScrollViewの高さに合わせる
color: "lightgoldenrodyellow"
Text {
anchors.centerIn: parent
// scrollView.flickableItem を通じて Flickable のプロパティにアクセス
text: "ScrollView内のFlickable Overshoot: " + scrollView.flickableItem.horizontalOvershoot.toFixed(2)
font.pointSize: 20
color: "darkgoldenrod"
horizontalAlignment: Text.AlignHCenter
}
}
// ここでflickableItem.horizontalOvershootの変化を監視できる
onFlickableItemChanged: {
// flickableItemが設定されたときに一度だけ実行される
if (flickableItem) {
flickableItem.onHorizontalOvershootChanged.connect(function() {
console.log("ScrollView Flickable Overshoot: " + flickableItem.horizontalOvershoot);
});
}
}
}
}
Item と PinchHandler/DragHandler (Qt Quick Controls) の利用
Flickableを使用せず、よりモダンなQt Quick Controlsのハンドラー（PinchHandler、DragHandlerなど）をカスタムで利用し、独自のスクロールやズーム、オーバースクロールのロジックを実装することも可能です。
特徴
- 柔軟なロジック
ハンドラーのシグナル（onActiveChanged,onTranslationChangedなど）を捕らえ、それに基づいて独自のスクロールやオーバースクロールロジックを記述できます。 - モジュール化された入力処理
ジェスチャーの種類ごとにハンドラーが用意されており、よりクリーンなコードで複雑なインタラクションを構築できます。
使用例（概念的）：
DragHandlerを使って要素をドラッグし、境界を超えたときにオーバースクロール効果をシミュレートする例。
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15 // DragHandlerを使うため
Window {
visible: true
width: 600
height: 400
title: "DragHandler Custom Overshoot"
Rectangle {
id: viewPort
anchors.fill: parent
clip: true // 境界でクリップ
Rectangle {
id: draggableContent
width: 1000
height: 380
x: 0
y: (parent.height - height) / 2
color: "lightsalmon"
Text {
anchors.centerIn: parent
text: "DragHandlerでカスタム実装\nX: " + draggableContent.x.toFixed(2)
font.pointSize: 20
color: "darkred"
horizontalAlignment: Text.AlignHCenter
}
DragHandler {
id: dragHandler
target: draggableContent
xAxis.enabled: true // 水平方向のみドラッグ
yAxis.enabled: false
onTranslationChanged: {
// 現在のドラッグによる移動量を考慮した新しいX座標
var newX = draggableContent.x + dragHandler.translation.x;
// 境界処理とオーバースクロール効果
if (newX > 0) { // 左端を超えた
draggableContent.x = newX * 0.3; // 弱く引っ張る効果
} else if (newX < viewPort.width - draggableContent.width) { // 右端を超えた
var overshootAmount = (viewPort.width - draggableContent.width) - newX;
draggableContent.x = (viewPort.width - draggableContent.width) + (overshootAmount * 0.3); // 弱く引っ張る効果
} else {
draggableContent.x = newX; // 通常のドラッグ
}
// 翻訳量をリセットしないと、次回のTranslationChangedで問題が起こる
dragHandler.translation.x = 0;
}
onActiveChanged: {
if (!dragHandler.active) { // ドラッグ終了時
// 境界に戻るアニメーション
if (draggableContent.x > 0) {
reboundAnim.from = draggableContent.x;
reboundAnim.to = 0;
reboundAnim.start();
} else if (draggableContent.x < viewPort.width - draggableContent.width) {
reboundAnim.from = draggableContent.x;
reboundAnim.to = viewPort.width - draggableContent.width;
reboundAnim.start();
}
}
}
}
PropertyAnimation {
id: reboundAnim
target: draggableContent
property: "x"
duration: 200
easing.type: Easing.OutQuart
}
}
}
}