QT qml给控件添加任意一条边框

最新推荐文章于 2025-03-31 18:00:08 发布

坤仔N

最新推荐文章于 2025-03-31 18:00:08 发布

阅读量8.8k

点赞数 3

分类专栏： QT 文章标签： Qt qml 边框

本文链接：https://blog.csdn.net/chenjk10/article/details/103762412

版权

QT 专栏收录该内容

10 篇文章

订阅专栏

本文介绍在Qt的QML中如何使用Control类型的background属性来自定义元素的背景和边框，通过两种方法实现任意方向的边框效果：一是使用叠加的Rectangle，二是使用Shape绘制边框线。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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
                    }
                }
            }
        }
    }

效果如图：