SwiftUI - 列出嵌套数组中的元素
Posted
技术标签:
【中文标题】SwiftUI - 列出嵌套数组中的元素【英文标题】：SwiftUI - List elements within nested array 【发布时间】：2019-11-04 15:18:12 【问题描述】：我正在尝试在列表视图中显示***数组中的元素。数据模型的构造方式是，它是一个事件数组，然后在该数组中，有一个与各个事件相关联的场地数组。
在主视图中，我知道如何通过索引显示单个事件标题，但我不确定如何使用 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)”将显示数组中的第一项，但我想在顶部数组中显示所有 passportTitles 和 passportDates 并将信息传递给使用 NavigationLink 的详细信息视图。
【问题讨论】：
【参考方案1】：根据您的描述，您需要一个两级数据模型和视图层次结构：
-
事件列表（由
Passport 结构表示）
每个活动的场地列表（由 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)
【讨论】：
以上是关于SwiftUI - 列出嵌套数组中的元素的主要内容，如果未能解决你的问题，请参考以下文章
Swift Firestore 删除嵌套在文档中的数组中的元素时出现问题