Swift UI のチュートリアルをする - Part 4: Building Lists and Navigation をやる

今回はこのリストを作るチュートリアルをやります

https://developer.apple.com/tutorials/swiftui/building-lists-and-navigation

進め方

チュートリアルとはちょっと違う進め方をします。

Create the Row View

まずはリスト一つのデータを作成する

今回表示するもの

リストに表示するものを struct で定義する。

struct Audio {
    let id: String
    let title: String
}

AudioRow を定義

リストの中の一つであるAudioRowを定義する。

struct AudioRow: View {
    let audio: Audio
    
    var body: some View {
        HStack {
            Text(audio.title)
            Spacer()
            Text(audio.id)
        }
    }
}

これの見た目はこうなる

AudioRow_Previews はCanvasに表示されるプレビューを表示させるためのクラスだったんですね。

struct AudioRow_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            AudioRow(audio: Audio(id: "nc123", title:"サンプル"))
            AudioRow(audio: Audio(id: "nc121", title:"サンプル2"))
        }.previewLayout(.fixed(width: 300, height: 70))
    }
}

AudioList を定義

AudioRow をリストで表示するための AudioList を定義する。

とりあえず let audios にサンプルデータを突っ込む。

struct AudioList: View {
    let audios = [
        Audio(id: "nc123", title:"サンプル"),
        Audio(id: "nc121", title:"サンプル2"),
    ]
    
    var body: some View {
        List(audios, id: \.id) { audio in
            AudioRow(audio: audio)
        }
    }
}

SceneDelegate を編集して AudioList を表示させる

        let audioList = AudioList()

        if let windowScene = scene as? UIWindowScene {
            let window = UIWindow(windowScene: windowScene)
            window.rootViewController = UIHostingController(rootView: audioList)
            self.window = window
            window.makeKeyAndVisible()
        }

これでビルドするとこのような見た目ができあがります。