【SwiftUI】Viewを11個以上並べる方法

SwiftUIにはVStackやHStackなどのコンテナでViewを10個までしか並べられない制限があります。
11個以上のViewを並べる方法を紹介します。

スポンサーリンク

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】11.2.1
【Swift】5.1
【iOS】13.2.2
【macOS】Catalina バージョン 10.15.2

SwiftUIの制限

次のコードはText Viewを11個縦に並べるだけのものですが、SwiftUIでは一見意味不明のコンパイルエラー(Argument passed to call that takes no arguments)になります。

VStackのイニシャライザを見ると次のように規定されています。

3つめの引数contentが実際に並べるViewを指定する部分ですが、この引数にSwiftUIのカスタム属性である@ViewBuilderが付いているのがポイントです。

実はこの@ViewBuilder属性に、指定できるViewの数が10個までの制限があります。

@ViewBuilderはVStack、HStack、Formなどのコンテナの他、Button、Pickerなどの多くの標準部品にも使われており、その全てにこの制限が適用されます。

この制限を回避する方法を次節以降で紹介します。

GroupでViewをグループ化する

GroupでいくつかのViewを1つのViewにまとめる事で、コンテナに渡すViewの数を減らす事ができます。
Groupは入れ子にする事も可能なので、実質的に数の制限は無くなります。

次の例は、最後の3行を1つにまとめている為、VStackに渡されるViewの数は9個となり、制限内に収まっています。

【図1:GroupでViewをグループ化する】

ForEachを使った方法

ForEachは繰り返し処理の中で、Viewを追加する仕組みです。
次のように使い、先の例と同様の結果を得られます。

ForEachの詳しい使い方は次の記事を参照して下さい。

【SwiftUI】ForEachの使い方(1/2)
ForEachは繰り返し処理の中で、Viewを生成する仕組みです。名前の配列をループしてそれぞれをTextView化する、あるいはメニュー項目に追加するなどの動きを実現します。加えて、ForEachを使うとViewを手動で追加した場合に...