SwiftUI中SignInButtonStyle按钮右侧圆角消失问题求助

我实现了一个SignInButtonStyle，但按钮右侧圆角消失，呈现直角效果，期望按钮四个角都保持完整的圆角。

原代码如下：

import Foundation
import SwiftUI

struct SignInButtonStyle: ButtonStyle{
    func makeBody(configuration: Configuration) -> some View {
        ZStack{
            RoundedRectangle(cornerRadius: 20)
                .fill(Color(red: 27/255, green: 57/255, blue: 255/255))
                .frame(width: 315, height: 72)
            HStack{
                Spacer()
                VStack{
                    ZStack(alignment: .topTrailing){
                        Image("Ellipse 4")
                        Image("Ellipse 5")
                    }
                    Spacer()
                }
            }
                VStack{
                    HStack{
                
                    Text("Sign in")
                        .font(.custom("Manrope", size: 20))
                        .foregroundColor(.white)
                Spacer()
                    Image(systemName:"arrow.forward")
                            .font(.custom("Manrope", size: 20))
                        .foregroundColor(.white)
                }
                    .padding(.horizontal, 20)
            }
                    configuration.label
                }
        .frame(width: 315, height: 72)
        .opacity(configuration.isPressed ? 0.7 : 1)
    }
}

extension ButtonStyle where Self == SignInButtonStyle{
    static var signIn: SignInButtonStyle{.init()}
}

问题原因 #

ZStack内部包含椭圆图片的HStack没有被限制在圆角区域内，超出了底层RoundedRectangle的圆角范围，而外层未对超出内容进行裁剪，导致右侧直角覆盖了圆角效果。

修复方案 #

最简单的方式是给整个ZStack添加.clipped()修饰符，裁剪超出背景圆角的内容，同时建议将frame修饰符直接绑定到背景的RoundedRectangle上，避免布局混乱。

修改后的完整代码：

import Foundation
import SwiftUI

struct SignInButtonStyle: ButtonStyle{
    func makeBody(configuration: Configuration) -> some View {
        ZStack{
            // 将frame移至背景图形，作为整个按钮的尺寸基础
            RoundedRectangle(cornerRadius: 20)
                .fill(Color(red: 27/255, green: 57/255, blue: 255/255))
                .frame(width: 315, height: 72)
            
            HStack{
                Spacer()
                VStack{
                    ZStack(alignment: .topTrailing){
                        Image("Ellipse 4")
                        Image("Ellipse 5")
                    }
                    Spacer()
                }
            }
            
            VStack{
                HStack{
                    Text("Sign in")
                        .font(.custom("Manrope", size: 20))
                        .foregroundColor(.white)
                    Spacer()
                    Image(systemName:"arrow.forward")
                        .font(.custom("Manrope", size: 20))
                        .foregroundColor(.white)
                }
                .padding(.horizontal, 20)
            }
            
            configuration.label
        }
        // 裁剪超出圆角区域的内容
        .clipped()
        .opacity(configuration.isPressed ? 0.7 : 1)
    }
}

extension ButtonStyle where Self == SignInButtonStyle{
    static var signIn: SignInButtonStyle{.init()}
}

备选方案：使用Mask #

如果偏好使用mask实现，可在ZStack后添加如下代码（效果与.clipped()一致）：

.mask(
    RoundedRectangle(cornerRadius: 20)
        .frame(width: 315, height: 72)
)

内容的提问来源于stack exchange，提问作者Sebi Cioată