[SOLVED] Is it possible to conditionally handle a gradient

winkle100

I've added a gradient to a QML button that I've created for use in other areas of our UI. I need to handle the case where the color of the button is transparent. Is it possible to conditionally display a gradient. When I set the rectangle's color to transparent in the QML designer the gradient is completely removed. Is it possible to do this in the QML?

Here's an example of my button:

@

Rectangle {
id: rectangle3
width: rectangle1.width + 20
height: 462
color: "#b18b60"

Rectangle {
    id: rectangle1
    width: 241
    height: 100
    color: "#390dc8"
    anchors.top: parent.top
    anchors.topMargin: 7
    anchors.left: parent.left
    anchors.leftMargin: 10

//
// Here I would like to say...
// if ( !color is transparent ) {

    gradient: Gradient {
        GradientStop { position: 0.00; color: "black" }
        GradientStop { position: 0.50; color: "white" }
        GradientStop { position: 1.00; color: "black" }
    }

// }
}
}

@

task_struct

Hi,

according to documentation of Rectangle

bq. If both a gradient and a color are specified, the gradient will be used.

So you can switch between color and gradient, setting gradient to null.

See this example:

@
import QtQuick 2.0

Rectangle {
id: rect
width: 100
height: 100

color: "blue"

gradient: Gradient {
    id: grad
    GradientStop { position: 0.0; color: "red" }
    GradientStop { position: 0.33; color: "yellow" }
    GradientStop { position: 1.0; color: "green" }
}

MouseArea {
    anchors.fill: parent
    onClicked: {
        console.debug(rect.gradient)
        if( rect.gradient != null ) {
            rect.gradient = null
        }
        else
        {
            rect.gradient = grad
        }
    }
}

}
@

winkle100

Thank you+

bayang

It worked for me. :)