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. Tab View How to Get Currently Selected Tab and Make an Element visible
Forum Updated to NodeBB v4.3 + New Features

Tab View How to Get Currently Selected Tab and Make an Element visible

Scheduled Pinned Locked Moved QML and Qt Quick
5 Posts 2 Posters 3.3k 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.
  • H Offline
    H Offline
    haris123
    wrote on last edited by
    #1

    I need to set visibility of some element according to tab selected, that is in my main view there are many tabs and some tabes with common element, I need to make this visible when corresponding tab clicked, is it possible?

    Below is my qml,

    @ TabView {
    id:v_serch_tab
    anchors.top:title.bottom
    height:50
    width: parent.width
    style: touchStyle

                        Tab {
                            title: "Face"
                        }
                       
                        Tab {
                            title: "Motion"
                            Component.onCompleted: input_fild_main_alert.visible = false;
                        }
                        Tab {
                            title: "Access"
                            Component.onCompleted: input_fild_main_alert.visible = false;
                        }
                        
                        Component {
                            id: touchStyle
                            TabViewStyle {
                                //tabsAlignment: Qt.AlignVCenter
    
                                tabOverlap: 0
                                frame: Item { }
                                tab: Item {
                                    implicitWidth: control.width/control.count
                                    implicitHeight: 50
    
                                    BorderImage {
                                        id:current_tab
                                        anchors.fill: parent
                                        border.bottom: 8
                                        border.top: 8
                                        source: styleData.selected ? "../images/tab_selected.png":"../images/tabs_standard.png"
    
    
    
                                        Text {
                                            anchors.centerIn: parent
                                            color: styleData.selected ?"#1E90FF":"white"
    
                                            text: styleData.title.toUpperCase()
                                            font.pixelSize:styleData.selected ? 18:16
                                            font.bold:styleData.selected ? true:false
                                        }
                                        Rectangle {
                                            visible: index > 0
                                            anchors.top: parent.top
                                            anchors.bottom: parent.bottom
                                            anchors.margins: 10
                                            width:1
                                            color: "#1E90FF"
    
                                        }
    
    
                                    }
                                }
                            }
                        }
    
                     
                    }
    

    //need to visible or invisible this element according to tab slelected
    Rectangle{
    visible: false
    ..................
    }@

    1 Reply Last reply
    0
    • p3c0P Offline
      p3c0P Offline
      p3c0
      Moderators
      wrote on last edited by
      #2

      Hi,

      You could use the "currentIndex":http://qt-project.org/doc/qt-5/qml-qtquick-controls-tabview.html#currentIndex-prop property and access that property in Rectangle and use with an appropriate condition to make it visible/invisible.

      157

      1 Reply Last reply
      0
      • H Offline
        H Offline
        haris123
        wrote on last edited by
        #3

        Hi,

        Thanks for reply....I will try it.

        I have one more doubts, where could I write the code for checking currentIndex, when I switch from one tab to another.

        1 Reply Last reply
        0
        • p3c0P Offline
          p3c0P Offline
          p3c0
          Moderators
          wrote on last edited by
          #4

          Well you can use binding with ternary operator,
          for eg.
          @
          Rectangle {
          visible: v_serch_tab.currentIndex==1 ? true : false
          }
          @

          or a normal if-else

          @
          Rectangle {
          property int test : 0
          visible: {
          if(test==1)
          return true
          else
          return false
          }
          }
          @

          157

          1 Reply Last reply
          0
          • H Offline
            H Offline
            haris123
            wrote on last edited by
            #5

            Thanks man, it really helpful.....

            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