Добавление SFSymbol в VStack создает странный интервал

Question

При добавлении SFSymbol в HStack внутри VStack я получаю странный интервал после HStack. Любые идеи о том, как сохранить нормальный интервал VStack:

Я добавил границы, чтобы вы могли видеть, что происходит

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

А при добавлении изображения:

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

Вам необходимо явно установить интервал в 0, как показано ниже (по умолчанию у каркаса есть интервал по умолчанию между каждым из двух элементов по типу)

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