見出し画像

[Lesson1-6]ForEachを使ってみる。

・はじめに

このシリーズは自分自身の学習記録を自分が後に振り返れるように記録していく事が目的です。よって”見やすく”と言う観点では作成されていません。しかし、私自身の成長と後の成果が、この記録に大きな意味をもたらしてくれると思いStudyLog=SLogを始めようと思い始めました。この記録が技術的な事はもちろん、他の要因でも、いつか誰かの役にたてば幸いです。また私の成長記録も暖かい目で見て頂けると嬉しいです。では早速本日の記録をスタートしていきましょう!

・ForEach

ループ内に複数のSwiftUIビューを作成するのが一般的です。たとえば、名前の配列をループしてそれぞれをテキストビューにしたり、メニュー項目の配列をループしてそれぞれをイメージとして表示したりできます。SwiftUIは、この目的のために、ForEachを使用していきます。
これは、配列と範囲をループして、必要な数のビューを作成できます。さらに良いことに、ForEach手動でビューを入力した場合に影響する"10行制限"にぶつかることはありません。ForEachループするすべてのアイテムに対して一度クロージャーを実行し、現在のループアイテムを渡します。たとえば、0から100までループした場合、0、1、2のように渡されます。
たとえば、次のコードは100行のフォームを作成します。

Form {
   ForEach(0 ..< 100) { number in
       Text("Row \(number)")
   }
}

ForEachSwiftUIのPickerビューを操作するときに特に役立ちます。ビューを使用すると、ユーザーが選択できるさまざまなオプションを表示できます。

これを実証するために、次のようなビューを定義します。

・可能な学生名の配列があります。
・@State現在選択されている学生を保存するプロパティがあります。
・プロパティPickerへの双方向バインディングを使用する。
・ForEachを使用して、考えられるすべての生徒の名前をループし、それらをテキストビューに変えます。
そのためのコードは次のとおりです。

import SwiftUI
   struct ContentView: View {
        let students = ["tanaka", "suzuki", "satou"]
        @State private var selectedStudent = 0

        var body: some View {
            VStack {
                Picker("Select your student", selection: $selectedStudent) {
                    ForEach(0 ..< students.count) {
                        Text(self.students[$0])
                    }
                }
                Text("You chose: Student # \(students[selectedStudent])")
            }
        }
    }
struct ContentView_Previews: PreviewProvider {
   static var previews: some View {
       ContentView()
   }
}

解説は以下の通りです。

・selectedStudentプロパティが値0で始まるが、変更することがあるので@Stateとします。
・Pickerは「生徒を選択してください」というラベルがあり、ユーザーが何をするかを示し、スクリーンリーダーが読み上げる内容を説明しています。
・Picker内のselectedStudentは変数に返す必要があるので$を付ける。0の選択を表示し始めますが、ユーザーがピッカーを移動するとプロパティが更新されます。
・内部でForEachは、0から(ただし除く)配列内の学生数まで数えます。
生徒ごとに1つのテキストビューを作成し、その生徒の名前を表示します。

本日は以上です。

以上ForEachを使ってみるでした。

いいねと思えたらよろしくお願いします😋