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



  • 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



  • 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 {}@



  • 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 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.



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



  • @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 ?



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



  • 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?


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.