SwiftUI中VStack与ZStack间莫名空白问题求助

问题原因 #

你遇到的空白主要来自两个点：

• 包裹蓝色区域和灰色ZStack的父VStack没设置spacing: 0，SwiftUI的VStack默认会给子View之间添加间距
• 灰色ZStack没有填充剩余空间，导致它只占据自身内容高度，无法顶上去贴合蓝色区域

解决步骤 #

直接修改两处代码即可：

1. 给包裹蓝色区域和灰色ZStack的父VStack加上spacing: 0，同时设置frame(maxHeight: .infinity)让它填充整个屏幕高度
2. 给灰色ZStack加上frame(maxHeight: .infinity)，让它占据父VStack的剩余空间

修改后的完整代码 #

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            TabView(selection: .constant(1)) {
                // 修改点1：给父VStack添加spacing:0和frame(maxHeight: .infinity)
                VStack(spacing: 0) {
                    VStack(spacing: 0) {
                        Text("Remaining Budget")
                        Text("Rp 1.000.000")
                            .font(.title)
                            .padding(7)
                        Text("February 2023")
                        HStack() {
                            VStack(alignment: .leading) {
                                Text("Budget")
                                Text("Rp 1.500.000")
                            }
                            Spacer()
                            VStack(alignment: .leading) {
                                Text("Expense")
                                Text("Rp 1.500.000")
                            }
                        }
                        .padding(.top)
                        .font(.system(size: 14, weight: .bold))
                    }
                    .padding([.top, .leading, .trailing, .bottom])
                    .background(Rectangle()
                        .fill(.blue.gradient)
                        .ignoresSafeArea(edges: [.top, .bottom]))
                    .foregroundColor(.white)
                    .font(.custom("Avenir-Heavy", size: 20))
                    
                    // 修改点2：给灰色ZStack添加frame(maxHeight: .infinity)
                    ZStack {
                        Color(.secondarySystemBackground)
                    }
                    .frame(maxHeight: .infinity)
                }
                .tabItem {
                    Label("Home", systemImage: "house.fill")
                }
                .tag(1)
                
                Text("Tab Content 2").tabItem { 
                    Label("Category", systemImage: "square.split.2x2.fill")
                }.tag(2)
                Text("Tab Content 2").tabItem {
                    Image(systemName: "plus.square")
                        .scaledToFit()
                }.tag(3)
                Text("Tab Content 2").tabItem { 
                    Label("Charts", systemImage: "chart.bar.fill")
                }.tag(4)
                Text("Tab Content 2").tabItem { 
                    Label("Settings", systemImage: "gearshape.fill")
                }.tag(5)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

额外说明 #

如果还有细微空白，可以检查蓝色区域的.padding设置——你当前给蓝色区域加了上下左右的padding，这会让蓝色背景的View和父VStack边缘有距离，但这不是你说的中间空白的原因。如果需要蓝色背景完全贴合边缘，可以调整这个padding参数。

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