swiftui给视图添加边框或者只给某个边设置border边框

586 阅读1分钟

直接使用border()就可以给一个视图添加边框效果,但是这种边框会给所有的边都设置上。 border()里面也可以添加属性.border(.blue, width: 5)这种就是设置颜色和宽度。

设置圆角边框

        Text("1024小神")
            .padding()
            .cornerRadius(20)
            .overlay(
                RoundedRectangle(cornerRadius: 20, style: .continuous)
                     .stroke(.orange, lineWidth: 2)
                        
            )

设置正圆形边框:

Text("1024小神")
            .padding(30)
            .overlay(Circle().stroke(.orange, lineWidth: 2))

单独给某个边缘设置边框:

通过修改alignment的对齐方式,可以实现上下边框

Text("1024小神")
            .padding(30)
            .overlay(
                Rectangle()
                    .frame(width: nil, height: 2, alignment: .top)
                    .foregroundColor(Color.red),
                alignment: .top
            )

实现左右边框

将Rectangle的宽度设置2,高度设置为0,就有了长条形的形状,然后再设置alignment为leading就可以实现左边边框,设置为trailing就可以实现右边边框。

Text("1024小神")
            .padding(30)
            .overlay(
                Rectangle()
                    .frame(width: 2, height: nil, alignment: .top)
                    .foregroundColor(Color.red),
                alignment: .leading
            )

右边边框:

可以通过修改width设置边框的粗细