qml 虚线边框绘制

最新推荐文章于 2025-08-26 17:46:42 发布

原创最新推荐文章于 2025-08-26 17:46:42 发布 · 1.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端

qml 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何在 QML 中实现虚线边框的绘制，讲解相关属性和技巧，帮助开发者创建具有定制边框效果的 UI 元素。

    Rectangle{
        width: 400
        height: 100
        anchors.centerIn: parent
        Column{
            width:1
            height:parent.height
            spacing: 5
            clip: true
            anchors.left: parent.left
            Repeater{
                anchors.fill: parent
                model: parent.height/10
                delegate:Rectangle{
                    width: 1
                    height: 10
                    color: "black"
                }
            }
        }
        Column{
            width:1
            height:parent.height
            spacing: 5
            clip: true
            anchors.right: parent.right
            Repeater{
                anchors.fill: parent
                model: parent.height/10
                delegate:Rectangle{
                    width:1
                    height: 10
                    color: "black"
                }
            }
        }
        Row{
            width: parent.width
            height: 1
            spacing: 5
            clip: true
            anchors.top: parent.top
            Repeater{
                anchors.fill: parent
                model: parent.width/10
                delegate:Rectangle{
                    width: 10
                    height: 1
                    color: "black"
                }
            }
        }
        Row{
            width: parent.width
            height: 1
            spacing: 5
            clip: true
            anchors.bottom: parent.bottom
            Repeater{
                anchors.fill: parent
                model: parent.width/10
                delegate:Rectangle{
                    width: 10
                    height: 1
                    color: "black"
                }
            }
        }
    }