List 内的 NavigationLink 适用于 HStack 而不是每个元素 [英] NavigationLink inside List applies to HStack instead of each element

问题描述

我正在尝试遵循 SwiftUI 上的 Composing Complex Interfaces 指南并且在使 NavigationLink 在 iOS 13 beta 3 和现在 beta 4 上正常工作时遇到问题.

I'm trying to follow Composing Complex Interfaces guide on SwiftUI and having issues getting NavigationLink to work properly on iOS 13 beta 3 and now beta 4.

如果您只是下载项目文件并尝试运行它，请单击任何 Lake 图像 - 不会发生任何事情.但是，如果您单击标题湖泊"，它将开始一个接一个地打开每个湖泊，这不是任何人都期望的行为.

If you just download the project files and try running it, click on any of the Lake images - nothing will happen. However if you click on the header "Lakes" it'll start opening every single lake one after another which is not a behaviour anyone would expect.

似乎 NavigationLink 在复杂"界面中被破坏了.有解决方法吗?

Seems like NavigationLink is broken in "complex" interfaces. Is there a workaround?

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

I've tried making it less complex and removing HStack of List helps to get NavigationLinks somewhat to work but then I can't build the full interface like in example.

相关代码部分:

    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)
    }
}

推荐答案

NavigationLink 实例似乎存在一个错误，这些实例未直接包含在 List 中.如果你用一个 ScrollView 和一个 VStack 替换最外面的 List 那么里面的 NavigationLinks 工作正常:

It looks like there is a bug with NavigationLink instances that aren't directly contained in a List. If you replace the outermost List with a ScrollView and a VStack then the inner NavigationLinks work correctly:

即

 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"))
    }
}

这篇关于List 内的 NavigationLink 适用于 HStack 而不是每个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！