SwiftUI中For循环生成的按钮点击传值异常问题求助

你的问题核心出在两个点：

1. 多个fullScreenCover共享同一状态：循环内每个按钮都绑定了同一个showingCountryPage状态，SwiftUI无法正确关联点击动作与对应的全屏视图，导致显示的国家和选中的不匹配。
2. ForEach的ID识别问题：使用id: \.self但如果Country结构体未正确实现Equatable协议，会导致视图更新时的识别混乱，加重状态不同步的问题。

步骤1：优化Country结构体 #

让Country遵循Identifiable协议，避免手动处理ID和Equatable的问题：

struct Country: Identifiable {
    let id = UUID() // 自动生成唯一标识
    var name: String
    var code: String
    var continent: String
}

步骤2：移除循环内的fullScreenCover，改用全局单一覆盖层 #

推荐两种实现方式：

方式一：使用isPresented绑定（兼容旧版SwiftUI）

@State private var showingCountryPage = false 
@State var countrySelected: Country? // 改为可选类型，初始为nil
@State var countries = [
    Country(name: "France", code: "FR", continent: "Europe"), 
    Country(name: "United States", code: "US", continent: "North America"),
    Country(name: "Costa Rica", code: "CR", continent: "North America")
].shuffled()

// 视图部分
HStack(spacing: 12){
    Text(" ")
    ForEach(countries){ country in
        Button(action: {
            countrySelected = country
            showingCountryPage = true
        }){
            ZStack(alignment: .center){
                ZStack{
                    Image(country.code.lowercased() + "1")
                        .resizable()
                        .scaledToFill()
                        .frame(width: 200, height: 150)
                        .clipped()
                    Color.white
                        .opacity(0)
                        .frame(width: 200, height: 150)
                        .background(
                            LinearGradient(gradient: Gradient(colors: [.clear, .black, .clear]), startPoint: .top, endPoint: .bottom).opacity(0.4))
                }
                Text(country.name)
                    .font(.custom("Poppins-SemiBold", fixedSize: 18))
                    .foregroundColor(.white)
                    .padding()
                    .multilineTextAlignment(.center)
                    .shadow(color: .black.opacity(0.25), radius: 1, x: 0, y: 0)
            }.frame(width: 200, height: 150).cornerRadius(10).padding(.vertical)
        }
    }
}
.padding(.top, 5)
// 将fullScreenCover移到循环外部，全局仅保留一个
.fullScreenCover(isPresented: $showingCountryPage) {
    NavigationView{
        if let selected = countrySelected {
            ViewCountryHome(country: selected)
        }
    }
}

方式二：使用item绑定（更简洁，推荐）

直接绑定可选的Country实例，无需额外的布尔状态：

@State var countrySelected: Country? // 直接通过该变量控制全屏视图的显示
@State var countries = [
    Country(name: "France", code: "FR", continent: "Europe"), 
    Country(name: "United States", code: "US", continent: "North America"),
    Country(name: "Costa Rica", code: "CR", continent: "North America")
].shuffled()

// 视图部分
HStack(spacing: 12){
    Text(" ")
    ForEach(countries){ country in
        Button(action: {
            countrySelected = country // 赋值后自动触发全屏视图
        }){
            ZStack(alignment: .center){
                ZStack{
                    Image(country.code.lowercased() + "1")
                        .resizable()
                        .scaledToFill()
                        .frame(width: 200, height: 150)
                        .clipped()
                    Color.white
                        .opacity(0)
                        .frame(width: 200, height: 150)
                        .background(
                            LinearGradient(gradient: Gradient(colors: [.clear, .black, .clear]), startPoint: .top, endPoint: .bottom).opacity(0.4))
                }
                Text(country.name)
                    .font(.custom("Poppins-SemiBold", fixedSize: 18))
                    .foregroundColor(.white)
                    .padding()
                    .multilineTextAlignment(.center)
                    .shadow(color: .black.opacity(0.25), radius: 1, x: 0, y: 0)
            }.frame(width: 200, height: 150).cornerRadius(10).padding(.vertical)
        }
    }
}
.padding(.top, 5)
// 通过item绑定自动处理显示/隐藏逻辑
.fullScreenCover(item: $countrySelected) { selectedCountry in
    NavigationView{
        ViewCountryHome(country: selectedCountry)
    }
}

内容的提问来源于stack exchange，提问作者Ethan Brimhall