Question

我必须在QML中创建一些“标签”，它应该在顶部有圆角，并且在它上面有一个边框：

我设法使用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

您只需添加其他Rectangle（bottomRect和text之间）即可隐藏中间边框：

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

Answer 2

如果您可以将其底边折叠在GUI上的某些东西下，则可以使用单个矩形。由于QML不支持自定义角度钓鱼，所以你可以开箱即用。当然，你可以尝试用另外的第三个矩形来覆盖那一行，但这显然是你不应该采取的错误和混乱的方法。

否则你将不得不做手绘。

这里有很多选择。：

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

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

绘制整个标签

3 - 实现一个生成所需几何体的正确QQuickItem，并使用OpenGL中的QML场景图有效地渲染项目。

QML：带边框的圆角矩形

2 个答案: