How to reduce code size in qml documents?



  • Hey,
    There is some situations that you have to copy and paste some snippet code in QML document and these situations make your code bigger, as you know the larger the code the harder to read, maintain and so fourth.
    In C++ we can use macros, functions ,etc to handle this stuff please look at the below code:

    import QtQuick 2.0
    
    Item {
    
        Rectangle
        {
            id:rectOneID
            property bool running: false
            property int durationTime: 500
            color: "black"
            width: 200
            height: 200
            border.width: 2
            border.color: "blue"
            Text
            {
                id: rectNameID
                text: qsTr("Rect")
                color: "blue"
                font.pixelSize: 20
                font.bold: true
                anchors
                {
                    centerIn: parent
                }
            }
    
            x:200
            y:200
    
            /***********************REPEATABLE PART****************************/
            ParallelAnimation
            {
    
            SequentialAnimation
            {
    
                ColorAnimation{
                    target: rectOneID
                    property: "color"
                    from:"black"
                    to: "lime"
                    duration: rectOneID.durationTime
    
                }
                ColorAnimation{
                    target: rectOneID
                    property: "color"
                    from:"lime"
                    to: "black"
                    duration: rectOneID.durationTime
    
                }
    
            }
    
            SequentialAnimation
            {
    
                ColorAnimation{
                    target: rectNameID
                    property: "color"
                    from:"lime"
                    to: "black"
                    duration: rectOneID.durationTime
    
                }
                ColorAnimation{
                    target: rectNameID
                    property: "color"
                    from:"black"
                    to: "lime"
                    duration: rectOneID.durationTime
    
                }
    
            }
            running: rectOneID.running
            loops: -1
            }
    
    
            MouseArea
            {
                anchors.fill: parent
                onClicked:
                {
                    if(rectOneID.running == true)
                    {
                        rectOneID.running = false;
                        rectOneID.color = "black"
                        rectNameID.color = "blue"
    
                    }
                    else
                        rectOneID.running = true;
                }
            }
            /***************************************************/
    
        }
    }
    
    

    Imagine I have 10 other rectangles and I want to have ParallelAnimation in all of them, is there any solution to write this part once and use it multiple times in qml for other rectangles or not?

    Yours,
    Ali



  • @Alien
    Just to make sure,
    You do know that you could put the whole rectangle in its own qml file and import that as a „template „?



  • @Alien in addition to previous answer, you may also take a look at the Repeater type, "used to create a large number of similar items"



  • Dear @J.Hilk ,
    Yes I know but it coudn't help



  • Dear @Pablo-J.-Rogina,
    Repeater it can be a solution but I'm looking for something like function in c++ or it's better to say inline function which can replace snippet code where ever they invoked or even macros


Log in to reply
 

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