Synchronized TabBars inside StackLayout



  • Hello,
    I want synchronized TabBars inside StackLayout aka there are multiple TabBars inside StackLayout and changing TabBar currentIndex every other TabBar and StackLayout currentIndex should also change to that index .My current code works but I'm worried about recursion. Code where recursion might occur I commented //Important!. Should I be worried or does it look ok?

    Window {
        visible: true
        width: 640
        height: 480
    
        StackLayout {
            id: stack
            width: 200
            height: 200
    
            Rectangle {
                color: "blue"
                TabBar {
                    id: nav
                    anchors.bottom: parent.bottom
                    width: parent.width
                    currentIndex: stack.currentIndex //Important!
                    TabButton {
                        text: "1"
                    }
                    TabButton {
                        text: "2"
                    }
                    onCurrentIndexChanged: stack.currentIndex = currentIndex //Important!
                }
            }
    
            Rectangle {
                color: "red"
                TabBar {
                    id: navB
                    anchors.bottom: parent.bottom
                    width: parent.width
                    currentIndex: stack.currentIndex //Important!
                    TabButton {
                        text: "1"
                    }
                    TabButton {
                        text: "2"
                    }
                    onCurrentIndexChanged: stack.currentIndex = currentIndex //Important!
                }
            }
        }
    }
    


  • @Eligijus The Qt documentation recommends that when a property value is changed manually (in a C++ object) the notify signal should be emitted only if the value is actually different than the previous value. If they follow their own advice a QML object doesn't notify the change of value if it hasn't changed. Therefore the potential recursion doesn't actually happen and your code works. But I don't know if this implicit behaviour is documented or if it can be trusted.

    This can be seen with this test app:

    import QtQuick 2.7
    import QtQuick.Controls 2.2
    
    ApplicationWindow {
        visible: true
        width: 640
        height: 480
    
        Button {
            id:b
            anchors.fill: parent
            property int someValue:0
            onClicked: {
                someValue = someValue+1
            }
            onSomeValueChanged: {
                console.log(someValue)
                var x = someValue
                b.someValue = x
                //b.someValue = someValue+1
            }
        }
    
    }
    

    The value of b.someValue is set with the same value and there's no recursion. But if you uncomment the last line there's infinite recursion.


Log in to reply
 

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