QML实现顶部圆角带完整边框标签页问题求助

你的问题核心在于用两个Rectangle实现顶部圆角时，两个矩形的边框在中间重叠区域重复渲染，导致出现了明显的分割线。这里有两种简洁的解决思路，优先推荐第一种：

方案一：用单个Rectangle实现顶部圆角（最简洁） #

QML的Rectangle支持单独设置四个角的圆角半径，不需要拆分两个矩形。直接设置topLeftRadius和topRightRadius为目标值，底部两个圆角设为0，就能实现顶部圆角、底部直角的效果，同时边框是完整的，不会出现分割线。

修改后的委托代码如下：

Item {
    id: root
    width: 200

    Rectangle {
        id: tabRect
        anchors.fill: parent
        // 仅设置顶部两个角的圆角
        topLeftRadius: 5
        topRightRadius: 5
        bottomLeftRadius: 0
        bottomRightRadius: 0
        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
    }
}

方案二：调整两个Rectangle的边框（兼容原有结构） #

如果因为特定需求必须保留两个Rectangle的结构，可以通过隐藏两个矩形在连接处的边框来避免重叠：

• 顶部矩形隐藏底部边框
• 底部矩形隐藏顶部边框，并确保其顶部与顶部矩形的底部完全对齐

修改后的代码：

Item {
    id: root
    width: 200

    Rectangle {
        id: topRect
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        height: parent.height / 2
        radius: 5
        color: backgroundColor
        border.width: 1
        border.color: borderColor
        // 移除底部边框，避免和bottomRect的顶部边框重叠
        border.bottom.width: 0
    }

    Rectangle {
        id: bottomRect
        anchors.bottom: parent.bottom
        anchors.left: topRect.left
        anchors.right: topRect.right
        height: parent.height / 2
        color: backgroundColor
        border.width: 1
        border.color: borderColor
        // 移除顶部边框
        border.top.width: 0
        // 确保和topRect底部无缝衔接
        anchors.top: topRect.bottom
    }

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

两种方案都能解决你遇到的分割线问题，第一种代码更简洁易维护，推荐优先使用。

内容的提问来源于stack exchange，提问作者grunk