QML

Question

我正在使用 Qt 5.15。
我尝试使用TabBar，但我发现第一个TabButton是高亮的，但被TabBar截断了。
像这样：

如果我单击另一个 TabButton 然后再次单击第一个 TabButton，它显示正确。
像这样：

我希望它像初始的第二张图片一样显示。
我该如何解决？

我的代码：

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

Answer 1

我找不到好的解决方案，但您可以将当前项目更改为第二个，然后再返回第一个，以模拟您使用鼠标所做的操作。

您可以在 Component.onCompleted 插槽上执行此操作：

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 - 第一个 TabButton 被 TabBar 剪裁

QML - First TabButton is clipped by TabBar

qt

qtquick2

qtquickcontrols2