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



  • 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
    ..................
    }@


  • Moderators

    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.



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


  • Moderators

    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
    }
    }
    @



  • Thanks man, it really helpful.....


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.