SwiftUI视图中ZStack存在无法放置元素的未知空白如何解决

你代码里的几个写法错误直接导致了异常空白的出现：

• 最核心的错误是.frame(width: .infinity, height: 300)这行的写法：SwiftUI的frame修饰符里，直接给width/height传.infinity是把视图的固定宽高设为无穷大，会直接触发布局约束计算异常；要实现撑满可用宽度的效果，必须用maxWidth: .infinity，这是告诉布局系统“当前视图尽量占满父视图给出的可用宽度”，和直接设固定宽度为无穷大是完全不同的逻辑。
• 第二个问题是安全区忽略的作用域不对：你只给最里面的红色Rectangle加了.edgesIgnoringSafeArea(.all)，但它外面的内层ZStack、外层VStack全都是默认遵守安全区布局的。edgesIgnoringSafeArea只会让当前视图自己的内容延伸到安全区外面，根本不会改变父视图的布局边界，再加上你给Rectangle后面叠了个.background(.white)，这个白色背景不会跟着视图延伸到安全区外，布局直接错位，就出了那块怎么都消不掉的空白。
• 冗余容器也会增加布局异常概率：内层ZStack里只放了一个Rectangle，完全没必要多套这一层容器，多一层容器就多一层布局约束，很容易出现意料外的留白。

直接替换成下面的写法即可，异常空白会完全消失：

struct ForTest: View {
    var body: some View {
        ZStack {
            Color.gray.edgesIgnoringSafeArea(.all)
            VStack(spacing: 0) {
                Rectangle()
                    .fill(.red)
                    .frame(maxWidth: .infinity, height: 300)
                    .edgesIgnoringSafeArea(.top)
                ScrollView {
                    VStack {
                        ForEach(1...15, id: \.self) {_ in
                            Text("Hello, World")
                                .padding()
                        }
                    }
                    .frame(maxWidth: .infinity)
                }
            }
        }
    }
}

• 把错误的width: .infinity改成maxWidth: .infinity，符合SwiftUI布局规则，从根源解决约束异常
• 去掉了多余的内层ZStack和Rectangle上无效的白色背景，减少不必要的布局层级
• 给VStack设置spacing: 0，去掉VStack默认的子视图间距，避免红色块和滚动视图之间出现额外间隙
• 把Rectangle的安全区忽略从.all改成.top，只需要让红色块延伸到顶部状态栏/动态岛区域即可，避免不必要的布局越界
• 给ScrollView内部的VStack也设置maxWidth: .infinity，让内容撑满滚动视图宽度，避免两侧出现默认留白
• 额外提醒：不要给固定尺寸参数传.infinity，所有需要撑满可用空间的需求，都要用maxWidth/maxHeight实现，这是SwiftUI开发里非常容易踩的坑。

内容的提问来源于stack exchange，提问作者Steven-Carrot