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?