如何在SwiftUI的工作表顶部垂直对齐视图

Question

我想使模式表顶部的视图垂直对齐。父视图内部有NavigationView和VStack。

import SwiftUI

struct DemoView: View {
    @State private var selection: Int = 0
    @State private var text: String = ""
    
    var body: some View {
        NavigationView {
            VStack {
                Picker(selection: $selection, label: Text("...")) {
                    Text("...").tag(0)
                    Text("...").tag(1)
                }
                .border(Color.gray)
                
                TextField("# edit", text: $text)
                .padding(8.0)
                .border(Color.gray)
                
                Spacer()
                .border(Color.gray)
            }
            .navigationBarItems(trailing: Button {
                
            } label: { Text("Done") })
        }
    }
}

struct DemoView_Previews: PreviewProvider {
    static var previews: some View {
        DemoView()
    }
}

但是预览中会出现多余的空间。

如何删除该空间？ NavigationView和VStack的对齐会影响此问题吗？还是Picker顶部需要多余的空间？谢谢。

Answer 1

这是导航大标题区域，您可以使其内联

Spacer()
  .border(Color.gray)
  .navigationBarTitle("", displayMode: .inline)   // inside NavigationView