从SwiftUI中的单个JSON文件创建一系列主要详细信息列表

Question

我正在尝试通过理解如何使正在构建的应用程序中的数据流畅地工作来进行工作。我只想要一个基本的主详细信息视图，该视图以所有顶级对象（用户）的列表开头，点击其中一个即可查看与该顶级（userX->城市）相关的所有第二级对象，然后点击其中之一可让您查看所有第三级对象（userX-> cityX->城镇）。

这是我的JSON文件：

[
    {
        "id": 1001,
        "first_name": "Jimmy",
        "last_name": "Simms",
        "cities": [{
                "name": "New York City",
                "towns": [{
                        "name": "Brooklyn"
                    },
                    {
                        "name": "Manhatten"
                    }
                ]
            },
            {
                "name": "Tokyo",
                "towns": [{
                        "name": "Churo"
                    },
                    {
                        "name": "Riponggi"
                    }
                ]
            }
        ]
    }
...
]

我有一个模型，认为可以很好地解决此问题：

import SwiftUI

struct UserModel: Codable, Identifiable {
    let id: Int
    let firstName: String
    let lastName: String
    let cities: [CityModel]

    enum CodingKeys: String, CodingKey {
        case id
        case firstName = "first_name"
        case lastName = "last_name"
        case cities
    }
}

struct CityModel: Codable {
    let name: String
    let towns: [TownModel]
}

struct TownModel: Codable {
    let name: String
}

但是，我正在努力做的是将所有这些构建到一系列相互连接的列表视图中。我有一个顶层UserList.swift，至少显示了一个用户列表。

import SwiftUI

struct UserList: View {
    var body: some View {
        NavigationView {
            List(userData) { user in
                NavigationLink(destination: UserRow(user: user)) {
                    UserRow(user: user)
                }

            }
            .navigationBarTitle(Text("Users"))
        }
    }
}

struct UserList_Previews: PreviewProvider {
    static var previews: some View {
        UserList()
    }
}

这是辅助视图，UserRow：

import SwiftUI

struct UserRow: View {
    var user: UserModel
    var body: some View {
        HStack {

            VStack(alignment: .leading) {
                Text(user.firstName)
                    .font(.headline)

                Text(user.lastName)
                    .font(.body)
                    .foregroundColor(Color.gray)

            }
            Spacer()
        }
    }
}

struct UserRow_Previews: PreviewProvider {
    static var previews: some View {
        UserRow(user: userData[0])
    }
}

UserList.swift预览：

我不知道如何编写CityList / CityRow和TownList / TownRow，以便我可以从主屏幕上向下钻取并获得与我所点击的对象相关的列表。

Answer 1

首先，您必须像创建用户一样创建CityListView和CityRow：

struct CityListView: View {
    var user: UserModel
    var body: some View {

            // don't forget to make CityModel Identifiable 
            List(user.cities) { city in
                CityRowView(city: city)
            }
            .navigationBarTitle(Text("Cities"))
        }
    }
}

struct CityRowView: View {
    var city: CityModel
    var body: some View {
        HStack {
            Text(city. name)
                .font(.headline)
            Spacer()
        }
    }
}

之后，您需要在NavigationLink中更改目标位置（不是UserRow，而是新的CityListView）

...
//NavigationLink(destination: UserRow(user: user)) {
NavigationLink(destination: CityListView(user: user)) {
    UserRow(user: user)
}
...

另一种方法是将变量“ cities”声明为CityModel的数组，并从用户那里接收它：

struct CityListView: View {
    var cities: [UserModel]
    // list for array of cities
}

// in UserList
NavigationLink(destination: CityListView(cities: user.cities)) {
    UserRow(user: user)
}

P.S。苹果为SwiftUI中的导航制作了出色的教程：https://developer.apple.com/tutorials/swiftui/building-lists-and-navigation