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

Author image

About Sato Takeshi

  • Tokyo, Japan