こんな表示。
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
)
VStack {
Text("こちらへ")
Text("▶")
}
.padding()
.background(.yellow)
.compositingGroup() // *
.shadow(color: .black, radius: 2, x: 5, y: 5)
compositingGroup() の代わりに、
.clipShape(.rect)
や
.clipped()
でも、内側 Text() への .shadow() の影響を
切り離すことができるようです。
しかし、
なんで .shadow() だけなんやろな。
他は、この方法で影響を切り離すことはできない模様。
そもそもは、文字がなぜかぼやけてる? てのがきっかけでした。