swiftui

【SwiftUI】Listを使ってTableViewのような画面の実装とNavigationViewを使った画面遷移の方法

最小構成からNavigationViewを使った画面遷移まで含めて解説しています。Delegateを気にする必要は無くなったのでかなりシンプルに実装できます。

基本構成

まず最初にListにおける基本構成を説明します。従来のUIKitでの実装と比較して簡単になりました。

import SwiftUI

struct ListView: View {
    var body: some View {
        List {
          Text("アイウエオ")
          Text("書きくけこ")
          Text("さしすせろ")
        }
    }
}
Sectionで分ける

各Sectionのfooter,headerに対して任意のViewを渡すこともできます。

struct ListView: View {    
    var body: some View {
      	List {
            Section {
                Text("アイウエオ")
                Text("書きくけこ")
                Text("さしすせろ")
            }
            
            Section(header: Color.red) {
                Text("あああああああ")
            }
            
            Section(header: Text("セクション3のヘッダー"),footer: Text("セクション3のフッター")) {
                Text("セクション3の中身")
                Text("セクション3の中身")
                Text("セクション3の中身")
            }
        }
    }
}

basic2

基本としてはこんなところです。かなり簡単になりました。

データに基づいたListの作成

続いてアプリ開発で良くある実装の流れとして、あるデータ配列に基づいてListを作成する方法を説明します。LayGirdと並んでよく使うことになると思います。こちらも従来と比較して圧倒的に少ないコード量で実装できるようになりました。

サンプルデータ
struct Data {
  let id: Int
  let title: String
}
    private var dataArray: [Data]  = [
        Data(id: 0, title: "1番目"),
        Data(id: 1, title: "2番目"),
        Data(id: 2, title: "3番目")    
    ]

RowViewを作る

挿入cellのようなものです。

Listを作る

値渡し

RowにdataArrayの各要素を渡します。

struct Data: Identifiable {
  let id: Int
  let title: String
}

画面遷移

タップすると別の画面に飛ぶと言う挙動はListにNavigationViewを組み合わせることで実装ができます。

読んでいただきありがとうございます!!

記事として取り上げたトピックを体系化してまとめた内容を電子書籍として販売しています。購入していただくことで執筆の応援ができます。詳細はこちらから