LazyVGrid嵌套ForEach中，NavigationLink播放按钮无法跳转的解决方法

我创建了一个滚动网格视图，每个图标代表不同的播放列表。为每个播放列表的左上角实现了基于NavigationLink的播放按钮，但该按钮在Preview和模拟器中均无法点击，无法跳转到目标视图。

相关代码 #

var body: some View {
    ZStack {
        ScrollView {
            LazyVGrid (columns: [GridItem(.fixed(200)), GridItem(.fixed(200))]) {
                ForEach(musics) { sub in
                    ZStack (alignment: .topLeading){
                        VStack(alignment: .leading) {
                            Image(sub.albumImage)
                                .resizable()
                                .frame(width: 150, height: 150)
                                .mask(RoundedRectangle(cornerRadius: 20))
                            Text(sub.albumGen)
                                .fontWeight(.bold)
                                .foregroundColor(.white)
                            Text(sub.songs)
                                .foregroundColor(.white)
                        } // END OF VSTACK
                        
                        
                        NavigationLink {
                            // Naviagte to a different view!
                            CategoryView()
                        } label: {
                            Image(systemName: "play.circle")
                                .font(.system(size: 30))
                                .padding()
                        }
                    } // END OF ZSTACK
                }// END OF FOR EACH
            } // END OF GRID ITEM
        } // END OF SCROLL VIEW
    } //END OF ZSTACK
}

显示效果 #

通常使用NavigationLink时，按钮会显示为蓝色且可点击。请问如何修改代码，使该导航链接激活并能跳转到其他视图？

解决方法 #

核心问题是NavigationLink必须包裹在导航容器中才能生效，SwiftUI在iOS 16+使用NavigationStack，iOS 15及以下使用NavigationView，你的代码缺少这个必要容器。同时可以优化按钮的点击区域，避免因图标范围小导致的点击不灵敏。

修改后的代码示例：

var body: some View {
    // iOS 16+ 使用NavigationStack，iOS 15及以下替换为NavigationView
    NavigationStack {
        ZStack {
            ScrollView {
                LazyVGrid (columns: [GridItem(.fixed(200)), GridItem(.fixed(200))]) {
                    ForEach(musics) { sub in
                        ZStack (alignment: .topLeading){
                            VStack(alignment: .leading) {
                                Image(sub.albumImage)
                                    .resizable()
                                    .frame(width: 150, height: 150)
                                    .mask(RoundedRectangle(cornerRadius: 20))
                                Text(sub.albumGen)
                                    .fontWeight(.bold)
                                    .foregroundColor(.white)
                                Text(sub.songs)
                                    .foregroundColor(.white)
                            } // END OF VSTACK
                            
                            NavigationLink {
                                CategoryView()
                            } label: {
                                Image(systemName: "play.circle")
                                    .font(.system(size: 30))
                                    .padding()
                            }
                            .contentShape(Rectangle()) // 确保点击区域覆盖整个按钮范围
                        } // END OF ZSTACK
                    }// END OF FOR EACH
                } // END OF GRID ITEM
            } // END OF SCROLL VIEW
        } //END OF ZSTACK
    }
}

关键修改点：

1. 在最外层添加NavigationStack（或NavigationView）作为导航容器，这是NavigationLink生效的前提。
2. 给NavigationLink添加.contentShape(Rectangle())，扩大点击响应区域，避免仅图标边缘可点击的问题。

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