如何在 QML 滑块中添加动画按下和打开发布

Question

http://doc.qt.io/qt-5/qml-qtquick-controls-styles-sliderstyle.html

Slider {
    anchors.centerIn: parent
    style: SliderStyle {
        groove: Rectangle {
            implicitWidth: 200
            implicitHeight: 8
            color: "gray"
            radius: 8
        }
        handle: Rectangle {
            anchors.centerIn: parent
            color: control.pressed ? "white" : "lightgray"
            border.color: "gray"
            border.width: 2
            implicitWidth: 34
            implicitHeight: 34
            radius: 12
        }
    }

如何访问滑块的onReleased和onPressed以启动和停止某些动画？

这是我尝试过的：

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls 1.4
Window {
    visible: true
    Slider
    {
        id: head
        property Rectangle thumb: thumb
        anchors.centerIn: parent
        style: SliderStyle {
            groove: Rectangle {
                implicitWidth: 200
                implicitHeight: 8
                color: "gray"
                radius: 8
            }
            handle: Rectangle {
                id: thumb
                anchors.centerIn: parent
                color: control.pressed ? "white" : "lightgray"
                border.color: "gray"
                border.width: 2
                implicitWidth: 34
                implicitHeight: 34
                radius: 12
            }
        }
        onPressedChanged:
        {
            if(pressed)
            {
                console.log("pressed")
                returnAnimation.stop()
            }
            else
            {
                console.log("released")
                returnAnimation.start()
            }
        }
        ParallelAnimation {
            id: returnAnimation
            NumberAnimation { target: thumb.anchors; property: "horizontalCenterOffset";
                to: 0; duration: 200; easing.type: Easing.OutSine }
            NumberAnimation { target: thumb.anchors; property: "verticalCenterOffset";
                to: 0; duration: 200; easing.type: Easing.OutSine }
        }
    }
}

错误：

引用错误：未定义拇指

Answer 1

这是一个完全工作的例子。您将不得不创建此处引用的自己的图像，因为我无法附加它们。

我发现在带有组件对象的 QML 中，范围界定很棘手。Slider 中的 "：style：handle" 组件可以"向外看"更高级别，但更高级别无法"向内看""：style：handle" 组件。

总体战略

1. 在顶级滑块范围内创建属性
使用 "：
2. style：handle" 组件中的属性，因为它可以"看到"
3. 使用更高级别 onPressedChanged 处理程序和 pressed 属性来调整将由低级别组件"看到"的高级属性。

---

Slider {
    id: portVoltageSlider
    width: 100; height: 27
    maximumValue: 150; minimumValue: -150
    value: 0.00
    stepSize: 10
    anchors { centerIn: parent }
    // style:handle component will be able to see/access this property
    // opacity value of style: SliderStyle:handle.sliderHover
    property real hoverOpacity: 0
    // adjust property on slider pressed
    onPressedChanged: {
        // show slider Hover when pressed, hide otherwise
        if( pressed ) {
            console.log("slider pressed. show hover.")
            hoverShowAnimation.start()
        }
        else {
            console.log("slider released. hide hover.")
            hoverHideAnimation.start()
        }
    }
   // gratuitous animation using opacity
   PropertyAnimation {
        id: hoverShowAnimation
        target: portVoltageSlider; properties: "hoverOpacity"; from: portVoltageSlider.hoverOpacity; to: 1; duration: 500
    }
    PropertyAnimation {
        id: hoverHideAnimation
        target: portVoltageSlider; properties: "hoverOpacity"; from: portVoltageSlider.hoverOpacity; to: 0; duration: 500
    }
   style: SliderStyle {
        id: sliderStyle
        property bool hoverVisible: false
        groove: Rectangle {
            //                        x: slider1.leftPadding
            y: portVoltageSlider.topPadding + portVoltageSlider.availableHeight / 2 - height / 2
            implicitWidth: 200; implicitHeight: 4
            width: portVoltageSlider.availableWidth; height: implicitHeight
            radius: 2
            color: "#bdbebf"
            Rectangle {
                width: portVoltageSlider.visualPosition * parent.width; height: parent.height
                color: "yellow"
                radius: 2
            }
        }
        handle: Image {
            id: sliderHandle
            width: 22; height: 24
            source: "sliderThumb.svg"
            anchors { centerIn: parent }
            Image {
                id: sliderHover
                width: 22; height: 24
                source: "sliderValue.svg"
                anchors { bottom: sliderHandle.top }
                opacity: portVoltageSlider.hoverOpacity
                Label {
                    id: check
                    anchors {centerIn: parent; verticalCenterOffset: -4 }
                    text: portVoltageSlider.value
                    font.pointSize: 6
                    font.bold: true
                }
            }
        }
    }
}

Answer 2

我在上面的评论中的意思是：

 Slider {
    ...
    onPressedChanged: {
        if(pressed)
            console.log("pressed")
        else
            console.log("released")
    }
}

Answer 3

这行得通吗？

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls 1.4
Window {
    visible: true
    Slider
    {
        id: head
        property Rectangle thumb: thumb
        //Added these signals:
        signal startAnim
        signal stopAnim
        anchors.centerIn: parent
        style: SliderStyle {
            groove: Rectangle {
                implicitWidth: 200
                implicitHeight: 8
                color: "gray"
                radius: 8
            }
            handle: Rectangle {
                id: thumb
                anchors.centerIn: parent
                color: control.pressed ? "white" : "lightgray"
                border.color: "gray"
                border.width: 2
                implicitWidth: 34
                implicitHeight: 34
                radius: 12
                //Moved animation within the confines of the object that it actually pertains to
                ParallelAnimation {
                    id: returnAnimation
                    NumberAnimation { target: thumb.anchors; property: "horizontalCenterOffset";
                        to: 0; duration: 200; easing.type: Easing.OutSine }
                    NumberAnimation { target: thumb.anchors; property: "verticalCenterOffset";
                        to: 0; duration: 200; easing.type: Easing.OutSine }
                }
                //Signal connections done here:
                Component.onCompleted: {
                    head.startAnim.connect(returnAnimation.start)
                    head.stopAnim.connect(returnAnimation.stop)
                }
            }
        }
        onPressedChanged:
        {
            if(pressed)
            {
                console.log("pressed")
                startAnim()
            }
            else
            {
                console.log("released")
                stopAnim()
            }
        }
    }
}