QML Property Binding update does not propagate

[bluestreak]

Hi,

I have a QML property size, which I am trying to use to change many of my attributes to half size when I reach a split screen state. However, when I update the size property in this state, the reduction in size does not propogate to things such as font size which depend upon it.

Item{
        id:navTab
        property bool split: data.splitScreen
        property double size: 1
        Rectangle {
             width: 100*navTab.size
             height: 100*navTab.size
             color: "black"
             border.color: "lawngreen"
             border.width: 5*navTab.size
             Text{
                 anchors.centerIn: parent
                 text: "Info"
                 font.pointSize: 18*navTab.size
                 color: "white"
             }
             radius: 10*navTab.size
        }
        states: [
            State{
                name: "split"; when: split
                PropertyChanges {
                    target: navTab
                    size: 1/2
                }
            }
        ]
    }

Item{
        id:navTab
        property bool split: data.splitScreen
        property double size: 1
        Rectangle {
             width: 100*navTab.size
             height: 100*navTab.size
             color: "black"
             border.color: "lawngreen"
             border.width: 5*navTab.size
             Text{
                 anchors.centerIn: parent
                 text: "Info"
                 font.pointSize: 18*navTab.size
                 color: "white"
             }
             radius: 10*navTab.size
        }
        states: [
            State{
                name: "split"; when: split
                PropertyChanges {
                    target: navTab
                    size: 1/2
                }
            }
        ]
    }

To copy to clipboard, switch view to plain text mode 

What am I missing about bindings here, which will allow me to do this?

I have also tried simplifying this and using a fontsize property, but even this alone does not propagate when updated.

Text {
            text: "HEADING"
            font.pointSize: navTab.fontsize
            color: "white"
        }
            State{
                name: "split"; when: carData.splitScreen
                PropertyChanges {
                    target: navTab
                    fontsize: 9
                }
            }

Text {
            text: "HEADING"
            font.pointSize: navTab.fontsize
            color: "white"
        }
            State{
                name: "split"; when: carData.splitScreen
                PropertyChanges {
                    target: navTab
                    fontsize: 9
                }
            }

To copy to clipboard, switch view to plain text mode 

Also, trying to create a dependency on a function doesn't seem to work either

function getFontSize(){
        return navTab.fontsize;
    }
         Text{
             text: "Info"
             font.pointSize: navTab.getFontSize()
         }

function getFontSize(){
        return navTab.fontsize;
    }
         Text{
             text: "Info"
             font.pointSize: navTab.getFontSize()
         }

To copy to clipboard, switch view to plain text mode