Swift・iOS

Swiftを中心に学んだことを記録に残すブログです。技術に関係ない記事もたまに書いています。

【SwiftUI】エラー "Extra arguments at positions #11 ... in call" "Extra argument in call"の原因

 

はじめに

表題のエラーに関して調べた内容のメモ。

 

開発環境

 

本題

エラーが発生するコード

以下の例では、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の仕様に関して知らなかったので勉強になりました。

 

参考