概要
SwiftUIではForEachを使用することでViewを繰り返し処理で生成することができます。
そんなForEachの使い方をご紹介しつつ今回は以下のようにドット絵が描けるPixel Artアプリを作ってみたいと思います。
環境
この記事は以下のバージョン環境のもと作成されたものです。
【Xcode】14.0
【iOS】16.0
【macOS】Monterey バージョン 12.5
ForEachの基本的な使いかた
VStack { ForEach(0..<10) { index in Text("Index: \(index)") } }
ForEachは繰り返しViewを生成するのでListやVStack内で使用します。
基本的な使い方は()内に繰り返したい範囲を記述し、クロージャー内でViewを書きます。
上記のサンプルではVStackで縦に配列するコンテナ内にForEachでTextを繰り返し生成している状態です。
配列やIdentifiable、cに準拠したデータを使う
ForEachの()に配列のデータを渡すこともできます。
struct SampleView: View { let fruits: [String] = ["Apple", "Orange", "Banana", "Pineapple"] var body: some View { VStack { ForEach(fruits, id: \.self) { index in Text(index) } } } }
配列のデータを範囲に渡し、第二引数でid: .selfとしてIDを渡しています。
この配列にはIDの情報がないので必ず必要となります。
またクロージャーのindexは配列で定義した型になるのでString型となるのでText内でそのまま使用することができます。
structを利用した配列を利用する場合は必ずHashableに準拠させる必要があります。
struct FruitsData: Hashable { var name: String } struct SampleView: View { let fruits: [FruitsData] = [ FruitsData(name: "りんご"), FruitsData(name: "みかん"), FruitsData(name: "バナナ"), FruitsData(name: "パイナップル") ] var body: some View { VStack { ForEach(fruits, id: \.self) { fruits in Text(fruits.name) } } } }
Identifiableに準拠したstructの型で配列のプロパティを渡すと第二引数でのIDを省略することができます。
struct FruitsData: Identifiable { var id: String { name } var name: String } struct SampleView: View { let fruits: [FruitsData] = [ FruitsData(name: "りんご"), FruitsData(name: "みかん"), FruitsData(name: "バナナ"), FruitsData(name: "パイナップル") ] var body: some View { VStack { ForEach(fruits) { fruits in Text(fruits.name) } } } }
Identifiableに準拠したstructは必ずIDが保証されたているのでForEachでIDを定義しなくてもよくなります。
またIDの省略だけでなく、サーバーからデータを取得して、取得したデータの値をList形式で表示させたりする時は非常に簡単にできます。
Pixel Artアプリを作ってみる
ForEathでVStackとHStackにRectangleを表示させることで、ほんの数行で10×10のマスを作ることができます。
またちょっとしたカーソルボタンを作成し、選択しているIndexに色を付けることで、マスを移動しているように表示させています。
全体のコードでも100行ちょっとだけで作ることができます。
以下サンプルコードのリンクを貼っておくので是非手元で試して見てください!
まとめ
- ForEachで繰り返しViewを生成することができる。
- 繰り返しの範囲には配列を渡すことができる。
- Identifiableに準拠したstructを使用するとIDを省略することができる。