Qt的qml的Control类型有个background属性,使用这个属性可以自己绘制背景,从而达到可以设置任意方向的边框

我找到两个方法

方法一:使用两个Rectangle进行覆盖

Page {
        id: page
        x: 200
        y: 78
        width: 200
        height: 200

        background: Rectangle {
            anchors.fill: parent
            color: "white"
            border.width: 1
            border.color: "black"

            // 使用矩形覆盖上层Rectangle的边框
            Rectangle {
                color: parent.color
                border.width: 0
                anchors.fill: parent
                // 使用Margin来确定是否显示边框
                anchors.leftMargin: 1
                anchors.topMargin: 1
                anchors.rightMargin: 1
                anchors.bottomMargin: 0
            }
        }
    }

效果如下图:

方法二:使用Shape绘制边框线

Page {
        id: pageID
        x: 200
        y: 78
        width: 200
        height: 200

        background: Rectangle {
            anchors.fill: parent
            color: "white"
            border.width: 0
            border.color: "black"
            // 绘制一条边框
            Shape {
                anchors.fill: parent
                ShapePath {
                    strokeWidth: 0
                    strokeColor: "black"
                    strokeStyle: ShapePath.SolidLine
                    startX: 0
                    startY: 0
                    PathLine {
                        x: pageID.width
                        y: 0
                    }
                    PathLine {
                        x: pageID.width
                        y: pageID.height
                    }
                }
            }
        }
    }

效果如图:

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐