SwiftUI - NavigationLink 的目的地创建具有额外空间的视图答案

【问题标题】：SwiftUI - destination of NavigationLink creates view with extra spaceSwiftUI - NavigationLink 的目的地创建具有额外空间的视图
【发布时间】：2020-07-09 03:07:44
【问题描述】：

我已将登录页面缩减为单个 NavigationLink，该 NavigationLink 将列表视图作为其目的地。正如您在下图中看到的那样，问题在于，我得到的不是左侧间距很好的标题，而是右侧所示的巨大空间。两种视图都是相同的，但右侧的视图是设计时页面的预览。左边的图片是来自登录屏幕后的页面预览。

struct ContentView: View {
    
    var body: some View {
        NavigationView {
            NavigationLink(destination: CustomerView()) {
                Text("login")
            }
        }
    }
}

这是列表视图的代码：

var body: some View {
        
        NavigationView {
            VStack {
                SearchBarView(text: $searchText)
                    .padding(.top, 0)
                List {
                    ForEach(customers.filter({searchText.isEmpty ? true : $0.name.localizedCaseInsensitiveContains(searchText)})) { customer in
                        NavigationLink(destination: CustomerDetailView(customer: customer)) {
                            CustomerRow(customer: customer)
                        }
                        .navigationBarTitle("Customers")
                    }
                }
            }
        }
        .navigationBarBackButtonHidden(true)
    }
}

【问题讨论】：

标签： listview swiftui swiftui-navigationlink

【解决方案1】：

您不需要两次NavigationView。 NavigationView 应该包装一次顶级视图，它将覆盖您导航的所有视图。在VStack 上删除NavigationView

 VStack {
    List {
        ForEach(0..<10) { index in
            NavigationLink(destination: Text("Hello \(index)")) {
                Text("\(index)")
            }
        }
    }
}
.navigationBarTitle("Customers")
.navigationBarBackButtonHidden(true)

【讨论】：