SwiftUI中List内HStack的多个NavigationLink同时触发问题及解决方法

问题重现 #

当在SwiftUI的List中嵌套HStack，并在HStack内放置多个NavigationLink时，点击任意一个链接会触发所有NavigationLink的导航行为，导致NavigationStack同时推入多个页面。而如果HStack不嵌套在List中，功能则完全正常。

问题代码：

struct ContentView: View {
    var body: some View {
        NavigationStack {
            List{
                HStack {
                    NavigationLink(value: 1) {
                        Text("navigation 1")
                    }
                    
                    NavigationLink(value: 2) {
                        Text("navigation 2")
                    }
                    
                    NavigationLink(value: 3) {
                        Text("navigation 3")
                    }
                }
            }

            .navigationDestination(for: Int.self) { value in
                switch value {
                case 0...9:
                    Text("Page \(value)")
                default:
                    Text("Page not found \(value)")
                }
            }
        }
    }
}

原因分析 #

List的每一行默认自带可点击交互，当HStack作为List的一行时，整个行的点击区域会覆盖内部所有元素。此时点击行内任意位置，List的行点击事件会传递给所有子NavigationLink，导致它们的导航逻辑同时被触发。

解决方案 #

方法1：给NavigationLink设置PlainButtonStyle #

通过给每个NavigationLink添加.buttonStyle(PlainButtonStyle())，可以取消NavigationLink默认的按钮样式，使其仅响应自身的点击区域，不受List行点击事件的影响：

struct ContentView: View {
    var body: some View {
        NavigationStack {
            List{
                HStack {
                    NavigationLink(value: 1) {
                        Text("navigation 1")
                    }
                    .buttonStyle(PlainButtonStyle())
                    
                    NavigationLink(value: 2) {
                        Text("navigation 2")
                    }
                    .buttonStyle(PlainButtonStyle())
                    
                    NavigationLink(value: 3) {
                        Text("navigation 3")
                    }
                    .buttonStyle(PlainButtonStyle())
                }
            }

            .navigationDestination(for: Int.self) { value in
                switch value {
                case 0...9:
                    Text("Page \(value)")
                default:
                    Text("Page not found \(value)")
                }
            }
        }
    }
}

方法2：将每个NavigationLink放在单独的List行中 #

如果布局允许，也可以把每个NavigationLink作为List的单独一行，避免多个链接共享同一个行点击区域：

struct ContentView: View {
    var body: some View {
        NavigationStack {
            List{
                NavigationLink(value: 1) {
                    Text("navigation 1")
                }
                NavigationLink(value: 2) {
                    Text("navigation 2")
                }
                NavigationLink(value: 3) {
                    Text("navigation 3")
                }
            }

            .navigationDestination(for: Int.self) { value in
                switch value {
                case 0...9:
                    Text("Page \(value)")
                default:
                    Text("Page not found \(value)")
                }
            }
        }
    }
}

方法3：使用isActive绑定控制NavigationLink #

通过给每个NavigationLink绑定isActive状态变量，手动控制导航触发，这种方式更灵活，适合需要自定义交互逻辑的场景：

struct ContentView: View {
    @State private var nav1Active = false
    @State private var nav2Active = false
    @State private var nav3Active = false
    
    var body: some View {
        NavigationStack {
            List{
                HStack {
                    Button("navigation 1") {
                        nav1Active = true
                    }
                    Button("navigation 2") {
                        nav2Active = true
                    }
                    Button("navigation 3") {
                        nav3Active = true
                    }
                    
                    NavigationLink("", isActive: $nav1Active) {
                        Text("Page 1")
                    }
                    .hidden()
                    
                    NavigationLink("", isActive: $nav2Active) {
                        Text("Page 2")
                    }
                    .hidden()
                    
                    NavigationLink("", isActive: $nav3Active) {
                        Text("Page 3")
                    }
                    .hidden()
                }
            }
        }
    }
}

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