1

Slider次のようにカスタム QML スタイルを作成しようとしています。

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へと進んでいます。との値を入れ替えてを -90 度回転させてみましたが、スライダーが反応しませんでした。また、回転をスライダー コントロールの中心に沿って行うことができず、配置が少し問題になりました。bottomleftrightwidthheightRectangle

この左から右への勾配の流れを達成する方法があるかどうか疑問に思っていました。

4

1 に答える 1

3

Rectangleのプロパティgradientを使用すると、単純な垂直グラデーションを作成できます。より複雑なグラデーションにはLinearGradient、RadialGradientと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" }
                }
            }
        }
    }
}
于 2016-02-02T06:06:02.243 に答える