时间戳

首页 > 解决方案 > SwiftUI - List / ForEach 结合 NavigationLink 和 isActive 无法正常工作

list - SwiftUI - List / ForEach 结合 NavigationLink 和 isActive 无法正常工作

问题描述

我正在尝试在 SwiftUI 的 List 或 ForEach 循环中执行 NavigationLink。不幸的是，我遇到了一个非常奇怪的行为（例如，当点击 Leo 时，它会打开 Karl，Opening Max 也指向 Karl）。

我已经发现它与 NavigationLink 中的“isActive”属性有关。不幸的是，我需要它在这里实现这种行为：https ://i.stack.imgur.com/g0BFz.gif在这里也被问到SwiftUI - Nested NavigationView: Go back to root。

我也尝试使用选择和标签属性，但我无法实现“回到根”机制。

这是示例：


import SwiftUI


struct Model: Equatable, Hashable {
    var userId: String
    var firstName: String
    var lastName: String
}


struct ContentView: View {
    
    @State var navigationViewIsActive: Bool = false
    
    var myModelArray: [Model] = [
        Model(userId: "27e880a9-54c5-4da1-afff-05b4584b1d2f", firstName: "Leo", lastName: "Test"),
        Model(userId: "1050412a-cb12-4160-b7e4-2702ab8430c3", firstName: "Max", lastName: "Test"),
        Model(userId: "1050412a-cb12-4160-b7e4-2702ab8430c3", firstName: "Karl", lastName: "Test")]
    
    var body: some View {
        NavigationView {
            List(myModelArray, id: \.self) { model in
                NavigationLink(destination: secondView(firstName: model.firstName), isActive: $navigationViewIsActive){ Text(model.firstName) }
            }
            .listStyle(PlainListStyle())
        }
    }
}

struct secondView: View {
    
    @State var firstName: String
    
    var body: some View {
        NavigationView {
            Text(firstName)
                .padding()
        }
    }
    
}

谢谢！

标签： listforeachswiftuiswiftui-navigationlink

解决方案

这是因为只使用了一种状态navigationViewIsActive

因此，当您单击导航链接时，该值将变为True，并且所有链接都将变为active

这种情况的解决方案是这样的：

  • 定义一个新的State，它将保存选定的模型值
  • 你只需要一个NavigationLink，然后制作它Hidden（把它放在 a 里面VStack）
  • 在List使用Button中代替NavigationLink
  • 单击a 时Button：首先更改selectedModel值，然后使 navigationLink 处于活动状态（true）

就像下面的代码 ( Tested with IOS 14) ：

import SwiftUI


struct Model: Equatable, Hashable {
    var userId: String
    var firstName: String
    var lastName: String
}


struct ContentView: View {
    
    @State var navigationViewIsActive: Bool = false
    @State var selectedModel : Model? = nil
    
    var myModelArray: [Model] = [
        Model(userId: "27e880a9-54c5-4da1-afff-05b4584b1d2f", firstName: "Leo", lastName: "Test"),
        Model(userId: "1050412a-cb12-4160-b7e4-2702ab8430c3", firstName: "Max", lastName: "Test"),
        Model(userId: "1050412a-cb12-4160-b7e4-2702ab8430c3", firstName: "Karl", lastName: "Test")]
    
    var body: some View {
        NavigationView {
            VStack {
                VStack {
                    if selectedModel != nil {
                        NavigationLink(destination: SecondView(firstName: selectedModel!.firstName), isActive: $navigationViewIsActive){ EmptyView() }
                    }
                }.hidden()
                
                List(myModelArray, id: \.self) { model in
                    Button(action: {
                        self.selectedModel = model
                        self.navigationViewIsActive = true
                    }, label: {
                        Text(model.firstName)
                    })
                }
                .listStyle(PlainListStyle())
            }
            
            
        }
    }
}

struct SecondView: View {
    
    @State var firstName: String
    
    var body: some View {
        NavigationView {
            Text(firstName)
                .padding()
        }
    }
    
}

struct Test_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

PS：我写的是：如何使用 SwiftUI 导航，它将帮助您了解在 swiftUI 中导航的方式

推荐阅读