SwiftUIでいこう！ - List,identifiable。

SwiftUIでリストを作ります。

MacのXcodeのPlaygroundでなく、iPadアプリがMacに移植されて最近使えるようになったPlaygrounds.appを使って試します。基本的にはXcodeのPlaygroundと同じです。

表示させるための基本的なコードです。

import SwiftUI
import MapKit
import PlaygroundSupport

struct ContentView: View {
   var body: some View {
       Text("Hello")
   }
}
let content = ContentView() 
PlaygroundPage.current.liveView = UIHostingController(rootView: content)

これで"Hello"と表示されます。以下サイトを参考に実際に確認しながら進めていきます。

Identifiable ってなんぞ？ - Qiita

普通にリストを作ってみます。

struct ContentView: View {

   let users = ["sato", "suzuki", "watanabe"]

   var body: some View {
       List(users){ user in
           Text(user)
       }
   }
}

実行してみると、

エラーです。

Initializer 'init(_:rowContent:)' requires that 'String' conform to 'Identifiable'

エラーが出る原因ですが、"Identifiable"が必要ということを教えてくれています。Identifiableの必要性については以下が参考になると思います。

SwiftUI: ListとIdentifiableについて - Qiita

一意のidを付与しなければならないのかというとSwiftUI側がそのViewで利用されているデータがどれなのかを特定しておかないと、データが更新されたときにどのViewを再構築すればいいのかわからなくなってしまうからです。今回の場合、SwiftUI側がTextビューそれぞれのデータを区別したいので予めidを割り振る必要があります。

ということで更新時のデータ整理のために必要ということみたいです。

どうやって使っていくかですけど、まず配列で使う項目をプロトコルIdentifiable準拠した構造体を作って宣言します。

struct User: Identifiable {
   var id: String
   var name: String
}

この構造体で宣言したプロパティを使って配列をstruct ContentView: View { }直下に書きます。

let users = [
       User(id: "001", name: "sato"),
       User(id: "002", name: "suzuki"),
       User(id: "003", name: "watanabe")
   ]

次に var body: some View {}でList{}を使いループで回します。

var body: some View {
   List(users){ user in
        Text(user.name)
   }
}

実行すると、リストが表示されるようになります。 Text(user.name)なので、名前が取得され表示されています。

全体です。

struct User: Identifiable {
   var id: String
   var name: String
}

struct ContentView: View {
   let users = [
       User(id: "001", name: "sato"),
       User(id: "002", name: "suzuki"),
       User(id: "003", name: "watanabe")
   ]
   var body: some View {
       List(users){ user in
           Text(user.name)
       }
   }
}

ここでMacに移植された"Playgrounds.app"の画面構成を少し紹介。iPadと同じですが