【SwiftUI】ネスト(階層化)した List を表示する

SwiftUI で階層構造を持った List を表示するサンプルです。

【SwiftUI】ネスト(階層化)した List を表示する

DataModel

先ずはデータ型を定義します。

struct DataModel: Identifiable {
    let id = UUID()
    let name: String
    var subItems: [DataModel]?
}

DataModel はサブデータとして subItems という名称の DataModel の配列を保持しています。

ViewModel

今回は DataModel を保持する ViewModel を定義しました。データの初期化を行っています。

View で保持しても良いので ViewModel は必須ではありません。

class ViewModel: ObservableObject {
    
    @Published var dataModel = [DataModel]()
    
    init() {
        var subItems = [DataModel]()
        
        for i in 0..<5 {
            subItems.append(DataModel(name: "SubItem \(i)"))
        }
        
        dataModel = [
            DataModel(name: "Item 1", subItems: subItems),
            DataModel(name: "Item 2", subItems: subItems),
            DataModel(name: "Item 3", subItems: subItems),
            DataModel(name: "Item 4", subItems: subItems),
            DataModel(name: "Item 5", subItems: subItems),
            DataModel(name: "Item 6", subItems: subItems),
            DataModel(name: "Item 7", subItems: subItems),
        ]
    }
}

ContentView

ポイントとなる List の表示方法です。

List の第2引数の children: に DataModel で定義した subItems を id として渡します。

渡すときは \.subItem というように「\(バックスラッシュ).(ドット)」を頭に付けます。

struct ContentView: View {
    
    @ObservedObject var viewModel: ViewModel
    
    var body: some View {
        List(viewModel.dataModel, children: \.subItems) { item in
            Text(item.name)
        }
    }
}

このようにするだけで、冒頭の動画のように開閉可能なネストしたテーブルを表示することが出来ます。UIKit に比べるととてもシンプルに実装できるようになった印象です。

以上

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です