如何在 SwiftUI 中制作内阴影

Question

我想在 SwiftUI 中制作视图（文本、按钮等）的内部阴影

SwiftUI 有外阴影但没有内阴影

我想做的是使用 SwiftUI 的 Neumorphism UI

图片来自“用户界面中的新拟态”，作者：Michal Malewicz

我想要制作按钮按下的 UI

但我不知道从哪里开始制作内阴影

Answer 1

This is what I did to create an inner shadow like the one in the picture. I created it in another swiftui file and just called in in my main content view but you can display it however you'd like.

I created a Button in a ZStack only because I first recreated it with a rounded rectangle but I think this would would in a HStack or VStack as well just haven't tried them. To create the inner shadow I created an overlay and clipped the shadows to the shape.

ZStack{
        
        Button(action: {}){
            Image(systemName: "heart.fill")
                .resizable()
                .frame(width: 40, height: 40)
                .padding(25)
                .foregroundColor(Color(red: 52/255, green: 57/255, blue: 133/255))
                .overlay(
                    RoundedRectangle(cornerRadius: 15)
                        .stroke(Color(red: 236/255, green: 234/255, blue: 235/255), 
                                lineWidth: 4)
                        .shadow(color: Color(red: 192/255, green: 189/255, blue: 191/255), 
                                radius: 3, x: 5, y: 5)
                        .clipShape(
                            RoundedRectangle(cornerRadius: 15)
                        )
                        .shadow(color: Color.white, radius: 2, x: -2, y: -2)
                        .clipShape(
                            RoundedRectangle(cornerRadius: 15)
                        )
                )
                .background(Color(red: 236/255, green: 234/255, blue: 235/255))
                .cornerRadius(20)
        }

The end result looked like this:

You can play around with the colors and the shadows to get exactly what you want but hopefully this helps!

Answer 2

iOS 16+

现在有一个新的ShapeStyle名称shadow：

根据文档- 以下示例创建一个填充有当前前景样式并使用内部阴影的圆圈：

Circle().fill(.shadow(.inner(radius: 1, y: 1)))

在大多数情况下，当前样式是前景，但并非总是如此。例如，当设置背景样式的值时，该值将成为当前的隐式样式。

Circle()
    .fill(.shadow(.inner(radius: 1, y: 1)))
    .foregroundStyle(.red)

Answer 3

仅限 iOS 16+

对于按钮

您可以使用 SwiftUI 形状作为背景。

用于.fill(.shadow(.inner(radius: 1, y: 1)))内阴影。

形状.foregroundColor的 是按钮的背景颜色。

这是我使用 pawello2222 的答案的示例

对于与问题相同的圆角矩形按钮

Button(action: {}){
        Image(systemName: "heart.fill")
            .resizable()
            .frame(width: 40, height: 40)
            .padding(25)
            .foregroundColor(Color(red: 52/255, green: 57/255, blue: 133/255))
            .background(
                RoundedRectangle(cornerRadius: 20, style: .continuous)
                    .fill(
                        .shadow(.inner(color: Color(red: 197/255, green: 197/255, blue: 197/255),radius: 3, x:3, y: 3))
                        .shadow(.inner(color: .white, radius: 3, x: -3, y: -3))
                    )
                    .foregroundColor(Color(red: 236/255, green: 234/255, blue: 235/255)))
          }
}

对于圆形按钮

Button(action: {}){
            Image(systemName: "heart.fill")
                .resizable()
                .frame(width: 40, height: 40)
                .padding(25)
                .foregroundColor(Color(red: 52/255, green: 57/255, blue: 133/255))
                .background(
                    Circle()
                        .fill(
                            .shadow(.inner(color: Color(red: 197/255, green: 197/255, blue: 197/255),radius: 5, x:3, y: 3))
                            .shadow(.inner(color: .white, radius:5, x: -3, y: -3))
                        )
                        .foregroundColor(Color(red: 236/255, green: 234/255, blue: 235/255)))
}