代码之家  ›  专栏  ›  技术社区  ›  Ethan Brimhall

使用与for循环索引相关的按钮一开始顺序不对(swiftui)

  •  0
  • Ethan Brimhall  · 技术社区  · 1 年前

    我有一个for循环,它遍历一个名为“countries”的数组,该数组包含大约5-10个“Country”类型的结构。数组的每个循环都会在HStack中创建一个按钮,按钮操作会将一个变量设置为与所单击的国家/地区相等(传递到下一个视图)

    让我举例说明这个问题: 比方说for循环加载,我点击哥斯达黎加。假设countrySelected变量应设置为Costa Rica,并且fullScreenCover应为true。加载下一个视图,并显示不正确的国家/地区。如果我回去选择同一个国家,它会做同样的事情。只有在我选择了一个不同的国家后,它才开始工作。

    不确定是什么导致了这个问题。我知道我可以使用导航链接使其工作,但在我的情况下,我不能使用它。任何帮助都将不胜感激!

    下面显示的是CountryPage,如果为true,它将激活完整的ScreenCover和countrySelected,它将跟踪在for循环中单击的国家/地区按钮

    @State private var showingCountryPage = false

    @State var countrySelected = Country(name: "Brazil", code: "BR", continent: "South America")

    以下是国家阵列的示例

    @State var countries = [Country(name: "France", code: "FR", continent: "Europe"), Country(name: "United States", code: "US", continent: "North America")].shuffled()

    下面是视图中for循环的代码

    
        HStack(spacing: 12){
    
            Text(" ")
    
            ForEach(countries, id: \.self){country in
    
                Button(action: {
                    
                    self.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)
    
                }.fullScreenCover(isPresented: $showingCountryPage, content: {NavigationView{ViewCountryHome(country: countrySelected)}})
    
            }
    
        }
    
    }.padding(.top, 5)
    
    1 回复  |  直到 1 年前
        1
  •  1
  •   workingdog support Ukraine    1 年前

    尝试使用以下方法 .fullScreenCover(item:...) 例如:

    @State var countrySelected: Country?
    // ....
    
    .fullScreenCover(item: $countrySelected) { country in 
       NavigationView {
          ViewCountryHome(country: country)
       } 
    }
    

    不需要 showingCountryPage