LoginSignup
2

More than 1 year has passed since last update.

【SwiftUI】iOS16で追加されたTableを使ってみた

Last updated at Posted at 2022-11-28

はじめに

iOS16でTableとTableColumnという機能が追加されていました。
気になったので使ってみました。

完成形

simulator_screenshot_49C9D741-D7CB-4689-A43A-09F424546461.png

今回使用するModel

struct SoccerPlayer: Identifiable {
    let id = UUID()
    let name: String
    let age: Int
    let position: SoccerPosition
}

enum SoccerPosition: String {
    case gk = "GK"
    case df = "DF"
    case mf = "MF"
    case fw = "FW"
}

今回使用するデータ

let players: [SoccerPlayer] = [
    .init(name: "メッシ", age: 35, position: .fw),
    .init(name: "エンバペ", age: 23, position: .fw),
    .init(name: "ネイマール", age: 30, position: .fw),
    .init(name: "ハリー・ケイン", age: 29, position: .fw),
    .init(name: "レヴァンドフスキ", age: 34, position: .fw),
    .init(name: "モドリッチ", age: 37, position: .mf),
    .init(name: "ロナウド", age: 37, position: .fw),
    .init(name: "スアレス", age: 35, position: .fw),
    .init(name: "ノイアー", age: 36, position: .gk),
    .init(name: "ペドリ", age: 20, position: .mf),
    .init(name: "エリクセン", age: 30, position: .mf)
]

実装

import SwiftUI

struct ContentView: View {
    var body: some View {
        Table(players) {
            TableColumn("name") { player in
                Text(player.name)
            }
            TableColumn("age") { player in
                Text("\(player.age)")
            }
            TableColumn("position") { player in
                Text(player.position.rawValue)
            }
        }
    }
}

おわり

iPhoneではListのplainスタイルっぽい表示になります。
tableStyleというメソッドがありましたが、
まだスタイルはなかったのでこれからということになりそうです。

iPadとMacで機能するみたいです。
iPhoneでは使えなさそうかな?

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2