ForEachでViewをループ処理で作成する
Published by @SoNiceInfo at 6/24/2020
SwiftUIではForEachを利用することでループ処理で複数の同じViewを作成することができます。
ここでは、レンジ、配列、構造体の配列を使ってForEachを説明します。ForEachの基本がわかったらInstagramのホーム画面を作るやモックデータを利用するでより実践的なコードを見てみましょう。
レンジ
1から10の数字を順番に表示します。id: \.selfとすることでSwiftUIが勝手にユニークな要素と判断してくれます。要素を追加・削除するときなどに助かります。numのように引数を渡してあげることでクロージャ内でその引数を利用することができます。
//
// ContentView.swift
//
import SwiftUI
struct ContentView: View {
var body: some View {
VStack(alignment: .leading) {
ForEach((1...10), id: \.self) { num in
Text("\(num)")
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
配列
Colorの配列をForEachでループ処理させてwindowの左上のボタンを作ります。
//
// ContentView.swift
//
import SwiftUI
struct ContentView: View {
let colors: [Color] = [.red, .yellow, .green]
var body: some View {
HStack {
ForEach(colors, id: \.self) { color in
Text("●")
.font(.largeTitle)
.foregroundColor(color)
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
構造体の配列
構造体(CatModel)の配列を作ってForEachで処理します。id: \.idとすることでSwiftUIがidを基に要素をユニークに判断してくれます。
//
// ContentView.swift
//
import SwiftUI
struct CatModel {
let id = UUID()
let name: String
}
struct ContentView: View {
let cats: [CatModel] = [CatModel(name: "Mike"), CatModel(name: "Tama"), CatModel(name: "Kuro")]
var body: some View {
VStack {
ForEach(cats, id: \.id) { cat in
Text(cat.name)
.font(.largeTitle)
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}また、構造体にIdentifiableプロトコルを付与することでForEachでid: \.idを指定することなくidで要素をユニークに判断してくれます。
以下のコードは同じ実行結果になります。
//
// ContentView.swift
//
import SwiftUI
struct CatModel : Identifiable {
let id = UUID()
let name: String
}
struct ContentView: View {
let cats: [CatModel] = [CatModel(name: "Mike"), CatModel(name: "Tama"), CatModel(name: "Kuro")]
var body: some View {
VStack {
ForEach(cats) { cat in
Text(cat.name)
.font(.largeTitle)
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
