Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. problem Qml TabBar
Forum Updated to NodeBB v4.3 + New Features

problem Qml TabBar

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
3 Posts 2 Posters 772 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • C Offline
    C Offline
    cosmoff
    wrote on last edited by cosmoff
    #1

    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

    1 Reply Last reply
    0
    • Shrinidhi UpadhyayaS Offline
      Shrinidhi UpadhyayaS Offline
      Shrinidhi Upadhyaya
      wrote on last edited by
      #2

      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.
      Upvote the answer(s) that helped you to solve the issue.

      C 1 Reply Last reply
      2
      • Shrinidhi UpadhyayaS 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:-

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

        C Offline
        C Offline
        cosmoff
        wrote on last edited by
        #3

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

        1 Reply Last reply
        0

        • Login

        • Login or register to search.
        • First post
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved