LinearGradient 5.15 WHERE is the start and end property and PLEASE provide a useful example!

VFCraig

LinearGradient. Initially attempted to use a RadialGradient, but let's face it, we are far enough from the sun to call it linear. Wanted buttons to have a brighter background in the upper left and darkest in the lower right. Documentation shows 2 properties that assist in accomplishing this, start and end. But when I build, and in QtCreator as well, I am informed they DO NOT EXIST!!!!!

Add to that that the documentation tells you to set either start or end in 2 different ways, QPoint(x,y) and Qt.point(x,y). (Strikes me that "QPoint" is NOT correct, as this is QML and NOT C++, but I should expect such from QML docs by now.)

fcarney

What docs are you reading?

fcarney

Are you importing QtQuick.Shapes as well? It has a LinearGradient as well.

import QtQuick.Shapes 1.15  
to
import QtQuick.Shapes 1.15 as QTSHAPES
...
QTSHAPES.<items from shapes> {
}
example:
            QTSHAPES.Shape {
                anchors.fill: parent

                QTSHAPES.ShapePath {
                    strokeColor: "steelblue"
                    fillColor: "transparent"
                    strokeWidth: 5
                    capStyle: ShapePath.RoundCap

                    startX: itemcontrol.width/2
                    startY: itemcontrol.height/2

                    PathAngleArc {
                        radiusX: 32
                        radiusY: 32
                        centerX: itemcontrol.width/2
                        centerY: itemcontrol.height/2

                        startAngle: itemcontrol.animAngle
                        sweepAngle: itemcontrol.animAngle + itemcontrol.animLength
                    }
                }
            }

lemons

Here a simple example:

Button {
        id: myButton
        height: 150
        width: 300
        anchors.centerIn: parent
        text: "MyButton"

        onClicked: console.debug("myButton was clicked!")

        background: LinearGradient {
            id: myGradient
            anchors.fill: parent

            property string color: "blue"
            property double factor: 2.5

            // start at (x/y) = (0/0) [top left corner]
            // as coordinate system INSIDE THIS element
            start: Qt.point(0, 0)

            // end at (x/y) = (width/height) [bottom right corner]
            end: Qt.point(width, height)

            gradient: Gradient{
                // begin with lighter color (brightened by myGradient.factor)
                GradientStop {
                    position: 0.0
                    color: Qt.lighter(myGradient.color, myGradient.factor)
                }
                // end with darker color
                GradientStop {
                    position: 1.0
                    color: myGradient.color
                }
            }
        }
    }