Customize TabView/TabBar.



  • I am a beginner and I need to do some customization for tabView/tabBar ,Please refer below image:

    0_1500123193062_tab.jpg

    W.r.t IMAGE:

    1. When I customized tab using TabViewStyle I am getting as (1).

    TabView {
    id: tv
    width: parent.width
    height: parent.height
    antialiasing: true

    style: TabViewStyle {
    frameOverlap: -1

    tab: Rectangle {
        color: "Transparent"
        implicitWidth: text1.width + 50
        implicitHeight: 20
        radius: 2
        smooth: true
        Canvas {
            id: canvas1
            anchors.fill: parent
            width: parent.width
            height: parent.height
            onPaint: {
                styleData.selected ? drawTab(canvas1,"#0C3142") :
                                     drawTab(canvas1,"Transparent") //Some custom JS function to draw a object
            }
    
            function drawTab() { // *** some drawing
                console.log('draw')
            }
    
    
    
            Text {
                id: text1
                height: parent.height
                verticalAlignment: Text.AlignVCenter
                anchors.left : parent.left
                anchors.leftMargin: 15
                text: styleData.title
                color: "white"
            }
        }
    }
    
    frame: Rectangle {
        width: parent.width
        height: parent.height
        color: "Transparent"
        border.color:"white"
    }
    tabBar: Rectangle {
        color: "Transparent"
        anchors.fill: parent
    }
    

    }

    Tab {
    id: tab1
    title: "Tab1"
    }
    Tab{
    id: tab2
    title: "Tab2"

    }

    1. Final Output in which there should be no line for selected tab.

    Please suggest.



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