How to align views vertically in the top of a sheet in SwiftUI

user_11750234 0
Viewed 470

I'd like to align views in the top of a modal sheet vertically. The parent view has NavigationView and VStack inside it.

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

However extra space appears in the preview.

enter image description here

How can I remove this space? Is this issue affected by the alignment of NavigationView and VStack? Or does Picker need an extra space on the top? Thank you.

swiftui
1 Answers

It is navigation large title area, you can make it inline

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