【SwiftUI】shadow() が内側まで効いて困る - compositingGroup()

こんな表示。


VStack {
  Text("こちらへ")
  Text("▶")
}
.padding()
.background(.yellow)

看板ぽく影を付けます。

.shadow() ですね !

簡単ですね ! 


VStack {
  Text("こちらへ")
  Text("▶")
}
.padding()
.background(.yellow)
.shadow(color: .black, radius: 2, x: 5, y: 5) // *

...

なんでや !?

VStack だけ効けばいいのに、

内側の文字まで効いてますが。

 

👩🏼‍💻 対応方法

.shadow() の前で、

.compositingGroup()

が良さげです。

Wraps this view in a compositing group.

👉 compositingGroup() | Apple Developer Documentation hatena-bookmark


VStack {
  Text("こちらへ")
  Text("▶")
}
.padding()
.background(.yellow)
.compositingGroup() // *
.shadow(color: .black, radius: 2, x: 5, y: 5)

compositingGroup() の代わりに、

.clipShape(.rect)

や

.clipped()

でも、内側 Text() への .shadow() の影響を

切り離すことができるようです。

しかし、

なんで .shadow() だけなんやろな。

他は、この方法で影響を切り離すことはできない模様。



そもそもは、文字がなぜかぼやけてる? てのがきっかけでした。


関連ワード:  iOS・iPhone・mac・macOS・Swift・SwiftUI・今さら聞けない・初心者・開発