SwiftUI中仅点击列表行标题时触发页面导航的解决方案

问题场景 #

我有一个包含列表的视图，该列表属于导航栈的一部分。期望仅在点击列表行（ArticleRow）中的标题时，才跳转至嵌套视图（ArticleContent），点击副标题时不触发导航。当前代码中，尽管副标题并未包含在NavigationLink中，但点击副标题仍会触发页面导航：

struct ArticleRow: View {
    let number: Int
    var body: some View {
        VStack {
            NavigationLink("Title: \(number)") {
                ArticleContent(number: number)
            }
            Text("Subtitle: \(number)")
        }
    }
}

问题原因 #

在SwiftUI的List组件中，只要行内包含NavigationLink，List会默认将整个行设为可触发导航的交互区域，因此即使副标题不在NavigationLink范围内，点击它也会触发页面跳转。

解决方案 #

方法1：使用NavigationLink的isActive绑定（兼容iOS 13+）

通过手动控制NavigationLink的激活状态，仅在点击标题时触发导航：

struct ArticleRow: View {
    let number: Int
    @State private var isNavigating = false
    
    var body: some View {
        VStack {
            // 用Button替代直接的NavigationLink，点击时激活导航状态
            Button("Title: \(number)") {
                isNavigating = true
            }
            Text("Subtitle: \(number)")
            
            // 隐藏的NavigationLink，通过isActive控制导航触发
            NavigationLink("", destination: ArticleContent(number: number), isActive: $isNavigating)
                .hidden()
        }
    }
}

方法2：使用navigationDestination（iOS 16+推荐）

利用SwiftUI 3.0新增的navigationDestination修饰符，配合普通Button实现精准触发，这种写法更符合现代SwiftUI的导航逻辑：

首先更新ContentView，添加导航目标绑定：

struct ContentView: View {
    @State private var selectedArticleNumber: Int?
    
    var body: some View {
        // iOS 16+使用NavigationStack替代旧的NavigationView
        NavigationStack {
            List(Array(1...10)) { number in
                ArticleRow(number: number, selectedNumber: $selectedArticleNumber)
            }
            // 配置导航目标，当selectedArticleNumber有值时跳转
            .navigationDestination(item: $selectedArticleNumber) { number in
                ArticleContent(number: number)
            }
        }
    }
}

然后修改ArticleRow，通过按钮更新选中状态：

struct ArticleRow: View {
    let number: Int
    @Binding var selectedNumber: Int?
    
    var body: some View {
        VStack {
            Button("Title: \(number)") {
                selectedNumber = number
            }
            Text("Subtitle: \(number)")
        }
    }
}

效果说明 #

两种方法都能实现：仅点击标题时跳转至ArticleContent，点击副标题时无任何导航操作，完全符合需求。

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