在 ForEach 中使用 NavigationLink 时出现问题

Question

我正在构建一个显示比赛计划的应用程序。 包含至少一个匹配项的每一天都会创建一个包含日期和匹配项的组。 这些匹配项嵌入在 NavigationLink 中以访问详细视图。 这里是布局示例

当我单击一天中包含多个匹配项的匹配项时，会出现此问题。 单击匹配项后，控制台中会显示一条消息“SwiftUI 在推送导航链接时遇到问题。请提交错误。” 它向我显示了目标视图。 但是当我 go 回到根视图时，我无法点击任何匹配项。

如果我在一天中点击了一场比赛，只有一场比赛，我可以点击其他比赛。

这是我的代码：

规划匹配视图：

ZStack() {
    HStack() {
        Image(systemName: "testtube.2")
        Spacer()
        Image(systemName: "testtube.2")
        Text("Match \(id)")
            .foregroundColor(.white)
        Image(systemName: "testtube.2")
        Spacer()
    }
    .padding(.init(top: 0, leading: 15, bottom: 0, trailing: 15))
}
.frame(height: 50)
.background(matchBackgroundColor)

规划日视图：

VStack(alignment: .center, spacing: 0) {
    HStack {
        Text(jour.date)
            .bold()
            .foregroundColor(.white)
            .frame(height: 50)
        .background(.clear)
        Spacer()
    }
    .padding(.leading, 12)
    Divider()
        .frame(height: 1)
        .overlay(lineColor)
    ForEach(jour.matches, id: \.self) { match in
        ZStack {
            NavigationLink(destination: MatchDetailView(matchId: match.id)) {
                PlanningMatchView(id: match.id, hour: match.hour, game: match.game, team1: match.team1, team2: match.team2)
            }
            .padding(.init(top: 0, leading: 0, bottom: 0, trailing: 15))
        }
        Divider()
            .frame(width: 300, height: 0.5)
            .overlay(lineColor)
    }
}
.background(matchBackgroundColor)
.cornerRadius(7)
.listRowBackground(Color.clear)
.listRowSeparator(.hidden)
.padding(.init(top: 0, leading: 0, bottom: 8, trailing: 0))

HomeView：现在我正在从 Match 数组中获取匹配项

NavigationView {
    ZStack {
        Color("backgroundColor").edgesIgnoringSafeArea(.all)
        List {
            PlanningDayView(jour: Jour(date: "Mercredi 23 juillet", matches: [Matches[1]]))
            PlanningDayView(jour: Jour(date: "Dimanche 27 juillet", matches: [Matches[2], Matches[3]]))
            PlanningDayView(jour: Jour(date: "Mercredi 30 juillet", matches: [Matches[4]]))
            PlanningDayView(jour: Jour(date: "Mardi 02 août ", matches: [Matches[5], Matches[6]]))
            PlanningDayView(jour: Jour(date: "Mardi 09 août", matches: [Matches[7]]))
            PlanningDayView(jour: Jour(date: "Jeudi 11 août", matches: [Matches[1], Matches[2]]))
        }
        .listStyle(PlainListStyle())
        .navigationTitle("Planning")
        .foregroundColor(.white)
    }
}

内容视图：

var body: some View {
    TabView {
        HomeView()
            .tabItem {
                Image("planning.unselected")
                    .renderingMode(.template)
                Text("Planning")
            }
        RankView()
            .tabItem {
                Image("classement")
                    .renderingMode(.template)
                Text("Classement")
            }
    }
}

我希望我的所有解释都很清楚。

Answer 1

List的工作原理并非如此。 List分为Sections和Rows ，但您将行视为部分并使用自定义行和分隔符制作PlanningDayView 。

因此，每个PlanningDayView都是单行，但NavigationLink总是占用整行，因此不可能有多个。

你有两个选择：

1. Go List方式，只需删除您当前拥有的许多自定义处理
2. 保持自定义处理，但是你不应该使用List而是使用ScrollView

我认为这将是您尝试做的最小List方式。 我将PlanningDayView重组为Section 。 然后每个NavigationLink是一个单独的行，因此可以按预期工作。

struct PlanningDayView: View {
    let jour: Jour
        
    var body: some View {
        Section {
            Text(jour.date)
                .bold()
                .foregroundColor(.white)
            
            ForEach(jour.matches, id: \.self) { match in
                NavigationLink {
                    MatchDetailView(matchId: match.id)
                } label: {
                    PlanningMatchView(id: match.id,
                                      hour: match.hour,
                                      game: match.game,
                                      team1: match.team1,
                                      team2: match.team2)
                }
            }
        }
        .listRowBackground(matchBackgroundColor)
        .listRowSeparatorTint(lineColor)
    }
}

而不是HomeView上的.listStyle(PlainListStyle())您需要将其更改为.listStyle(.insetGrouped)以重新获得您当前拥有的圆角样式

Answer 2

用ScrollView替换HomeView中的List对我有用。