【SwiftUI】四角の角を丸くする方法あれこれ

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

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

いきなり書いてみると、

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


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

見た目が同じでも、

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

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



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

どう書いていますか。

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