SwiftUI中如何为Button添加带cornerRadius的阴影？

嘿，我懂你遇到的困扰了——你给Button加了阴影，但阴影是矩形的，和overlay的圆角描边完全不匹配，看着特别别扭对吧？这是因为你原来的代码里，Button的实际视图边界还是矩形，虽然用overlay画了圆角描边，但阴影是作用在整个Button的原始框架上的，所以才会显示异常。

下面给你两种实用的解决方案：

方案一：给Button内容添加cornerRadius #

最简单的思路就是直接让Button内部的内容整体变成圆角，这样阴影会自动适配圆角形状：

Button(action: { }) {
    Text("SIGN IN")
        .font(.system(size: 17))
        .fontWeight(.bold)
        .foregroundColor(.green)
        .frame(minWidth: 0, maxWidth: .infinity)
        .padding()
        .background(Color.white)
        .overlay(
            RoundedRectangle(cornerRadius: 25)
                .stroke(lineWidth: 1)
                .foregroundColor(.white)
        )
        .cornerRadius(25) // 关键：让内容边界变成圆角
}
.shadow(color: .gray, radius: 2, x: 0, y: 2)

方案二：将背景改为圆角矩形并整合阴影 #

把背景换成带圆角的RoundedRectangle，还能把阴影直接加在背景层上，精准控制阴影范围：

Button(action: { }) {
    Text("SIGN IN")
        .font(.system(size: 17))
        .fontWeight(.bold)
        .foregroundColor(.green)
        .frame(minWidth: 0, maxWidth: .infinity)
        .padding()
        .background(
            RoundedRectangle(cornerRadius: 25)
                .fill(Color.white)
                .shadow(color: .gray, radius: 2, x: 0, y: 2) // 阴影直接作用在圆角背景上
                .overlay(
                    RoundedRectangle(cornerRadius: 25)
                        .stroke(lineWidth: 1)
                        .foregroundColor(.white)
                )
        )
}

补充说明：为什么原来的代码不行？ #

你原来的代码里，clipped()和overlay的圆角描边只是改变了视觉显示，但Button的底层视图边界还是矩形。阴影是基于视图的实际边界绘制的，所以就出现了矩形阴影和圆角描边不匹配的情况。只要让视图的实际边界变成圆角，阴影就会正确显示啦！

内容的提问来源于stack exchange，提问作者Mahendra