Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Remove space between TabButton in TabBar



  • How to remove the white space between the buttons? i can't find the correct property...

    alt text

    This is my code:

    Boton.qml:

    TabButton {
        onCheckedChanged: canvas.requestPaint()
    
        contentItem: Text {
            antialiasing: false
            text: parent.text
            font.family: "monofonto"
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            color: "#19F51E"
        }
        background: Rectangle{
            color: 'black'
        }
        Canvas{
            id: canvas
            width: parent.width
            height: parent.height
            onPaint: {
                var ctx = getContext("2d");
                ctx.reset()
                ctx.lineWidth = 5;
                ctx.strokeStyle = "#19F51E";
                ctx.beginPath()
                if (parent.checked){
                    ctx.moveTo(0, 0)
                    ctx.lineTo(width, 0)
                } else {
                    ctx.moveTo(0, height)
                    ctx.lineTo(width, height)
                }
                ctx.stroke()
            }
        }
    }
    

    Main.qml:

    
    Window{
        color: 'black'
    TabBar {
        width: parent.width
        anchors.margins: 0
        Boton {
            text: "BUTTON"
        }
        Boton {
            text: "BUTTON"
        }
        Boton {
            text: "BUTTON"
        }
    }
    
    StackLayout {
        width: parent.width
        currentIndex: bar.currentIndex
        Item {
            id: homeTab
        }
        Item {
            id: discoverTab
        }
        Item {
            id: activityTab
        }
    }
    }
    
    


  • Set spacing property to 0.



  • This post is deleted!


  • Set spacing property to 0.



  • @IntruderExcluder

    Thanks! that works.


Log in to reply