SwiftUI设置屏幕背景色时内容偏移、背景不透明问题如何解决？

实现方案 #

你遇到的布局偏移问题是因为直接将Color和VStack放在body根节点时，SwiftUI的ViewBuilder会默认将多个根视图按垂直方向排列，导致Color占满上方空间，VStack被挤压到屏幕底部。正确实现方式是用ZStack作为根容器，将背景色放在最底层，原有VStack放在上层即可，VStack默认背景就是透明的，无需额外设置，也不会出现白紫混色问题：

struct HomeView: View {
    
    let screenWidth = UIScreen.main.bounds.size.width
    let screenHeight = UIScreen.main.bounds.size.height
    let screenSize = UIScreen.main.bounds.size
    
    var body: some View {
        // ZStack作为根容器，视图从下到上层级排列
        ZStack {
            // 底层放置全屏背景色，忽略安全区撑满整个屏幕
            Color.purple
                .ignoresSafeArea()
            
            // 上层放置原有业务内容，默认背景透明
            VStack(spacing: 20) { // 可自行调整spacing控制元素垂直间距
                
                Text("Hey! Welcome")
                    .font(.title)
                    .fontWeight(.bold)
                    .foregroundColor(Color.black)
                Text("We deliver on-demand fresh fruits directly from your nearby farms.")
                    .font(.body)
                    .fontWeight(.medium)
                    .foregroundColor(Color.gray)
                    .padding(1)
                    .multilineTextAlignment(.center)
                
                Button(action: {
                    
                }) {
                    Text("Get Started")
                        .foregroundColor(Color.black)
                        .fontWeight(.medium)
                        .padding(10)
                }
                .frame(maxWidth: screenWidth * 0.875)
                .background(Color.yellow)
                .cornerRadius(12)
                
                Button(action: {
                    
                }) {
                    Text("I already have an account")
                        .foregroundColor(Color.black)
                        .fontWeight(.medium)
                        .padding(10)
                }
                .frame(maxWidth: screenWidth * 0.875)
                .background(Color.white)
                .cornerRadius(12)
            }
        }
    }
}

如果需要调整VStack内容的整体垂直位置，可以给VStack添加.frame(maxHeight: .infinity, alignment: .top)等参数，按需设置对齐规则即可。

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