ios - List 中的 NavigationLink 适用于 HStack 而不是每个元素

Question

我正在尝试关注 Composing Complex Interfaces关于 SwiftUI 的指南，在让 NavigationLink 在 iOS 13 beta 3 和现在的 beta 4 上正常工作时遇到问题。

如果您只是下载项目文件并尝试运行它，请单击任何 Lake 图像 - 什么也不会发生。但是，如果您单击标题“湖泊”，它将开始一个接一个地打开每个湖泊，这是任何人都不会想到的行为。

NavigationLink 似乎在“复杂”界面中损坏了。有解决方法吗？

我试过让它不那么复杂，删除 List 的 HStack 有助于让 NavigationLinks 正常工作，但我无法像示例中那样构建完整的界面。

相关部分代码:

    var body: some View {
        NavigationView {
            List {
                FeaturedLandmarks(landmarks: featured)
                    .scaledToFill()
                    .frame(height: 200)
                    .clipped()
                    .listRowInsets(EdgeInsets())

                ForEach(categories.keys.sorted(), id: \.self) { key in
                    CategoryRow(categoryName: key, items: self.categories[key]!)
                }
                .listRowInsets(EdgeInsets())

                NavigationLink(destination: LandmarkList()) {
                    Text("See All")
                }
            }
            .navigationBarTitle(Text("Featured"))
            .navigationBarItems(trailing: profileButton)
            .sheet(isPresented: $showingProfile) {
                ProfileHost()
            }
        }
    }


struct CategoryRow: View {
    var categoryName: String
    var items: [Landmark]

    var body: some View {
        VStack(alignment: .leading) {
            Text(self.categoryName)
                .font(.headline)
                .padding(.leading, 15)
                .padding(.top, 5)

            ScrollView(.horizontal, showsIndicators: false) {
                HStack(alignment: .top, spacing: 0) {
                    ForEach(self.items, id: \.name) { landmark in
                        NavigationLink(
                            destination: LandmarkDetail(
                                landmark: landmark
                            )
                        ) {
                            CategoryItem(landmark: landmark)
                        }
                    }
                }
            }
            .frame(height: 185)
        }
    }
}

struct CategoryItem: View {
    var landmark: Landmark
    var body: some View {
        VStack(alignment: .leading) {
            landmark
                .image(forSize: 155)
                .renderingMode(.original)
                .cornerRadius(5)
            Text(landmark.name)
                .foregroundColor(.primary)
                .font(.caption)
        }
        .padding(.leading, 15)
    }
}

Answer 1

NavigationLink 实例似乎有一个错误，它没有直接包含在 List 中。如果将最外层的 List 替换为 ScrollView 和 VStack，则内部的 NavigationLinks 可以正常工作:

即

 var body: some View {
    NavigationView {
        ScrollView(.vertical, showsIndicators: true) {
            VStack {
                FeaturedLandmarks(landmarks: featured)
                    .scaledToFill()
                    .frame(height: 200)
                    .clipped()
                    .listRowInsets(EdgeInsets())

                ForEach(categories.keys.sorted(), id: \.self) { key in
                    CategoryRow(categoryName: key, items: self.categories[key]!)
                }
                .listRowInsets(EdgeInsets())

                NavigationLink(destination: LandmarkList()) {
                    Text("See All")
                }
            }
        }
        .navigationBarTitle(Text("Featured"))
    }
}