QML Flickable Issues

Question

我需要一个由背景和移动拇指杆组成的水平控制器。它需要以下行为：

1. 最初居中，拇指杆可以在背景边界内向左或向右拖动。
2. 当释放拖拽时，拇指杆会重新居中。
3. 如果触摸了背景的一部分，则拇指指针会跳到触摸状态。
4. 如果触摸被释放，拇指杆会自动重新定位。
5. 如果在触摸后进行拖动，则拇指杆将从触摸位置拖动。

问题：

1. 在触摸时，拇指杆会根据需要跳转到TouchPoint。但是，如果在触摸之后立即拖动，则在开始拖动之前，拇指杆会跳回到触摸前的位置。

2. 如果将拇指杆向右拖动并松开，它会立即根据需要跳回中心。如果它被拖动到左边界，则在跳回中心之前会有一段延迟。

运行以下代码说明了控制器的工作和问题：

import QtQuick 2.0

Item {
id: horizontalController
width: 300
height: 100   

Rectangle {
    id: controllerBackground
    width: (parent.width / 3) * 2
    height: parent.height
    anchors.centerIn: parent
    color: "white"
}
Flickable
{
    id: controllerFlick
    width: parent.width / 3 * 2
    height: parent.height
    anchors.centerIn: parent
    contentX: width / 4
    contentWidth: bounds.width
    contentHeight:  bounds.height
    boundsBehavior: Flickable.StopAtBounds

    onMovementEnded: {
        contentX = width / 4
    }

    MultiPointTouchArea{
        id: controllerTouchArea
        enabled: true
        anchors.fill: bounds
        touchPoints: TouchPoint {id: controllerTouchPoint }
        onPressed: {
            controllerFlick.contentX = Math.min(Math.max(controllerBackground.width - controllerTouchPoint.x,0),controllerBackground.width / 2)
        }
        onReleased: {
            controllerFlick.contentX = controllerFlick.width / 4
        }
    }

    Item{
        id: bounds
        width: controllerFlick.width * 1.5
        height: controllerFlick.height
        Rectangle {
            id: image
            width: parent.width / 3
            height: parent.height
            anchors.centerIn: parent
            color: "red"
        }
    }
   }
}