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

haris123

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

p3c0

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.

haris123

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.

p3c0

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

haris123

Thanks man, it really helpful.....