如何在SwiftUI中给按钮添加阴影和圆角？

Question

我正在尝试使用以下代码给按钮添加阴影。

代码：

Button(action: {

            }) {
                Text("SIGN IN")
                    .font(.system(size: 17))
                    .fontWeight(.bold)
                    .foregroundColor(.green)
                    .frame(minWidth: 0, maxWidth: .infinity)
                    .padding()
                    .background(Color.white)
                    .clipped()
                    .overlay(
                        RoundedRectangle(cornerRadius: 25)
                           .stroke(lineWidth: 1)
                           .foregroundColor(.white)
                    )

            }
            .shadow(color: .gray, radius: 2, x: 0, y: 2)

输出：

在上面的图像中，可以看到阴影不太合适。

我该如何实现以下效果？

- Mahendra

Answer 1

我会这样做

注意：最后的.padding并不重要，这取决于按钮放置的位置和方式，在这里只是为了演示。

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)
    )
    .padding()
}

- Asperi

Answer 2

不要直接将阴影设置到按钮上，而是尝试像这样将阴影设置到覆盖层上：

    Button(action: {

    }) {
        Text("SIGN IN")
            .font(.system(size: 17))
            .fontWeight(.bold)
            .foregroundColor(.green)
            .frame(minWidth: 0, maxWidth: .infinity)
            .padding()
            .background(Color.white)
            .clipped()
            .overlay(
                RoundedRectangle(cornerRadius: 25)
                    .stroke(lineWidth: 1)
                    .foregroundColor(.white)
                    .shadow(color: .gray, radius: 2, x: 0, y: 2)
        )

    }

如果有帮助，请告诉我！

- Teetz

---

问题在于它不仅在按钮的底部绘制阴影，而且还在顶部绘制阴影。 - KevinP

Answer 3

如果您只想让按钮的阴影出现在底部，请使用此选项。

   Button(action: {

        }) {
            Text("SIGN IN")
                .font(.system(size: 17))
                .fontWeight(.bold)
                .foregroundColor(.green)
                .frame(minWidth: 0, maxWidth: .infinity)
                .padding()
                .background(Color.white)
                .cornerRadius(25)
                .shadow(color: .gray, radius: 2, x: 0, y: 2)
        }

- KevinP