QML：带边框的圆角矩形

Question

我必须在 QML 中创建一些 "tabs"，它应该在顶部有圆角并在其周围有一个边框：

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

（选项卡是列表视图的一部分）

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

    model: TabsModel{}

    delegate: TabsDelegate {

        height: parent.height

    }
}

作为实际选项卡的代表：

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

如果您可以在 GUI 上将矩形的底边塞到某些东西下面，则可以使用单个矩形。这就是您开箱即用的所有操作，因为 QML 不支持自定义角角度。当然，您可以尝试用另一个第三个矩形覆盖这条线，但这显然是您不应该采用的错误和混乱的方法。

否则就得手工绘画了

这里有很多选项。:

1 - 使用 Canvas 从 QML 绘制，并将该图形与 BorderImage 一起使用，这将允许您使用相同的、单次绘制的元素来驱动任意大小的标签。您也可以使用第三方程序生成的图像，但在 QML 中绘制更灵活

2 - 使用 QQuickPaintedItem 并使用 C++ 和 QPainter

绘制整个选项卡

3 - 实施适当的 QQuickItem 生成所需的几何图形并使用 OpenGL 中的 QML 场景图高效地渲染项目。

Answer 2

您可以简单地添加另一个 Rectangle（在 bottomRect 和 text 之间）来隐藏中间边框：

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

Answer 3

我最近需要一个圆角矩形，每个角的半径不同并且有边框，所以我实现了一个。它依赖于 Qt 6 并使用着色器，因此它不适用于软件渲染，但我仍然希望它对某些人有所帮助。该代码可在 https://gitlab.com/Akeras/QmlRoundedRectangle

QML：带边框的圆角矩形

QML : Rounded rectangle with border

qt

rounded-corners

qml