SwiftUI，删除VStack中视图之间的空间？答案

【问题标题】：SwiftUI, remove space between views in a VStack?SwiftUI，删除VStack中视图之间的空间？
【发布时间】：2021-04-21 01:46:11
【问题描述】：

为什么三个蓝色矩形和列表之间有这么大的空间？如何删除空间以便 VStack 堆栈中的所有视图位于顶部？我尝试在列表之后直接使用Spacer()，但没有任何改变。

struct ContentView: View {
    
    init() { UITableView.appearance().backgroundColor = UIColor.clear }
    
    var body: some View {
        NavigationView {
            ZStack {
                Color.red
                    .ignoresSafeArea()
                VStack {
                    HStack {
                        Text("Faux Title")
                            .font(.system(.largeTitle, design: .rounded))
                            .fontWeight(.heavy)
                        Spacer()
                        Button(action: {
                            // settings
                        }, label: {
                            Image(systemName: "gearshape.fill")
                                .font(.system(.title2))
                        })
                    }
                    .padding()
                    
                    GeometryReader { geometry in
                        HStack() {
                            Text("1")
                                .frame(width: geometry.size.width * 0.30, height: 150)
                                .background(Color.blue)
                            Spacer()
                            Text("2")
                                .frame(width: geometry.size.width * 0.30, height: 150)
                                .background(Color.blue)
                            Spacer()
                            Text("3")
                                .frame(width: geometry.size.width * 0.30, height: 150)
                                .background(Color.blue)
                        }
                    }
                    .padding()
                    
                    List {
                        Text("One")
                        Text("Two")
                        Text("Three")
                        Text("Four")
                        Text("Five")
                        Text("Six")
                    }
                    .listStyle(InsetGroupedListStyle())
                }
            }
            .navigationBarHidden(true)
        }
    }
}

额外问题：在网页开发中，您可以打开浏览器的网页检查器并使用元素选择器单击突出显示其边框的元素。对于这样的事情很有用，你试图找出有问题的间距属于哪个元素。 Xcode 中有类似的东西吗？

【问题讨论】：

标签： swiftui swiftui-list

【解决方案1】：

VStack(spacing: 0) {...} 
Spacer()

对于您的问题，您可以在 Xcode 中使用视图检查器。 https://developer.apple.com/library/archive/documentation/ToolsLanguages/Conceptual/Xcode_Overview/ExaminingtheViewHierarchy.html

【讨论】：

很遗憾，这不起作用。但是感谢您对 View Hierarchy 的提醒！

【解决方案2】：

既然您知道带有蓝色矩形的 HStack 的高度将是 150，您应该使用 .frame(height: 150) 将其限制为：

GeometryReader { geometry in
    ...
}
.padding()
.frame(height: 150) //Here

否则，GeometryReader 将占用所有可用的垂直空间。

Re：您的 Web 开发比较，请查看 Xcode 视图层次结构检查器。不完全一样，但大同小异：https://developer.apple.com/library/archive/documentation/ToolsLanguages/Conceptual/Xcode_Overview/ExaminingtheViewHierarchy.html

【讨论】：

是的！这解决了它！谢谢你。您对 View Hierarchy 的建议是纯金。