Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

problem Qml TabBar



  • 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



  • 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:-

    ad796795-c5b4-4f56-b549-25d61b37e1f5-image.png



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


Log in to reply