ios - LazyVGrid 中的 NavigationLink 循环返回所有条目,SwiftUI
问题描述
我有一个图像网格。每个点击的图像都应该在 NavigationView 上推送一个带有图像详细信息的视图。
导航链接按预期工作,但是当我按下后退按钮时,它会打开下一个图像,依此类推,直到它循环所有图像。到底是怎么回事?
这是View
:
struct ImageGrid: View {
@ObservedObject var part: Part
@State private var showingImagePicker = false
@State private var inputImage: UIImage?
var body: some View {
Button("add images"){
self.showingImagePicker = true
}
LazyVGrid(columns: [GridItem(.adaptive(minimum:100))]){
ForEach(part.images){ image in
ZStack {
Image(uiImage: image.thumb)
.resizable()
.scaledToFit()
NavigationLink (
destination: ImageDetail(image:image),
label: {
EmptyView()
}
).buttonStyle(PlainButtonStyle())
}
}
}
.sheet(isPresented: $showingImagePicker, onDismiss: loadImage) {
ImagePicker(image: self.$inputImage)
}
}
// other functions ...
...
}
这就是细节View
struct ImageDetail: View {
@ObservedObject var image: TrainingImage
var body: some View {
VStack {
Image(uiImage: image.content)
.resizable()
.scaledToFit()
}
}
}
编辑:
这是一个隔离行为的独立示例。当网格位于表单部分内时,它似乎停止正常工作。消除表单和导航链接部分可以正常工作
import SwiftUI
extension String: Identifiable {
public var id:Int {
self.hashValue
}
}
struct ImageDetail: View {
var image: String
var body: some View {
VStack {
Image(uiImage: UIImage(systemName: image)!)
.resizable()
.scaledToFit()
}
}
}
struct ContentView: View {
@State var images:[String] = ["plus", "minus"]
var body: some View {
NavigationView {
Form {
Section {
LazyVGrid(columns: [GridItem(.adaptive(minimum:100))]){
ForEach(images){ image in
NavigationLink (
destination: ImageDetail(image: image),
label: {
Image(uiImage: UIImage(systemName: image)!)
.resizable()
.scaledToFit()
}
).buttonStyle(PlainButtonStyle())
}
}
}
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
解决方案
它是表单/列表功能,可以自动检测行中的链接,但是你有几个行,所以效果。解决方案是从自动检测中分离单元格视图并隐藏链接。
使用 Xcode 12.0 / iOS 14 测试
struct ContentView: View {
@State var images:[String] = ["plus", "minus"]
var body: some View {
NavigationView {
Form {
Section {
LazyVGrid(columns: [GridItem(.adaptive(minimum:100))]){
ForEach(images){
ImageCellView(image: $0)
}
}
}
}
}
}
}
struct ImageCellView: View {
var image: String
@State private var isActive = false
var body: some View {
Image(uiImage: UIImage(systemName: image)!)
.resizable()
.scaledToFit()
.onTapGesture {
self.isActive = true
}
.background(
NavigationLink (
destination: ImageDetail(image: image), isActive: $isActive,
label: {
EmptyView()
}
))
}
}
推荐阅读
- asterisk - 识别输入数字的 WaitExten() 问题
- mysql - 组合使用相同表和相同列的两个查询
- javascript - 为什么multer undefined?
- ruby-on-rails - 装饰者/主持人/展览和助手
- c# - EF如何更新相关表值
- javascript - 在多个步骤定义文件中共享相同的 Selenium WebDriver
- html - 视口其余部分的引导 4 视频全高和全宽
- python - 使用对数组列表进行的计算更新 numpy 数组
- javascript - Promise 通过 $emit('fetch', resolve) 以不可预测的方式返回
- python - 使用 psycopg2 如何避免使用连接上下文管理器