SwiftUI 中添加阴影shadow的使用方式和小技巧

Codeun

2 年前

添加阴影效果十分常用，SwiftUI 中直接给视图设置 shadow 即可添加阴影效果，以下是常用创建阴影的方法：

Table of Contents

创建外部投影

RoundedRectangle(cornerRadius: 8, style: .continuous)
                    .fill(.orange.shadow(.drop(color: .black, radius: 8)))
                    .padding()

创建内部阴影

RoundedRectangle(cornerRadius: 8, style: .continuous)
                    .fill(.orange.shadow(.inner(color: .black.opacity(0.75), radius: 8)))
                    .padding()

也可以直接使用 .shadow(radius: 5) 修饰符直接指定模糊的半径来添加阴影。

指定 X 和 Y 偏移量调整阴影

x 和 y 值分别为横向坐标和纵向坐标，值越大偏移越大，值可以是负数。

Text("codeun.com")
                    .foregroundColor(.orange)
                    .shadow(color: .red, radius: 8, x: 8, y: 8)

技巧提示

因为 SwiftUI 修饰 Api 是顺序执行并应用的，如果如果想要给边框也增加阴影则需要把设置边框 border 放在 shadow 上面；
很多复杂的阴影效果难以设置，可以通过多次调用 shadow 完善复杂的阴影效果；