滑块样式：沿凹槽宽度渐变

Question

我正在尝试创建自定义 QML Slider 样式，如下所示：

SliderStyle {
    groove: Item {
        anchors.verticalCenter: parent.verticalCenter
        implicitWidth: 500
        implicitHeight: 10
        Rectangle {
            radius: height/2
            anchors.fill: parent
            border.width: 1
            border.color: "#888"
            gradient: Gradient {
                GradientStop { color: "#0A406E" ; position: 0 }
                GradientStop { color: "#FFA800" ; position: 1 }
            }
        }
    }
}

然而，这里凹槽上的梯度是从 top 到 bottom 而不是 left 到 right。我尝试交换 width 和 height 值并将 Rectangle 旋转 -90 度，但随后滑块没有响应。另外，我永远无法沿着滑块控件的中心完成旋转，这使得放置有点问题。

我想知道是否有办法实现这种左->右渐变流。

Answer 1

Rectangle 的属性 gradient 允许构建简单的垂直渐变。对于更复杂的渐变，有 LinearGradient, RadialGradient and ConicalGradient 种类型。

例如水平渐变：

import QtGraphicalEffects 1.0

SliderStyle {
    groove: Item {
        anchors.verticalCenter: parent.verticalCenter
        implicitWidth: 500
        implicitHeight: 10
        Rectangle {
            radius: height/2
            anchors.fill: parent
            border.width: 1
            border.color: "#888"
            layer.enabled: true
            layer.effect: LinearGradient {
                start: Qt.point(0, 0)
                end: Qt.point(500, 0)
                gradient: Gradient {
                    GradientStop { position: 0.0; color: "#0A406E" }
                    GradientStop { position: 1.0; color: "#FFA800" }
                }
            }
        }
    }
}

滑块样式：沿凹槽宽度渐变

Slider Style: Gradient along the width of the groove

user-interface

qt

qml

qt-quick

qtquickcontrols