![見出し画像](https://assets.st-note.com/production/uploads/images/103650650/rectangle_large_type_2_a892326de2b3990e9f8067929b523675.png?width=1200)
Photo by
marikooota
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
概要
通常、子ビューを生成するクロージャー パラメーターのパラメーター属性として使用し、それらのクロージャーが複数の子ビューを提供できるようにします。
こうすれば、条件文があるものに対してもすっきりとコンポーネント化することができるようになれるので使ってみましょう!( ◠‿◠ )