![見出し画像](https://assets.st-note.com/production/uploads/images/27978139/rectangle_large_type_2_a8e86a15eb3ddeb4f5232616292cec48.png?width=1200)
SwiftUIでいこう!-List!
Listを少し深堀します。
簡単に作ります。List {}を使って単純にText()を並べることで実行可能です。
var body: some View {
List {
Text("apple")
Text("banana")
Text("orange")
}
}
配列、
fluits = ["apple","banana","orange"]
を使って一括で表を作ります。 ForEach{}を使って
struct ContentView: View {
var fluits = ["apple","banana","orange"]
var body: some View {
List {
ForEach(0..<fluits.count){ index in
Text(self.fluits[index])
}
}
}
}
としても同じことができます。
また、Listの部分を
List((results,id: \.self){ index in
Text(index)
}
としても同じことができます。
配列で"List"を作ってきましたが、"struct"構造体で作った配列を作ってみましょう。
を参考にコードを書いて実行してみます。
まず構造体"struct"。
struct Result{
var id = UUID()
var score : Int
配列の変数に入れていきますに
let results = [Result(score: 8), Result(score: 5), Result(score: 10)]
struct ContentView: View {
let results = [Result(score: 8), Result(score: 5), Result(score: 10)]
var body: some View {
List{
ForEach(results,id: \.id){result in
Text("Results: \(result.score)")
}
}
}
}
ForEach(results,id: \.id){result in}
をみてみましょう。(results,id: \.id)を注目します。 \.id(structで定義したプロパティ)を指定しています。
単純な配列はどうだっかというと
List((results,id: \.self){ index in
}
となり、\.selfを指定しています。
通常の配列では\.self、構造体"struct"を使ったものでは\.idという”KeyPath型"で値を取得しています。
KeyPath型については
struct Result: Identifiable {
var id = UUID()
var score: Int
}
struct ContentView: View {
let results = [Result(score: 8), Result(score: 5), Result(score: 10)]
var body: some View {
List{
ForEach(results){result in
Text("Results: \(result.score)")
}
}
}
}
でも同じ結果となります。ポイントはstructでプロトコルIdentifiableに準拠させるとこです。
この記事が気に入ったらサポートをしてみませんか?