将 SFSymbol 添加到 VStack 会产生奇怪的间距

Question

将 SFSymbol 添加到 VStack 内的 HStack 时，我在 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 )
      }
   }

将 SFSymbol 添加到 VStack 会产生奇怪的间距

Adding SFSymbol to VStack creates odd spacing

swiftui

sf-symbols