在 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對我有用。