QML - First TabButton is clipped by TabBar

Question

I'm using Qt 5.15.
I tried using TabBar,but I found that the first TabButton is highlight but is clipped by TabBar.
Like this:

If I clicked another TabButton then click the first TabButton again, it was shown correct.
Like this:

I hope it is shown like the second picture on initial.
How can I fixed it?

My code:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle{
        anchors.fill: parent
        color: "yellow"
    }

    TabBar {
        id: bar
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.margins: 20

        clip:true
        width: 200

        Repeater {
            model: ["First", "Second", "Third", "Fourth", "Fifth"]

            TabButton {
                text: modelData
                width: implicitWidth+12
            }
        }
    }
}

U.Tuken U.Tuken · Accepted Answer · 2021-07-14T11:39:48

I couldn't find a good solution but you could change the current item to the second and then back to the first for simulating what you are doing with your mouse.

You could do this on Component.onCompleted slot :

TabBar {
    id: bar
    anchors.left: parent.left
    anchors.top: parent.top
    anchors.margins: 20

    clip: true
    width: 200

    Repeater {
        model: ["First", "Second", "Third", "Fourth", "Fifth"]

        TabButton {
            text: modelData
            width: implicitWidth+12
        }
    }

    Component.onCompleted: {
        currentIndex = 1
        currentIndex = 0
    }
}

QML - First TabButton is clipped by TabBar

1 Answers