Shape vs ShapeStyle at SwiftUI

どちらもTextの背景を設定する際に用いるのだが前者は図形、後者は図形の塗りを指定する。次のコードではTextの背景が同じ3つのButtonを表示している。背景は灰色青で塗った角丸四角を3通りのコードで表現している。

shpeVsShapeStyle

      VStack {
        Button { } label: {
          Text("Hello")
            .font(.system(size: 80, weight: .bold))
            .frame(width: 240, height: 100)
            .background(in: RoundedRectangle(cornerRadius: 14, style: .continuous))
            .backgroundStyle(.teal.gradient) // (1)
        }
        .buttonStyle(.plain)
  
        Button { } label: {
          Text("Hello")
          .font(.system(size: 80, weight: .bold))
          .frame(width: 240, height: 100)
          .background(RoundedRectangle(cornerRadius: 14, style: .continuous)
          .fill(Color.teal.gradient)) // (2)
        }
        .buttonStyle(.plain)
  
        Button { } label: {
          Text("Hello")
            .font(.system(size: 80, weight: .bold))
            .frame(width: 240, height: 100)
            .background(.teal.gradient, in: RoundedRectangle(cornerRadius: 14)) // (3)
        }
        .buttonStyle(.plain)
      }
      .padding()

backgroundメソッドの引数で角丸四角をしていし、backgroundStyleメソッドで角丸四角の塗りを指定
backgroundメソッドの引数で角丸四角をしていし、fillメソッドで角丸四角の塗りを指定している
backgroundメソッドの引数で角丸四角と塗りを同時に指定している

Note: 引数無しでbackgroundメソッドを呼び出すとignoresSafeAreaEdges: .allの意味となる。つまり、コンテンツの周りのEdge全てがコンテンツと同じbackgroundとなる(iPhone等の場合)

SwiftUIでカスタムカラーを作成するのをやめる - YouTube

SwiftUIの.background(〜)系まとめ

Categories