swiftui给视图添加边框大概只给某个边设置border边框
https://i-blog.csdnimg.cn/direct/2532882d146d4cf1ab45cca476ecdf37.png直接利用border()就可以给一个视图添加边框效果,但是这种边框会给所有的边都设置上。 border()内里也可以添加属性.border(.blue, width: 5)这种就是设置颜色和宽度。
设置圆角边框
Text("1024小神")
.padding()
.cornerRadius(20)
.overlay(
RoundedRectangle(cornerRadius: 20, style: .continuous)
.stroke(.orange, lineWidth: 2)
) https://i-blog.csdnimg.cn/direct/55a4d79b421447ed9660c80d1f40db9f.png
设置正圆形边框:
Text("1024小神")
.padding(30)
.overlay(Circle().stroke(.orange, lineWidth: 2)) https://i-blog.csdnimg.cn/direct/e2e1530d5962409e8af326a47b66e9a3.png
单独给某个边沿设置边框:
通过修改alignment的对齐方式,可以实现上下边框
Text("1024小神")
.padding(30)
.overlay(
Rectangle()
.frame(width: nil, height: 2, alignment: .top)
.foregroundColor(Color.red),
alignment: .top
) https://i-blog.csdnimg.cn/direct/df8af9117d134cf8b487855fca8d9837.png
https://i-blog.csdnimg.cn/direct/7d869b7a97cb40dbb66b5b3f72b11183.png
实现左右边框
将Rectangle的宽度设置2,高度设置为0,就有了长条形的形状,然后再设置alignment为leading就可以实现左边边框,设置为trailing就可以实现右边边框。
Text("1024小神")
.padding(30)
.overlay(
Rectangle()
.frame(width: 2, height: nil, alignment: .top)
.foregroundColor(Color.red),
alignment: .leading
) https://i-blog.csdnimg.cn/direct/518c6e9eee424e4b8bda4f3165363c66.png
右边边框:
可以通过修改width设置边框的粗细
https://i-blog.csdnimg.cn/direct/5153e2a4549d43849d9b8ea334365648.png
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页:
[1]