Adding SFSymbol to VStack creates odd spacing

Question

When adding an SFSymbol to an HStack inside a VStack I get odd spacing after the HStack. Any ideas on how to keep the normal VStack spacing:

I've added borders so you can see what is happening

struct ContentView: View {
   var body: some View {
      VStack {
         HStack {
            Spacer()
            Text( "This is text" )
            Spacer()
         }
         .border( Color.orange, width: 1 )

         Text("Hello, World!")
            .border( Color.red, width: 1 )
         Text("FooBar")
            .border( Color.blue, width: 1 )
      }
   }
}

And when the image is added:

struct ContentView: View {
   var body: some View {
      VStack {
         HStack {
            Spacer()
            Text( "This is text" )
            Spacer()
            Image( systemName: "chevron.right" )
         }
         .border( Color.orange, width: 1 )

         Text("Hello, World!")
            .border( Color.red, width: 1 )
         Text("FooBar")
            .border( Color.blue, width: 1 )
      }
   }
}

Answer 1

You need to set spacing explicitly to 0, as below (by default, framework has default spacing between each of two items, by type)

   var body: some View {
      VStack(spacing: 0) {
         HStack {
            Spacer()
            Text( "This is text" )
            Spacer()
            Image( systemName: "chevron.right" )
         }
         .border( Color.orange, width: 1 )

         Text("Hello, World!")
            .border( Color.red, width: 1 )
         Text("FooBar")
            .border( Color.blue, width: 1 )
      }
   }