SwiftUI中添加Form后BackgroundView不显示问题求助

问题描述 #

已创建带有背景的BackgroundView，但在HomeView中通过ZStack调用时无法显示背景。删除Form组件后，背景能正常显示，如何解决？

附代码：

import SwiftUI

struct HomeView: View {
    @State private var salaryPh: String = "" // 应为整数类型
    
    var body: some View {
        NavigationView {
            ZStack {
                BackgroundView()
                
                Form {
                    Section(header: Text("你的时薪（税后）")) {
                        TextField("我的时薪是...", text: $salaryPh)
                    }
                    
                }
            }
        }
    }
}
                        

struct HomeView_Previews: PreviewProvider {
    static var previews: some View {
        HomeView()
    }
}

解决方案 #

问题根源是Form默认带有不透明的白色背景，会完全覆盖下方的BackgroundView。以下是几种可行的解决方式：

方法一：直接设置Form背景为透明 #

给Form添加.background(.clear)修饰符，让下层背景透出来：

Form {
    Section(header: Text("你的时薪（税后）")) {
        TextField("我的时薪是...", text: $salaryPh)
    }
}
.background(.clear)

方法二：配合列表样式调整（iOS 16+） #

如果是iOS 16及以上版本，可结合列表样式优化显示效果：

Form {
    Section(header: Text("你的时薪（税后）")) {
        TextField("我的时薪是...", text: $salaryPh)
    }
}
.listStyle(.insetGrouped) // 可选，根据需求调整样式
.background(.clear)

方法三：全局自定义透明背景（兼容旧版本） #

如果需要适配iOS 16以下版本，可通过UIViewRepresentable自定义透明背景视图：

struct ClearBackgroundView: UIViewRepresentable {
    func makeUIView(context: Context) -> UIView {
        let view = UIView()
        DispatchQueue.main.async {
            // 找到Form的底层容器并设置透明
            view.superview?.superview?.backgroundColor = .clear
        }
        return view
    }
    
    func updateUIView(_ uiView: UIView, context: Context) {}
}

// 使用方式
Form {
    Section(header: Text("你的时薪（税后）")) {
        TextField("我的时薪是...", text: $salaryPh)
    }
}
.background(ClearBackgroundView())

调整后，ZStack中的BackgroundView就能正常显示在Form下方了。

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