首页 > 解决方案 > QML - 第一个 TabButton 被 TabBar 剪裁

问题描述

我正在使用 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
            }
        }
    }
}

标签: qtqmlqtquick2qtquickcontrols2

解决方案


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

您可以在 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
    }
}

推荐阅读