SwiftUI ForEach遍历给Text加padding出现额外下方间距如何解决

原因说明 #

这不是SwiftUI的Bug，属于系统隐式布局容器的默认行为：
SwiftUI中如果在body内直接放置多个子视图，系统会自动生成一个隐式VStack完成垂直排布，该隐式容器默认带有自适应间距，间距数值会跟随子视图的视觉尺寸动态调整：

• 给Text添加16px padding后，子视图视觉高度变大，隐式VStack的默认间距也会随之变大，所以会看到明显的多余间隔
• padding设为0时，子视图高度很小，对应的默认间距也会缩小到几乎不可见，视觉上就没有异常

解决方法 #

• 显式声明外层VStack并指定间距为0
  手动在外层套一层VStack，将spacing参数设置为0即可完全消除默认间距，修改后的代码如下：

import SwiftUI

struct ContentView: View {
    
    var names = ["John", "Chris", "Mary", "Thomas"]
    
    var body: some View {
        // 显式指定容器间距为0
        VStack(spacing: 0) {
            ForEach(names, id: \.self) { (name) in
                Text(name).padding(16).background(Color.green)
            }
            ForEach(names, id: \.self) { (name) in
                Text(name).padding(0).background(Color.yellow)
            }
        }
    }
}

• 如果使用其他布局容器（如LazyVStack、List等），对应修改容器的间距参数即可：如果是List场景还可以配合listRowSpacing或者listRowInsets调整行间距。

原问题效果示意图 #

内容的提问来源于stack exchange，提问作者hbr4u7vb2sljksdf2