SwiftUI 设置圆角、边框

烟花下的孤独

已于 2022-03-11 18:01:49 修改

阅读量6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： SwiftUI swift 文章标签： swift swiftui xcode

于 2022-03-10 10:22:21 首次发布

本文链接：https://blog.youkuaiyun.com/u014651417/article/details/123394399

swift 同时被 2 个专栏收录

44 篇文章

订阅专栏

SwiftUI

14 篇文章

订阅专栏

本文详细介绍了如何在 SwiftUI 中设置视图的圆角和边框，包括使用 cornerRadius、clipShape、border 和 RoundedRectangle 或 Circle 结合使用的方法。通过示例展示了先设置 cornerRadius 再设置 border 与反之的效果差异，以及如何创建带有圆角边框的视图。

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

前言

xcode 13.2
ios 15.2

首先创建一个 button ，其他的类型也是一样（像Text、Image 等）

Button("登录/注册") {
    
}

1、圆角

1.1 使用 cornerRadius设置圆角

Button("登录/注册") {
    
}
.padding(EdgeInsets(top: 10, leading: 15, bottom: 10, trailing: 15))
.cornerRadius(15)

在这里插入图片描述

1.2 使用 clipShape设置正圆角

Button("登录/注册") {
    
}
.foregroundColor(.white)
.padding(EdgeInsets(top: 38, leading: 15, bottom: 38, trailing: 15))
.background(Color.gray)
 .clipShape(Circle())

在这里插入图片描述

2、使用border 设置边框

Button("登录/注册") {
    
}
.padding(EdgeInsets(top: 10, leading: 15, bottom: 10, trailing: 15))
.border(.orange, width: 2)

在这里插入图片描述

3、如果你想设置一个弧形的边框线，使用cornerRadius、和border 组合可以不可以呢？

大概会因为顺序的原因，出现一下这两种效果

3.1 先设置 cornerRadius 再设置 border

.cornerRadius(20)
.border(.orange, width: 2)

在这里插入图片描述

3.2 先设置 border 再设置 cornerRadius

.border(.orange, width: 2)
.cornerRadius(20)

在这里插入图片描述

4. 但是这种圆角边框要怎么设置呢？

以下这两种方法仅仅是设置圆角边框

4.1、使用RoundedRectangle 设置圆角，stroke 设置边框颜色和宽度，当然如果当前view有背景色需要设置cornerRadius 否则，不需要

.cornerRadius(20)
.overlay(
    RoundedRectangle(cornerRadius: 20, style: .continuous)
         .stroke(.orange, lineWidth: 2)
            
)

在这里插入图片描述

4.2、如果是正园的话，使用 Circle 替换 RoundedRectangle 就好，当然cornerRadius有背景的话也要设置

.overlay(Circle().stroke(.orange, lineWidth: 2))

在这里插入图片描述

总结：
1：cornerRadius 和 clipShape 只是单纯的设置圆角和切圆
2：border 也只是设置边框

SwiftUI 设置圆角、边框

前言

1、 圆角

1.1 使用 cornerRadius设置圆角

1.2 使用 clipShape设置正圆角

2、使用border 设置边框

3、如果你想设置一个弧形的边框线，使用cornerRadius、和border 组合可以不可以呢？

3.1 先设置 cornerRadius 再设置 border

3.2 先设置 border 再设置 cornerRadius

4. 但是这种圆角边框要怎么设置呢？

4.1、使用RoundedRectangle 设置圆角，stroke 设置边框颜色和宽度，当然如果当前view有背景色需要设置cornerRadius 否则，不需要

4.2、如果是正园的话，使用 Circle 替换 RoundedRectangle 就好 ，当然cornerRadius有背景的话也要设置

1、圆角

4.2、如果是正园的话，使用 Circle 替换 RoundedRectangle 就好，当然cornerRadius有背景的话也要设置