如何使用cornerRadius为SwiftUI中的按钮提供阴影

Mah*_*dra 11 ios swift swiftui

我正在尝试使用以下代码为 Button 提供阴影。

代码:

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)
Run Code Online (Sandbox Code Playgroud)

输出:

在此处输入图片说明

在上图中,您可以看到阴影不正确。

我怎样才能实现以下目标?

在此处输入图片说明

Asp*_*eri 24

我会这样做

注意:最后一个 .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()
}
Run Code Online (Sandbox Code Playgroud)


Tee*_*etz 6

不要直接将阴影设置为按钮,而是尝试将阴影设置为叠加层,如下所示:

    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)
        )

    }
Run Code Online (Sandbox Code Playgroud)

如果有帮助请告诉我!

  • 这样做的问题在于,它不仅在按钮的底部绘制阴影,还在顶部绘制阴影。 (2认同)