#iOS | #Android ファショ通

こんな表示。

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() だけなんやろな。

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

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

「あれこれ」などと整理できてる感じでタイトル付けてしましましたが。

どう書くべきなんですかね。

いきなり書いてみると、

こんなかんじに私は書きました。

// 1. clipShape()

Text("🐶 Dog")
  .padding()
  .background(.yellow)
  .clipShape(.rect(cornerRadius: 24)) // *
  .padding()
  .background(.white)
  .clipShape(.rect(cornerRadius: 24)) // *

内側と外側の角の違いが気持ちが悪いので

書き換えます。

// 2. containerShape + background()

Text("🐶 Dog")
  .padding()
  .background(.yellow)
  .padding()
  .containerShape(.rect(cornerRadius: 24)) // *
  .background { // *
    RoundedRectangle(cornerRadius: 24)
      .fill(.background)
  }

少しはよくなったか。

あれ、もしかしたら

もっと短くなるか。

// 3. containerShape()

Text("🐶 Dog")
  .padding()
  .background(.yellow)
  .padding()
  .background(.white)
  .containerShape(.rect(cornerRadius: 24)) // *

ん、もしかしたら、

外側のみの記述で入れ子内側にも

角丸を影響できる?

// 4. containerShape() + newsted views

VStack {
  Text("🐱 Cat")
    .padding()
    .background(.orange)
    .padding()
    .background(.white)
  Text("🐭 Mouse")
    .padding()
    .background(.cyan)
    .padding()
    .background(.white)
}
.padding()
.background(.green)
.containerShape(.rect(cornerRadius: 40))

見た目が同じでも、

いろいろ書き方あるようなのですが、

逆に混乱してしまいます。

どう書くべきなんでしょうか。

どう書いていますか。

他にもいろいろありそうです。