SwiftUI 在图像周围生成不需要的空间

Posted

技术标签:

【中文标题】SwiftUI 在图像周围生成不需要的空间【英文标题】:SwiftUI generates unwanted space around an Image 【发布时间】:2019-12-23 01:41:46 【问题描述】:

以下代码生成一个简单的 VStack,其中包含文本视图,它们之间没有显示间距(第 1 行和第 2 行)。

但是,将图像添加到第 3 行(绿色)会在整行上方和下方添加不需要的间距。

struct ContentView: View 
  var body: some View 
    VStack 
      HStack 
        Text("one thing")
      .background(Color(.yellow))
      HStack 
        Text("nothing")
      .background(Color(.red))
      HStack 
        Text("three")
        Image(systemName: "star")
          .resizable()
          .frame(width: 8, height: 8)
      .background(Color(.green))
      HStack 
        Text("three things")
      .background(Color(.red))
    
  

如何避免额外的多余空间?

空间显示与图像大小无关(即使图像尺寸只有几个像素)。

当然,我想知道为什么会产生这个空间。

感谢您的帮助

以上代码截图:

【问题讨论】:

【参考方案1】:

你可以调整VStack的间距:

var body: some View 
            VStack (spacing: 0) 
                 HStack 
                   Text("one thing")
                 .background(Color(.yellow))
                 HStack 
                   Text("nothing")
                 .background(Color(.red))
                 HStack 
                   Text("three")
                   Image(systemName: "star")
                     .resizable()
                     .frame(width: 8, height: 8)
                 .background(Color(.green))
                 HStack 
                   Text("three things")
                 .background(Color(.red))
               
             

【讨论】:

呃,是的。完美运行。仍然想知道为什么通过添加图像来增加间距... 这需要很长时间才能找到感谢您的帮助。我的图像在 3 个 VStack 内,奇怪的是,我必须将中间 VStack 的间距设置为 0 才能解决此问题。

以上是关于SwiftUI 在图像周围生成不需要的空间的主要内容,如果未能解决你的问题,请参考以下文章

SwiftUI:在 Firebase ML Kit 识别的元素周围绘制矩形

FullScreenCover 不关闭 - SwiftUI

在UIImage周围添加透明空间

SIFT/SURF

SwiftUI 中图像按钮的可点击区域

删除图像视图周围的空白