美文网首页
SwiftUI 设置圆角、边框

SwiftUI 设置圆角、边框

作者: 孤雁_南飞 | 来源:发表于2022-03-11 17:37 被阅读0次

    前言

    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 设置圆角、边框

          本文链接:https://www.haomeiwen.com/subject/vvchdrtx.html