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

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

创建外部投影

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 偏移量调整阴影

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

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

技巧提示

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

  本文自 https://www.codeun.com 发布,相应代码均自主编写并严格审阅和测试,完整代码中包含丰富的学习笔记和使用方式、实用技巧。
  · 如若转载,请注明出处:https://www.codeun.com/archives/1120.html ·

(1)
上一篇 2023-06-10 上午12:19
下一篇 2023-08-21 下午3:12

发表回复

登录后才能评论