iOS, Swift, SwiftUI

SwiftUIでドロップシャドー

SwiftUIでドロップシャドーをつけるにはshadow修飾子をつければ良いです。

Text("Text")
    .shadow(color: Color.red, radius: 10, x: 0, y: 0)

----------2020-03-01-19.02.18

しかし、親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)

----------2020-03-01-19.04.54

親ビューのみにドロップシャドーをつける場合は2つ方法があります。

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)

このように表示されます。

----------2020-03-01-19.08.37

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

このように表示されます。

----------2020-03-01-19.11.46

参考

swiftui shadow applying to interior elements - Stack Overflow

宣伝

インプレスR&D社より、「1人でアプリを作る人を支えるSwiftUI開発レシピ」発売中です。
「SwiftUIでアプリを作る!」をコンセプトにSwiftUI自体の解説とそれを組み合わせた豊富なサンプルアプリでどんな風にアプリ実装すればいいかが理解できる本となっています。
iOS 14対応、Widgetの作成も一章まるまるハンズオンで解説しています。
SwiftUIを学びたい方、ぜひこちらのリンクをチェックしてください!




https://nextpublishing.jp/book/12491.html

Author image

About Sato Takeshi

  • Tokyo, Japan