导航 Link - 通过导航 Link 和列表将特定数组元素传递到新视图

Question

我有一个名为 recipeArray 的数组显示在列表中。单击列表项时，用户将被带到一个名为 RecipeItemDetailView 的新视图。该数组包含一些默认值作为占位符。

struct StoredRecipeModel: Identifiable {
var id = UUID()
var name: String
var recipeSteps: [String]

}

struct ContentView: View {

@State var recipeArray: [StoredRecipeModel] = [StoredRecipeModel(name: "one", recipeSteps: ["step1 here", "step1b", "Step1c"]), StoredRecipeModel(name: "two", recipeSteps: ["step2here"]), StoredRecipeModel(name: "three", recipeSteps: ["Step3here"])]

var body: some View {
    NavigationView {
            VStack {
                List(recipeArray, id: \.id) { index in NavigationLink(destination: RecipeItemDetailView(recipe: $recipeArray, listItem: ListIndex.init())) {
                        HStack {
                            Text(index.name)
                            
                        }
                    }
                }

在 RecipeItemDetailView（用户单击列表项时导航到的视图）中，我只想显示给定元素的数据。例如，如果用户单击列表中的第一项（标记为“一个”），我只想显示该给定元素的 recipeSteps - 在本例中为 [" step1 here", "step1b", "Step1c"].

我当前的代码传递整个数组。有没有办法只传递与给定索引相关的元素 - 例如被点击的索引？

编辑 - 添加额外的 RecipeItemDetailView 代码

导入 SwiftUI

结构 RecipeItemDetailView：视图 {

@Binding var recipe: [StoredRecipeModel]
@Environment(\.presentationMode) var presentationMode
//@ObservedObject var listItem: ListIndex
var recipeDataToReturn = 0


var body: some View {
    
    var stored = [recipe[recipeDataToReturn].recipeSteps]
    
    NavigationView {
        VStack {
            List(stored[0], id: \.self) { index in Text(index)}
   
            List {
                Section(header: Text("Section")) {
                    Button("print") {
                        print(stored)
                    }
                }
            }

        }
    }
}

}

Answer 1

如果您只需要配方而不需要对其进行绑定，这非常简单——只需将您在 List 闭包中获得的变量传递给您的详细信息视图即可：

struct ContentView: View {
    
    @State var recipeArray: [StoredRecipeModel] = [StoredRecipeModel(name: "one", recipeSteps: ["step1 here", "step1b", "Step1c"]), StoredRecipeModel(name: "two", recipeSteps: ["step2here"]), StoredRecipeModel(name: "three", recipeSteps: ["Step3here"])]
    
    var body: some View {
        NavigationView {
            VStack {
                List(recipeArray, id: \.id) { recipe in
                    NavigationLink(destination: RecipeItemDetailView(recipe: recipe)) {
                        HStack {
                            Text(recipe.name)
                        }
                    }
                }
            }
        }
    }
}
struct RecipeItemDetailView : View {
    var recipe: StoredRecipeModel
    
    var body: some View {
        Text(recipe.name)
    }
}

如果您需要绑定，您可以通过索引获得：


struct ContentView: View {
    
    @State var recipeArray: [StoredRecipeModel] = [StoredRecipeModel(name: "one", recipeSteps: ["step1 here", "step1b", "Step1c"]), StoredRecipeModel(name: "two", recipeSteps: ["step2here"]), StoredRecipeModel(name: "three", recipeSteps: ["Step3here"])]
    
    var body: some View {
        NavigationView {
            VStack {
                List(recipeArray.indices, id: \.self) { index in
                    NavigationLink(destination: RecipeItemDetailView(recipe: $recipeArray[index])) {
                        HStack {
                            Text(recipeArray[index].name)
                        }
                    }
                }
            }
        }
    }
}

struct RecipeItemDetailView : View {
    @Binding var recipe: StoredRecipeModel
    
    var body: some View {
        Text(recipe.name)
    }
}

或者，编写一个绑定将 id 绑定到元素：


struct ContentView: View {
    
    @State var recipeArray: [StoredRecipeModel] = [StoredRecipeModel(name: "one", recipeSteps: ["step1 here", "step1b", "Step1c"]), StoredRecipeModel(name: "two", recipeSteps: ["step2here"]), StoredRecipeModel(name: "three", recipeSteps: ["Step3here"])]
    
    func bindingForId(id: UUID) -> Binding<StoredRecipeModel> {
        .init {
            recipeArray.first(where: { [=12=].id == id}) ?? StoredRecipeModel(name: "", recipeSteps: [])
        } set: { newValue in
            recipeArray = recipeArray.map {
                return [=12=].id == id ? newValue : [=12=]
            }
        }
    }
    
    var body: some View {
        NavigationView {
            VStack {
                List(recipeArray, id: \.id) { recipe in
                    NavigationLink(destination: RecipeItemDetailView(recipe: bindingForId(id: recipe.id))) {
                        HStack {
                            Text(recipe.name)
                        }
                    }
                }
            }
        }
    }
}

struct RecipeItemDetailView : View {
    @Binding var recipe: StoredRecipeModel
    
    var body: some View {
        Text(recipe.name)
    }
}

根据评论更新：

struct RecipeItemDetailView : View {
    @Binding var recipe: StoredRecipeModel
    
    var body: some View {
        NavigationView {
            VStack {
                List(recipe.recipeSteps, id: \.self) { item in
                    Text(item)
                }
                
                List {
                    Section(header: Text("Section")) {
                        Button("print") {
                            print(recipe)
                        }
                    }
                }
            }
        }
    }
}

导航 Link - 通过导航 Link 和列表将特定数组元素传递到新视图

Navigation Link - Pass Specific Array Element To New View via NavigationLink & Lists

xcode

state

swift

swiftui

swiftui-navigationlink