SwiftUI(View)の便利なif Extension

SwiftUIでのViewの分岐(if)

backgroundをredにするだけでもSwiftUIだと以下ように冗長気味になってしまいます。
これを解決してくれるExtensionをFabulaItemsProvider Conditionalで見つけたので紹介していきます。

struct ContentView : View {
  let text = "Hello World!"
  @State var showBackground = false

  var body: some View {
    VStack {
      if showBackground {
        Text(text)
      } else {
        Text(text)
          .background(.red)
      }
      Toggle("Show Background", isOn: $showBackground)
    }
  }
}

少し賢いやり方

以下のように冗長さは無くせますが、必要のないopacityをいじらなければいけません。

struct ContentView : View {
  let text = "Hello World!"
  @State var showBackground = false

  var body: some View {
    VStack {
      Text(text)
        .background(.red.opacity(showBackground ? 1 : 0))
      Toggle("Show Background", isOn: $showBackground)
    }
  }
}

便利なif Extension

以下のExtensionで上のコードをきれいに書くことが可能です。

extension View {
  func `if`<T: View>(_ conditional: Bool, transform: (Self) -> T) -> some View {
    Group {
      if conditional {
        transform(self)
      } else { self }
    }
  }
}

struct ContentView : View {
  let text = "Hello World!"
  @State var showBackground = false

  var body: some View {
    VStack {
      Text(text)
        .if(showBackground) {
          $0.background(.red)
        }
      Toggle("Show Background", isOn: $showBackground)
    }
  }
}