SwiftUI VStack without the space

February 7, 2023

I am trying to create a view which has a small form at the top with a text field. The results will display below, but I want the list to display directly under the form (with just a little gap) rather than half way down the screen.

I have tried adding Spacer() but cannot get the list to be directly under the form.

import SwiftUI

struct TestView: View {
    @State var location = ""
    
    var body: some View {
        VStack() {
            Form() {
                Text("Location")
                TextField("Location", text: $location)
                Button("Look up") {
                    // Lookup data
                }
            }
            /* Results will display in the list */
            List {
                Text("Location One")
                Text("Location Two")
                Text("Location Three")
                Text("Location Four")
                Text("Location Five")
                Text("Location Six")
            }
        }
    }
}

struct TestView_Previews: PreviewProvider {
    static var previews: some View {
        TestView()
    }
}

>Solution :

You can put the List inside the Form and separate them using Section. Plus no need for a VStack.

struct TestView: View {
  @State var location = ""

  var body: some View {
    Form {
      Text("Location")
      TextField("Location", text: $location)
      Button("Look up") {
        // Lookup data
      }
      Section {
        List {
          Text("Location One")
          Text("Location Two")
          Text("Location Three")
          Text("Location Four")
          Text("Location Five")
          Text("Location Six")
        }
      }
    }
  }
}