はじめに
表題のエラーに関して調べた内容のメモ。
開発環境
- macOS Big Sur 11.2.3
- Xcode 12.4
- Swift 5.3.2
本題
エラーが発生するコード
以下の例では、Listに14個のアイテムを表示しようとしているが、表題のエラーが発生する。
import SwiftUI struct ContentView: View { var body: some View { List { HStack { Image("genre_image_1") .resizable() .frame(width: 50, height: 50) Text("genre_image_1") } HStack { Image("genre_image_2") .resizable() .frame(width: 50, height: 50) Text("genre_image_2") } HStack { Image("genre_image_3") .resizable() .frame(width: 50, height: 50) Text("genre_image_3") } HStack { Image("genre_image_4") .resizable() .frame(width: 50, height: 50) Text("genre_image_4") } HStack { Image("genre_image_5") .resizable() .frame(width: 50, height: 50) Text("genre_image_5") } HStack { Image("genre_image_6") .resizable() .frame(width: 50, height: 50) Text("genre_image_6") } HStack { Image("genre_image_7") .resizable() .frame(width: 50, height: 50) Text("genre_image_7") } HStack { Image("genre_image_8") .resizable() .frame(width: 50, height: 50) Text("genre_image_8") } HStack { Image("genre_image_9") .resizable() .frame(width: 50, height: 50) Text("genre_image_9") } HStack { Image("genre_image_10") .resizable() .frame(width: 50, height: 50) Text("genre_image_10") } HStack { Image("genre_image_11") .resizable() .frame(width: 50, height: 50) Text("genre_image_11") } HStack { Image("genre_image_12") .resizable() .frame(width: 50, height: 50) Text("genre_image_12") } HStack { Image("genre_image_13") .resizable() .frame(width: 50, height: 50) Text("genre_image_13") } HStack { Image("genre_image_14") .resizable() .frame(width: 50, height: 50) Text("genre_image_14") } } } }
なぜエラーが発生する?
以下のページで、ViewBuilderでは、10個の引数しか取得できないと記載がある。そもそもViewBuilderって?
※参考:
SwiftUi strange behaviour (bugs?) | Apple Developer Forums
Appleのドキュメントを確認すると、ViewBuilderは複数の子ビューを提供できるようにするものらしい。また、Topics > Building Blocksでは、Viewを返すメソッドが記載されているが、引数が10個までのメソッドしかない。このあたりが関係ありそう。
※参考:
https://developer.apple.com/documentation/swiftui/viewbuilder
参考ページから推測すると、ListやVStack、HStack、ScrollViewではViewBuilderの仕組みが使用されており、ViewBuilderの仕様上、10個の静的な子ビューまでしか提供できないため、エラーが発生したと考えられる。
エラーの解消方法
Groupを使う。
※参考:
https://developer.apple.com/documentation/swiftui/group
エラー解消後のコード
import SwiftUI struct ContentView: View { var body: some View { List { Group { HStack { Image("genre_image_1") .resizable() .frame(width: 50, height: 50) Text("genre_image_1") } HStack { Image("genre_image_2") .resizable() .frame(width: 50, height: 50) Text("genre_image_2") } HStack { Image("genre_image_3") .resizable() .frame(width: 50, height: 50) Text("genre_image_3") } HStack { Image("genre_image_4") .resizable() .frame(width: 50, height: 50) Text("genre_image_4") } HStack { Image("genre_image_5") .resizable() .frame(width: 50, height: 50) Text("genre_image_5") } HStack { Image("genre_image_6") .resizable() .frame(width: 50, height: 50) Text("genre_image_6") } HStack { Image("genre_image_7") .resizable() .frame(width: 50, height: 50) Text("genre_image_7") } HStack { Image("genre_image_8") .resizable() .frame(width: 50, height: 50) Text("genre_image_8") } HStack { Image("genre_image_9") .resizable() .frame(width: 50, height: 50) Text("genre_image_9") } HStack { Image("genre_image_10") .resizable() .frame(width: 50, height: 50) Text("genre_image_10") } } HStack { Image("genre_image_11") .resizable() .frame(width: 50, height: 50) Text("genre_image_11") } HStack { Image("genre_image_12") .resizable() .frame(width: 50, height: 50) Text("genre_image_12") } HStack { Image("genre_image_13") .resizable() .frame(width: 50, height: 50) Text("genre_image_13") } HStack { Image("genre_image_14") .resizable() .frame(width: 50, height: 50) Text("genre_image_14") } } } }
おわりに
頻繁に出くわすエラーではなさそうですが、 ViewBuilderの仕様に関して知らなかったので勉強になりました。