思路一是将边框拆分成了上下左右四个自定义控件
import QtQuick 2.15
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" } } }}
复制代码
虚线边框效果：
调整 repeater 里的 rectangle 为小方块
Repeater{ anchors.fill: parent model: parent.height/2 delegate:Rectangle{ width: 2 height: 2 color: "black" }}
复制代码
效果：
调整为一长一短的线条
Repeater{ anchors.fill: parent model: parent.width/2 delegate: Rectangle { width: index % 2 === 0 ? 2 : 10 height: index % 2 === 0 ? 2 : 1 color: "black" }}
复制代码
效果
长线条加圆点
Repeater{ anchors.fill: parent model: parent.width/5 delegate: Rectangle { width: index % 2 === 0 ? 4 : 10 height: index % 2 === 0 ? 4 : 1 radius: index % 2 === 0 ? 2 : 0 color: "black" }}
复制代码
效果
还有一种思路是通过 shape 去画 ShapePath，待补充
------------------------------------------------------------------------------------------------------------
参考： https://blog.csdn.net/zs1123/article/details/124948191
评论