SwiftUIでドロップシャドー
SwiftUIでドロップシャドーをつけるにはshadow修飾子をつければ良いです。
Text("Text")
.shadow(color: Color.red, radius: 10, x: 0, y: 0)
しかし、親Viewにshadowをつけると子ビューそれぞれにドロップシャドーついてしまいます。
VStack() {
Text("Text")
.background(Color.red)
.padding()
Text("Text")
.background(Color.purple)
.padding()
}
.padding()
.background(Color.white)
.shadow(color: Color.red, radius: 10, x: 0, y: 0)
親ビューのみにドロップシャドーをつける場合は２つ方法があります。
clippedを使う
clipped()修飾子を使う方法です。
SwiftUIはデフォルトでは、フレームの端を越えて広がるコンテンツはすべて表示されるようになっています。clipped()修飾子を使用すると、フレームの端を超えるコンテンツを非表示にできます。
さきほどのコードにclipped()を追加します。
VStack() {
Text("Text")
.background(Color.red)
.padding()
Text("Text")
.background(Color.purple)
.padding()
}
.padding()
.background(Color.white)
.clipped() // clipped追加
.shadow(color: Color.red, radius: 10, x: 0, y: 0)
このように表示されます。
backgroundを使う
background修飾子で背景にシャドーを付与したViewを表示してもOKです。
background(Rectangle().fill(Color.white).shadow(radius: 8))
のようなコードになります。
全体のコードはこちらです。
VStack() {
Text("Text")
.background(Color.red)
.padding()
Text("Text")
.background(Color.purple)
.padding()
}
.padding()
.background(Color.white)
.background(Rectangle().fill(Color.white).shadow(color: Color.red, radius: 10, x: 0, y: 0))
このように表示されます。
参考
swiftui shadow applying to interior elements - Stack Overflow
宣伝
インプレスR&D社より、「1人でアプリを作る人を支えるSwiftUI開発レシピ」発売中です。
「SwiftUIでアプリを作る！」をコンセプトにSwiftUI自体の解説とそれを組み合わせた豊富なサンプルアプリでどんな風にアプリ実装すればいいかが理解できる本となっています。
iOS 14対応、Widgetの作成も一章まるまるハンズオンで解説しています。
SwiftUIを学びたい方、ぜひこちらのリンクをチェックしてください！
