QML 中的可滑动按钮

Question

我想创建一个组件，它可以从左到右滑动一个矩形来模拟打开或关闭，就像iOS从左到右按钮关闭手机一样（https://youtu.be/qEJ5PerUqFw?t=42秒40像这样）。你知道我该怎么做吗？

致以诚挚的问候

我尝试使用 Slider 和 SwipeDelegate 组件。

Answer 1

在 QML 中，您可以创建任何您想要的内容，但您应该坚持使用标准控件，因为它们对于用户来说是可以理解和熟悉的。 如果您仍然想创建某种自定义控件，您可以创建如下内容：

import QtQuick
import QtQuick.Controls

Window {
    id: window
    visible: true
    width: 600
    height: 400
    title: "Slider test"

    Rectangle {
        id: container
        anchors.centerIn: parent
        width: 300
        height: 50
        radius: 25
        color: "lightgrey"
        border.color: "grey"
        signal myEvent(bool isOn)

        Rectangle {
            id: draggableRect
            width: 50
            height: 48
            radius: 25
            color: "orange"
            border.color: "grey"

            x: 1
            y: 1

            MouseArea {
                id: dragArea
                anchors.fill: parent
                drag.target: parent
                drag.axis: Drag.XAxis
                drag.maximumX: 250
                drag.minimumX: 0

                onReleased: {
                    if (draggableRect.x < 240)
                    {
                        backAnim.running = true;
                    }
                    else
                    {
                        draggableRect.x = 250;
                        container.myEvent(true);
                    }
                }
            }

            PropertyAnimation { id: backAnim; target: draggableRect; property: "x"; to: 1; duration: 300; onFinished: container.myEvent(false); }
        }
    }


    Connections {
        target: container
        function onMyEvent(isOn) { console.log(isOn ? "ON" : "OFF"); }
    }
}