[SOLVED] Is it possible to conditionally handle a gradient
-
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" } }
// }
}
}@
-
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.0Rectangle {
id: rect
width: 100
height: 100color: "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 } } }
}
@ -
Thank you+
-
It worked for me. :)