SwiftUI中ScrollView嵌套NavigationLink的点击导航失效问题

ScrollView默认会拦截点击手势，导致其所在区域无法触发外层NavigationLink的跳转。以下是两种可行的解决方式：

方法一：通过状态绑定手动触发导航 #

给ScrollView添加点击手势，通过绑定NavigationLink的isActive状态来触发跳转，滚动操作不会触发该手势：

@State private var isNavigating = false

var body: some View {
    NavigationLink(destination: Somewhere(), isActive: $isNavigating) {
        HStack {
            VStack {
                HStack {
                    Image("image")
                    Text("text")
                    Spacer()
                }
                ScrollView(.horizontal) {
                    LazyHGrid(rows: [GridItem(.fixed(2))], spacing: 7) {
                        ForEach(someArray) { something in
                           SomeRectangleView()
                        }
                    }
                }
                .onTapGesture {
                    isNavigating = true
                }
            }
        }
    }
}

方法二：扩展可点击区域并调整手势优先级 #

使用contentShape让整个布局区域都成为NavigationLink的可点击范围，再通过highPriorityGesture确保点击手势优先于ScrollView的手势被处理：

var body: some View {
    NavigationLink(destination: Somewhere()) {
        HStack {
            VStack {
                HStack {
                    Image("image")
                    Text("text")
                    Spacer()
                }
                ScrollView(.horizontal) {
                    LazyHGrid(rows: [GridItem(.fixed(2))], spacing: 7) {
                        ForEach(someArray) { something in
                           SomeRectangleView()
                        }
                    }
                }
            }
        }
        .contentShape(Rectangle())
        .highPriorityGesture(TapGesture())
    }
}

注意事项 #

如果SomeRectangleView本身包含点击手势，需要调整手势优先级（比如给内部手势添加lowPriorityGesture），避免和外层导航的点击手势冲突。

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