在SwiftUI中从单个JSON文件创建一系列主要详细信息列表 [英] Creating a series of master detail lists from a single JSON file in SwiftUI

问题描述

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

I'm trying to work through understanding how I can make data flow nicely through an app I'm building. I just want a basic master detail view where it starts with a list of all the top level objects(users), tapping one of them lets you see all the second level objects related to that top level (userX -> cities), and tapping one of them lets you see all the third level objects (userX -> cityX -> towns).

这是我的JSON文件:

This is my JSON file:

[
    {
        "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"
                    }
                ]
            }
        ]
    }
...
]

我有一个模型可以很好地解决此问题:

I have a model that I think will work well for this:

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，至少显示了一个用户列表.

However, what I'm struggling to do is to build this all into a series of list views that are connected to each other. I have the top level one, UserList.swift at least showing a list of the users.

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的辅助视图:

And it's assistant view, 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预览:

UserList.swift Preview:

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

What I can't figure out is how to write CityList/CityRow and TownList/TownRow such that I can drill down from the main screen and get a list related to the objected I tapped into.

推荐答案

您的CityModel和TownModel需要符合Identifiable，只需像在UserModel中一样向其添加一个id.

Your CityModel and TownModel need to conform to Identifiable, just add an id to them like you did in UserModel.

不需要编辑UserList NavigationLink:

Than you need to edit your UserList NavigationLink:

NavigationLink(destination: CityList(cities: user.cities)) {
    Text(user.firstName)
}

导航现在是这样的:UserList-> CityList-> TownList

The Navigation is now like this: UserList -> CityList -> TownList

CityList:

struct CityList: View {

    var cities: [CityModel]

    var body: some View {
        List (cities) { city in
            NavigationLink(destination: TownList(towns: city.towns)) {
                Text(city.name)
            }
        }
    }
}

镇列表:

struct TownList: View {

    var towns: [TownModel]

    var body: some View {
        List (towns) { town in
            Text(town.name)
        }
    }
}

我希望这对我的测试项目有帮助！

I hope that helps, in my test project it works!

这篇关于在SwiftUI中从单个JSON文件创建一系列主要详细信息列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！