problem Qml TabBar

cosmoff

Hello everyone,

I try to create a dynamic TabButton which change the color of the text in raspberry when I click on the tabButton, and the others tabButtons have their texts colors which should become white.

But in my code, every text from tabButton are raspberry, and nothing is happening when I click on the tabButton and I do not know why.

this is my code :

TabBar {

                    id: tabBar
                    currentIndex: swipeView.currentIndex

                    property int memo :0

                    Repeater {
                        id: specificTabs
                        state: "NOT_SELECTED"
                        model: [
                            "A",
                            "B",
                            "C"]
                        delegate: TabButton{
                            id: idtabButton
                            text: modelData
                            width : 350

                            state: tabBar.memo === tabBar.currentIndex ? "SELECTED" : "NOT_SELECTED"

                            contentItem: Text {
                                id : textTabBar
                                text: idtabButton.text
                                color: graphicIdentity.white
                                horizontalAlignment: Text.AlignHCenter
                                verticalAlignment: Text.AlignVCenter
                            }

                            background: Rectangle {
                                id: backgroundTabBar
                                implicitWidth: 100
                                implicitHeight: 40
                                border.color: idtabButton.down ? graphicIdentity.raspberry : "#444444"
                                border.width: 1
                                radius: 2
                                color : "#444444"
                            }
                            onClicked: {

                                if( tabBar.memo != tabBar.currentIndex )
                                {
                                    console.log("tabBar.currentIndex = " + tabBar.currentIndex)
                                    tabBar.memo = tabBar.currentIndex
                                    console.log("tabBar.memo = " + tabBar.memo)

                                }
                            }
                            states: [

                                State { name: "NOT_SELECTED"
                                    PropertyChanges { target: textTabBar ; color : graphicIdentity.white }
                                    PropertyChanges { target: backgroundTabBar ; color : "#444444"}
                                },
                                State { name: "SELECTED"
                                    PropertyChanges { target: textTabBar ; color : graphicIdentity.raspberry }
                                    PropertyChanges { target: backgroundTabBar ; color : "#222222" }
                                }
                            ]

                        }
                    }
                }

                SwipeView {
                    id: swipeView
                    interactive: false

                    currentIndex: tabBar.currentIndex
                    Repeater {
                        id: specificPages
                        model:  [
                            "A.qml",
                            "B.qml",
                            "C.qml"]
                        Loader {
                            active: SwipeView.isCurrentItem
                            source: modelData
                        }
                    }
                }


            }

do you have an idea of the problem ?

Thanks

Shrinidhi Upadhyaya

Hi @cosmoff , i guess this is want what you want, please have a look at the sample code.

Sample Code:-

TabBar {
        id: tbar

        width: parent.width
        height: 40

        Repeater {
            model: 4
            delegate:TabButton {
                id: control

                text: index

                contentItem: Text {
                    text: control.text
                    font: control.font
                    opacity: enabled ? 1.0 : 0.3
                    color: tbar.currentIndex ===index ? "red" : "#17a81a"
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    elide: Text.ElideRight
                }

                background: Rectangle {
                    id: backgroundTabBar
                    implicitWidth: 100
                    implicitHeight: 40
                    border.width: 1
                    radius: 2
                    color : "#444444"
                }
            }
        }
    }

Sample Output:-

cosmoff

@Shrinidhi-Upadhyaya yes it works !!! thanks a lot