Qml 一侧带边框的圆角

Posted 2023-02-16

【中文标题】Qml 一侧带边框的圆角

【英文标题】：Qml rounded corner of one side with border

【发布时间】：2021-09-26 03:28:55

【问题描述】：

有没有办法在不使用Canvas 的情况下让Rectangle 具有一侧圆角边缘和Qt 边框。

如下所示。

我确实尝试了下面的代码，并且能够在一侧创建圆角。

import QtQuick 2.5
import QtQuick.Window 2.2

Window 
    width: 200
    height: 200
    visible: true

    Item 
        width: 100
        height: 50
        opacity: 0.5
        layer.enabled: true
        anchors.centerIn: parent

        Rectangle 
            color: "blue"
            radius: 10
            anchors.fill: parent
        
        Rectangle 
            color: "blue"
            anchors.fill: parent
            anchors.leftMargin: 10
        
    

使用上面的代码，我可以获得一侧的圆角，但是当我添加边框时，我会看到重叠的边框。 在 Qml 中是否有一种干净的方式来执行此操作？

【参考方案1】：

我可以想到两种方法。

不是“最干净”的方式，但在性能方面可能是最简单的。您可以继续使用上面的代码，但只需绘制另一个无边框矩形，以覆盖您看到的额外边框线。

    property int borderWidth: 4
    Item 
        width: 100
        height: 50
        opacity: 0.5
        layer.enabled: true
        anchors.centerIn: parent

        Rectangle 
            id: roundCorners
            color: "blue"
            radius: 10
            border.width: borderWidth
            anchors.fill: parent
        
        Rectangle 
            id: squareCorners
            color: "blue"
            border.width: borderWidth
            anchors.fill: parent
            anchors.leftMargin: 10
        
        Rectangle 
            anchors.left: squareCorners.left
            anchors.verticalCenter: squareCorners.verticalCenter
            width: borderWidth
            height: squareCorners.height - borderWidth * 2
            color: "blue"
        
    

您可以使用 QML 的 Shape 对象并使用 ShapePath 来定义它。可以在 here 找到文档。

Shape 
    ShapePath 
        strokeWidth: 4
        strokeColor: "black"
        fillColor: "blue"
        PathLine  ... 
        PathLine  ... 
        PathLine  ... 
        PathArc  ... 
    

【讨论】：

第三个选项是 Canvas，但这不是那么高效（所以我不会为此写答案）

@Amfasis，对，再加上 OP 说他们不想使用 Canvas。

哈哈，没看过