qt - QML : Rounded rectangle with border

Question

我必须在 QML 中创建一些“选项卡”，其顶部应该有圆角，并且上面有边框:

我设法使用 2 个矩形创建圆角矩形:

(选项卡是 ListView 的一部分)

 ListView {
    id: listView
    anchors.fill: parent
    orientation: ListView.Horizontal
    spacing: Math.floor(0.60 * parent.width / 100)

    model: TabsModel{}

    delegate: TabsDelegate {

        height: parent.height

    }
}

作为实际选项卡的委托(delegate):

Item {
    id: root

    width: 200

    Rectangle {
        id: topRect
        anchors.fill: parent
        radius: 5
        color: backgroundColor
        /*border.width: 1
        border.color: borderColor*/
    }

   Rectangle {
        id: bottomRect
        anchors.bottom: parent.bottom
        anchors.left: topRect.left
        anchors.right: topRect.right
        height: 1 / 2 * parent.height
        color: backgroundColor
        /*border.width: 1
        border.color: borderColor*/
    }

    Text {
        id: text
        anchors.verticalCenter: parent.verticalCenter
        anchors.left: parent.left
        anchors.leftMargin: spaceBefore
        text: label
        color: textColor
    }
}

使用此代码我得到以下结果:

显然，如果我添加边框，我最终会在选项卡中间出现一个边框:

有什么想法可以让我在 qml 中获得我想要的东西吗？

Answer 1

您可以简单地添加另一个矩形(在bottomRect和text之间)来隐藏中间边框:

Rectangle {
    anchors {
        fill: bottomRect
        leftMargin: bottomRect.border.width
        bottomMargin: bottomRect.border.width
        rightMargin: bottomRect.border.width
    }
    color: backgroundColor
}