[英]While using a ForEach nested in a LazyVGrid how can I implement usable play buttons that navigate to a different view?
I have created a scrollable grid view where each icon is supposed to represent a different playlist.我创建了一个可滚动的网格视图,其中每个图标应该代表一个不同的播放列表。 I implemented a play button using a navigation link for each playlist in the left corner however, for some reason, the play button is not usable.我使用左角每个播放列表的导航链接实现了一个播放按钮,但是由于某种原因,播放按钮不可用。 It does not work in the preview or the simulator.它在预览版或模拟器中不起作用。 In other words, the play button does not allow me to click it and navigate to another view.换句话说,播放按钮不允许我单击它并导航到另一个视图。
Here is the code I have:这是我的代码:
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
}
} }
Here is an image of how it looks in the preview and simulator:这是它在预览和模拟器中的外观图像:
I have circled the play buttons because it is hard to see.我圈出了播放按钮,因为它很难看到。 Usually, when I use a navigation link, the buttons appear blue and are clickable.通常,当我使用导航链接时,按钮显示为蓝色并且可以点击。
How can I edit my code so that the navigation link is active and navigates to a different view?如何编辑我的代码以使导航链接处于活动状态并导航到不同的视图?
Embed your View
in a NavigationView
, which is required for NavigationLink
to work.将您的View
嵌入到NavigationView
中,这是NavigationLink
工作所必需的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.