Saving Index of TabBar

[mzimmers]

Hi all -

My app has two levels of TabBar. The model for the 2nd level changes with selections from the primary TabBar.

How can I save the index for the 2nd level TabBar when I switch models? So, if under "Home" I was on "Pool", I could return to "Pool" after navigating away from, and back to "Home." Currently it resets to "All Site."

Thanks...

[SGaist]

@mzimmers again in terms of widgets, think of a set of QTabBar stored in a QStackedWidget.

It might be doable with a StackView.

[SGaist]

@mzimmers hi,

How did you implement the switch between sub-tabbar ?

[mzimmers]

@SGaist like this:

Auxtabbar {
    id: auxtabbar
    height: 48.0
        id: prefsModel
        ListElement { name: "Profile && Accounts" }
        ListElement { name: "Device" }
        ListElement { name: "Site" }
    }

    Repeater {
        model: (mainTabBar.tabIndex < 4) ? zoneModel : prefsModel
        Tabbutton_custom {
            text: qsTr(model.name)
        }
    }
}

[SGaist]

@mzimmers rather than changing models, wouldn't it be simpler to consider each tab bar as a whole "widget" ?

[mzimmers]

@SGaist I'm not sure I understand. The auxiliary tab bar I'm implementing may have a variable number of tabs, so I can't hard-code them.

I can already see some pitfalls in my approach, though, so I'm definitely open to suggestions.

[Shrinidhi Upadhyaya]

Here is the sample code:-

ListModel {
        id: topBarModel

        ListElement {
            text: "Home"
            currentSubIndex: 0
        }

        ListElement {
            text: "Equipment"
            currentSubIndex: 0
        }

        ListElement {
            text: "Activity"
            currentSubIndex: 0
        }

        ListElement {
            text: "Service"
            currentSubIndex: 0
        }
    }

    ListModel {
        id: bottomBarModel

        ListElement {
            text: "Profile"
        }

        ListElement {
            text: "Device"
        }

        ListElement {
            text: "Site"
        }
    }

    TabBar {
        id: topBar

        width: parent.width
        height: 50
        spacing: 0

        Repeater {
            model: topBarModel
            TabButton {
                text: model.text
                width: Math.max(100, topBar.width / 4)

                contentItem: Text {
                       text: model.text
                       opacity: enabled ? 1.0 : 0.3
                       color: "#17a81a"
                       horizontalAlignment: Text.AlignHCenter
                       verticalAlignment: Text.AlignVCenter
                       elide: Text.ElideRight
                   }

                background: Rectangle {
                    color: "transparent"

                    Rectangle {
                        width: parent.width
                        height: 2
                        anchors.bottom: parent.bottom
                        color: "purple"
                        visible: topBar.currentIndex === index
                    }
                }
            }
        }
    }

    TabBar {
        id: bottomBar

        width: parent.width
        height: 50
        anchors.top: topBar.bottom
        spacing: 0
        currentIndex: topBarModel.get(topBar.currentIndex).currentSubIndex

        Repeater {
            model: bottomBarModel

            TabButton {
                text: model.text
                width: Math.max(100, bottomBar.width / 3)

                contentItem: Text {
                       text: model.text
                       opacity: enabled ? 1.0 : 0.3
                       color: "#17a81a"
                       horizontalAlignment: Text.AlignHCenter
                       verticalAlignment: Text.AlignVCenter
                       elide: Text.ElideRight
                   }

                background: Rectangle {
                    color: "transparent"

                    Rectangle {
                        width: parent.width
                        height: 2
                        anchors.bottom: parent.bottom
                        color: "purple"
                        visible: bottomBar.currentIndex === index
                    }
                }

                onClicked: {
                    topBarModel.setProperty(topBar.currentIndex, "currentSubIndex", index)
                }
            }
        }
    }

Output:-

[piervalli]

@Shrinidhi-Upadhyaya

if I understand well there a cascade of events,
You should save only the first event

Find in doc Settings class

[mzimmers]

@Shrinidhi-Upadhyaya thank you for the creative solution.

@SGaist I'd like to hear more about your suggestion.

[piervalli]

@mzimmers
Nice Communicty

[SGaist]

@mzimmers again in terms of widgets, think of a set of QTabBar stored in a QStackedWidget.

It might be doable with a StackView.