在使用嵌套在 LazyVGrid 中的 ForEach 时，如何实现导航到不同视图的可用播放按钮？

Question

我创建了一个可滚动的网格视图，其中每个图标应该代表一个不同的播放列表。 我使用左角每个播放列表的导航链接实现了一个播放按钮，但是由于某种原因，播放按钮不可用。 它在预览版或模拟器中不起作用。 换句话说，播放按钮不允许我单击它并导航到另一个视图。

这是我的代码：

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
}

}

这是它在预览和模拟器中的外观图像：

我圈出了播放按钮，因为它很难看到。 通常，当我使用导航链接时，按钮显示为蓝色并且可以点击。

如何编辑我的代码以使导航链接处于活动状态并导航到不同的视图？

Answer 1

将您的View嵌入到NavigationView中，这是NavigationLink工作所必需的。