如何在 SwiftUI 中制作内阴影

Question

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

SwiftUI 中有外阴影但没有内阴影

我想做的是使用 SwiftUI 的 Neumorphism UI

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

我想让按钮按下 UI

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

Answer 1

这就是我为创建一个像图片中的阴影一样的内部阴影所做的。 我在另一个 swiftui 文件中创建了它，并在我的主要内容视图中调用了它，但您可以随意显示它。

我在 ZStack 中创建了一个 Button 只是因为我首先用圆角矩形重新创建了它，但我认为这也会在 HStack 或 VStack 中进行，只是还没有尝试过。 为了创建内部阴影，我创建了一个叠加层并将阴影剪裁到形状上。

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

最终结果如下所示：

你可以玩弄颜色和阴影来得到你想要的东西，但希望这会有所帮助！

Answer 2

仅限 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)))
}

Answer 3

iOS 16+（测试版）

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

从文档中 - 以下示例创建一个填充了当前前景样式的圆，该样式使用内部阴影：

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

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

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