Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Efficient way for blinking some items in a repeater



  • Hey,
    What is an efficient way for blinking some items in a repeater I use QT 5.10.1 and implement below code inside a repeater :
    some variable such as (is_visible,icon_visiblity,property_value,blinking,etc) come from my c++ model which is inherited from QAbstractListModel

    
    Item
    {
        Row
        {
            id:rowID
            spacing: 5
            y: index * 25
            property bool isBlink: false
            visible: is_visible
    
            Rectangle
            {
                width: 18
                height: 18
                color:"#00000000"
                Image
                {
                    id: iconID
                    source:icon_url
                    fillMode: Image.PreserveAspectFit
                    anchors.fill: {parent.Center}
                    visible:icon_visiblity
                }
            }
            Text
            {
                id: propertyNameID
                text: property_name
                color: (enable)?property_name_color:"grey"
                font.bold: true
                font.pointSize: 12
                verticalAlignment: Text.AlignVCenter
                style: Text.Outline
                styleColor: "black"
            }
            Text
            {
                id: propertyValueID
                text: property_value
                font.pointSize: 12
                verticalAlignment: Text.AlignVCenter
                color: (enable)?property_value_color:"grey"
                style: Text.Outline
                styleColor: "black"
    
            }
    
            state: "show"
    
            states:
            [
                State
                {
                    name: "hide";
                    PropertyChanges { target: rowID; opacity:0.0}
                },
                State
                {
                    name: "show";
                    PropertyChanges { target: rowID; opacity:1.0}
                }
            ]
    
            transitions: Transition
            {
                from: "show"; to: "hide"; reversible: true
                PropertyAnimation
                {
                    properties: "opacity"
                    duration: 300
                }
            }
    
            Timer
            {
                interval: 300
                running:
                {
                    if(blinking)
                    {
                        true
                    }
                    else
                    {
                        if(is_visible)
                        {
                            rowID.state = "show"
                        }
                        else
                        {
                            rowID.state = "hide"
                        }
                        false
                    }
                }
                repeat:blinking
    
                onTriggered:
                {
                    if(blinking)
                    {
                    if(rowID.state === "show")
                        rowID.state = "hide"
                    else
                        rowID.state = "show"
                    }
                    else
                    {
                            rowID.state = "show"
                    }
                }
            }
        }
    }
    

    It seems slow specially when multiple items are blinking in runtime does it exist any better way to doing that?

    Yours,



  • @Alien
    One possible simplification of your rather convoluted construction is as follows:

    Item
    {
        id: delegateItem
    
        Row
        {
            id:rowID
            spacing: 5
            y: index * 25
            property bool isBlink: false
    
            Rectangle
            {
                width: 18
                height: 18
                color:"#00000000"
                Image
                {
                    id: iconID
                    source:icon_url
                    fillMode: Image.PreserveAspectFit
                    anchors.fill: {parent.Center}
                    visible:icon_visiblity
                }
            }
            Text
            {
                id: propertyNameID
                text: property_name
                color: (enable)?property_name_color:"grey"
                font.bold: true
                font.pointSize: 12
                verticalAlignment: Text.AlignVCenter
                style: Text.Outline
                styleColor: "black"
            }
            Text
            {
                id: propertyValueID
                text: property_value
                font.pointSize: 12
                verticalAlignment: Text.AlignVCenter
                color: (enable)?property_value_color:"grey"
                style: Text.Outline
                styleColor: "black"
            }
        }
        
        state: isBlink? "blinking" : ""
        
        states: [
            State {
                name: "blinking"
                when: isBlink
            }
        ]
    
        transitions: [
            Transition {
                from: "" //Default state
                to: "blinking"
    
                SequentialAnimation {
                    loops: Animation.Infinite
                    PropertyAnimation {target: delegateItem; property: "opacity"; from: 1.0; to: 0.0; duration: 500 }
                    PropertyAnimation {target: delegateItem; property: "opacity"; from: 0.0; to: 1.0; duration: 500 }
                }
            }
        ]    
    }
    

    There may even be better solutions, but I'm not particularly good at animations yet so, hopefully, someone with more QML and Qt experience can help you further.


Log in to reply