SwiftUI - 嵌套数组中的列表元素

Question

我试图在列表视图中显示来自顶层数组的元素。数据模型的构建方式是一个事件数组，然后在该数组中有与个别事件相关联的场馆数组。

在主视图中，我知道如何通过其索引显示单个事件标题，但我不确定如何使用ForEach列出所有不同的事件。

Passports.swift（数据模型）

import Foundation
import SwiftUI


struct Passport: Identifiable {
    let id : Int
    let passportPremium: Bool
    let passportActive: Bool
    let passportTitle: String
    let passportDates: String
    let venues: [Venue]
}

struct Venue: Identifiable {

    let id = UUID()
    let title : String
    let venueArea: String
    let venueItems: [venueItem]
}

struct venueItem {
    let title: String
    let productDescription: String
    let productPrice: Double
    let productType: String
    let newStatus: Bool
    let diningPlan: Bool
    let kidFriendly: Bool
    let vegetarian: Bool
    let glutenFree: Bool
    let featuredProduct: Bool
    let containsAlcohol: Bool
}


extension Passport {
    static func all() -> [Passport] {
        return [
                Passport (
                    id: 1001,
                    passportPremium: false,
                    passportActive: true,
                    passportTitle : "Event 1",
                    passportDates: "October 20 - November 3, 2019",
                    venues: [
                        Venue (
                            title: "Bavaria Holiday Kitchen",
                            venueArea: "Germany Pavilion",
                            venueItems: [
                                venueItem (
                                    title: "Potato Dumpling",
                                    productDescription: "Potato Dumpling with Mushroom Sauce",
                                    productPrice: 0.00,
                                    productType: "Food",
                                    newStatus: false,
                                    diningPlan: false,
                                    kidFriendly: true,
                                    vegetarian: false,
                                    glutenFree: false,
                                    featuredProduct: false,
                                    containsAlcohol: false
                                )
                            ] // End VenueItems
                        ) // End Venue
                    ] // End Venues
                ),

                Passport (
                               id: 1002,
                               passportPremium: false,
                               passportActive: true,
                               passportTitle : “Event 2“,
                               passportDates: "October 20 - November 3, 2019",
                               venues: [
                                   Venue (
                                       title: "Bavaria Holiday Kitchen",
                                       venueArea: "Germany Pavilion",
                                       venueItems: [
                                           venueItem (
                                               title: "Potato Dumpling",
                                               productDescription: "Potato Dumpling with Mushroom Sauce",
                                               productPrice: 0.00,
                                               productType: "Food",
                                               newStatus: false,
                                               diningPlan: false,
                                               kidFriendly: true,
                                               vegetarian: false,
                                               glutenFree: false,
                                               featuredProduct: false,
                                               containsAlcohol: false
                                           )
                                       ] // End VenueItems
                                   ) // End Venue
                               ] // End Venues
                           )// End Individual Passport

                ] // End Return

    }

}

PassportsView.swift

import SwiftUI

struct PassportsView: View {

    var model = Passports.all()

    var body: some View {
        NavigationView {
            ForEach(self.model) { item in
                NavigationLink (destination: PassportDetails(passportTitle: item.passportTitle, venues: item.venues, venueProd: []) ) {
                HStack {
                    VStack(alignment: .leading) {
                        Text(item.passport[0].passportTitle)
                            .fontWeight(.semibold)
                            .foregroundColor(Color.white)
                        Text(item.passport[0].passportDates)
                            .foregroundColor(Color.white)
                    }.frame(width: 400, height: 120)
                        .background(Color("wPurple"))
                        .cornerRadius(6)
                }
              }.padding(.horizontal) 
            }
        }
    }
}

PassportDetails.swift

struct PassportDetails: View {

var passportTitle: String
var venues: [Venue]
var venueProd: [venueItem]

var body: some View {

    List {
        ForEach(self.venues) { gc in
            Section(header: Text(gc.title)) {
                ForEach(gc.venueItems, id: \.title) { gi in
                    GeometryReader { geometry in
                        VStack(alignment: .leading) {
                            HStack {
                                Text(gi.title)
                                    .frame(width: geometry.size.width / 1.5, alignment: .leading)
                                    .fixedSize(horizontal: false, vertical: true)
                                    .padding(.top, 10)
                                Spacer()
                                Text("$\(gi.productPrice, specifier: "%.2f")")
                                    .multilineTextAlignment(.trailing)

                            }.padding(.top, 8)
                            HStack {
                                Text(gi.productDescription)
                                    .font(.footnote)
                                    .foregroundColor(Color.gray)
                                    .frame(width: geometry.size.width / 1.5, alignment: .leading)
                                .fixedSize(horizontal: false, vertical: true)
                                    .padding(.bottom, 8)
                                Spacer()
                            }.padding(.bottom, 8)
                        }
                    }.padding(.vertical)
                }
            }
        }
    }.listStyle(GroupedListStyle())
        .navigationBarTitle(Text(passportTitle), displayMode: .inline)
}
}

很明显，“Text(item.passport[0].passportTitle)”将显示数组中的第一项，但我想要显示顶部数组中所有的护照标题和护照日期，并通过NavigationLink传递信息到详细视图。

- Jason Tremain

Answer 1

根据您的描述，您需要一个两级数据模型和视图层次结构：

1. 事件列表（由Passport结构表示）
2. 每个事件的场馆列表（由Venue结构表示）

您当前的数据模型是三级的（Passports包含Passport包含Venue）。

如果我们删除多余的Passports结构，就可以简化静态的.all()函数和PassportsView结构。

extension Passport {
    static func all() -> [Passport] {
        return [
            Passport (
                id: 1001,
                passportPremium: false,
                passportActive: true,
                passportTitle : "Wine Festival",
                passportDates: "October 20 - November 3, 2020",
                venues: [
                    Venue (
                        title: "Bavaria Holiday Kitchen",
                        venueArea: "Germany Pavilion",
                        venueItems: [
                            venueItem (
                                title: "Potato Dumpling",
                                productDescription: "Potato Dumpling with Mushroom Sauce",
                                productPrice: 0.00,
                                productType: "Food",
                                newStatus: false,
                                diningPlan: false,
                                kidFriendly: true,
                                vegetarian: false,
                                glutenFree: false,
                                featuredProduct: false,
                                containsAlcohol: false
                            )
                    ])
            ])
        ]
    }
}

这是更新后的界面：

struct PassportsView: View {

    var model = Passport.all()

    var body: some View {
        NavigationView {
            ForEach(self.model) { passport in
                NavigationLink (destination: PassportDetails(passportTitle: passport.passportTitle, venues: passport.venues, venueProd: []) ) {
                HStack {
                    VStack(alignment: .leading) {
                        Text(passport.passportTitle)
                            .fontWeight(.semibold)
                            .foregroundColor(Color.white)
                        Text(passport.passportDates)
                            .foregroundColor(Color.white)
                    }.frame(width: 400, height: 120)
                        .background(Color("wPurple"))
                        .cornerRadius(6)
                }
              }.padding(.horizontal)
            }
        }
    }
}

- John M.