How to have a global Gradient elemet which can be used across multiple qml files

thisisbhaskar

Hi,

I my application I need same Gradient element across multiple qml files. I don't find a way to define it in one place and use it across multiple qml files. I end up defining same Gradient element in all the qml files.

Any suggestions on how to solve problem.

Thanks,
_Vijay

ludde

Have you tried defining the gradient as a component, i.e. in a separate QML file starting with a capital letter, e.g. MyGradient.qml?
Then, you should be able to use MyGradient instead of Gradient, i.e.:

@gradient: MyGradient {}@

andre

If you need the same gradient several times, better render it to an image and use that instead. Rendering gradients over and over again is expensive.

thisisbhaskar

Hi Ledde, Yes this works. Thanks for your suggestion.
But I don't want to have separate qml file for each gradient I have. Want to place them in single qml file and access them when ever I want. That would be a nice thing to do.

andre

So, instead of MyGradient, create a file GradientProvider instead, and give this one properties that all return a Gradient?

thisisbhaskar

@If you need the same gradient several times, better render it to an image and use that instead. Rendering gradients over and over again is expensive.@

Hi Andre, Thanks for your suggestion. What you are suggesting is to run the app in simulator with gradients, and then do a "PrtSc" to copy the gradient part and use that image in the code ? Will the aspect ration and clarity of the image be preserved when I use same image across devices with multiple resolutions ?

andre

It depends on your gradients and how you use them, I think.

thisisbhaskar

This is how it looks now in my code..

I have a file called GradientProvider.qml

@import QtQuick 1.0

Item {
id: gradientProvider

property Gradient darkBlueGradient : darkBlueGradientItem
property Gradient lightBlueGradient : lightBlueGradientItem

Gradient {
    id: darkBlueGradientItem
    GradientStop { color: "darkblue"; position: 0.0 }
    GradientStop { color: "lightblue"; position: 0.5 }
    GradientStop { color: "darkblue"; position: 1.0 }
}

Gradient {
    id: lightBlueGradientItem
    GradientStop { color: "lightblue"; position: 0.0 }
    GradientStop { color: "blue"; position: 0.5 }
    GradientStop { color: "lightblue"; position: 1.0 }
}

}@

when ever I want darkBlueGradient, I do below

@ GradientProvider { id: gradientProvider }@

@ gradient : gradientProvider.darkBlueGradient @

Does this look ok?