Signals for entered/exited events in TabView

Question

I have a TabView, which has 3 Tabs, Say tab1, tab2, tab3. Each Tab has some widgets. I want to have some kind of signalling mechanism, so that when I enter tab3, I want to set the state of some of the widgets (e.g. a TextField) within tab3 and when I leave it, I want to reset their state.

Any pointers on how to achieve this? When I read Qt 5.3 documentation about TabView and Tab, I did not find any signals exposed by them.

Signalling can be within tab3 or between Tabview and tab3. I am fine with either of these.

Answer 1

Use onVisibleChanged Try this:

TabView {

    Tab {
        onVisibleChanged: console.log("hello1 "+visible)
        title: "Red"
        Rectangle { color: "red" }
    }
    Tab {
        onVisibleChanged: console.log("hello2 "+visible)
        title: "Blue"
        Rectangle { color: "blue" }
    }
    Tab {
        onVisibleChanged: console.log("hello3 "+visible)
        title: "Green"
        Rectangle { color: "green" }
    }
}

Answer 2

On a tab change, visibility of TWO tabs changes, on the leaving tab (from false to true) and on the entering tab (from true to false). These events are not always serialized. I had to add:

onVisibleChanged: {
    if (!this.activeFocus){
        // ...
    }
}

But, if you do not actually click on tab but activate it by setting tab's active to true, the solution above is not enough. You'd have to use TabView.currentIndex to compare it with the static, i.e. declarative tab index. If onVisibleChanged is called for the new active tab, then the indexes should be equal.

Here is as example:

function refreshButtons(tabIndexStatic){
    if (tabStepsView.currentIndex !== tabIndexStatic)
        return;
    buttonPrev.visible      = tabIndexStatic !== 0
    buttonNext.visible      = tabIndexStatic !== tabStepsView.count - 1
    buttonConvert.visible   = tabIndexStatic === tabStepsView.count - 1
    }
    Tab {
        title: qsTr("Tab 0")
        onVisibleChanged: parent.refreshButtons(0)

        // ...
    }
    Tab {
        title: qsTr("Tab 1")
        onVisibleChanged: parent.refreshButtons(1);
        // ...
    }
    Tab {
        title: "Tab 2"
        onVisibleChanged: tabStepsView.refreshButtons(2)
        // ...
    }
}