SwiftUI中ScrollView前后出现空白的原因咨询

问题描述 #

不清楚为何在SwiftUI的ScrollView组件前后会出现空白区域，相关代码实现如下：

var body: some View {
        VStack {
            Text("A")
                .background(.red)
            Text("B")
                .background(.blue)
            Text("C")
                .background(.red)
            ScrollView {
                Text("D")
                    .background(.blue)
            }.background(.yellow)
            Text("E")
                .background(.red)
        }
    }

效果截图：

原因解释 #

ScrollView在SwiftUI中默认带有内置内边距（padding），这是系统为适配不同设备安全区域、优化滚动体验设置的默认样式，所以你会看到黄色背景的ScrollView上下出现空白。

另外，当ScrollView内容不足以填满可用空间时，系统会默认让内容居中显示——比如示例里只有一个Text("D")，内容高度远小于ScrollView高度，居中后上下的空白感会更明显。

解决方法 #

如果要消除这些空白，可采用以下两种方式：

1. 移除ScrollView默认内边距
   直接通过contentInsets参数设置为.zero：

ScrollView {
    Text("D")
        .background(.blue)
}
.background(.yellow)
.contentInsets(.zero) // 移除默认内边距

2. 让内容撑满ScrollView空间
   给ScrollView内的内容添加frame(maxHeight: .infinity)，让内容填满ScrollView高度，避免居中导致的空白：

ScrollView {
    Text("D")
        .background(.blue)
        .frame(maxHeight: .infinity, alignment: .top) // 内容置顶并撑满高度
}
.background(.yellow)

如果需要彻底消除空白，可将两种方法结合使用。

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