見出し画像

SwiftUI @ViewBuilderとは?

こんにちは!りーさんです。
今回は@ViewBuilderについてメモっていきます!

import SwiftUI

struct ContentView: View {
    @State var contents: [String] = []
    
    var body: some View {
        emptyOrMeaningfulView
    }
    
    
    var emptyOrMeaningfulView: some View {
        Text("条件文なし")  <- テキストのView一つを返す場合は問題なし!
    }
}

上記のように1つのViewを返すだけなら問題ないです。
しかし、2つ以上のViewを返すときにはGroupにまとめたりしないと
エラーが起きてしまいます。

import SwiftUI

struct ContentView: View {
    @State var contents: [String] = []
    
    var body: some View {
        emptyOrMeaningfulView
    }

    var emptyOrMeaningfulView: some View {     <- これではエラー
        if contents.isEmpty {
            Text(“コンテンツなし”)
        } else {
            Text(“コンテンツあり”)
        }
    }

    var emptyOrMeaningfulView: some View {     <- これではOK
        Group {
            if contents.isEmpty {
                Text(“コンテンツなし”)
            } else {
                Text(“コンテンツあり”)
            }
        }
    }
}

このGroupではもっといい使い方あるのであまりよくありません。
なのでこんなときには@ViewBuilderを使います。

import SwiftUI

struct ContentView: View {
    @State var contents: [String] = []
    
    var body: some View {
        emptyOrMeaningfulView
    }
    
    @ViewBuilder  <- 式の上に@ViewBuilderを置くだけでエラーは解消される(複数のViewを置けるようになる)
    var emptyOrMeaningfulView: some View {
        if contents.isEmpty {
            Text("コンテンツがなし")
        } else {
            Text("コンテンツがあり")
        }
    }
}

Appleドキュメント @ViewBuilder

概要
通常、子ビューを生成するクロージャー パラメーターのパラメーター属性として使用し、それらのクロージャーが複数の子ビューを提供できるようにします。

こうすれば、条件文があるものに対してもすっきりとコンポーネント化することができるようになれるので使ってみましょう!( ◠‿◠ )

いいなと思ったら応援しよう!