SwiftUI中ZStack嵌套NavigationStack时LinearGradient不生效问题咨询

问题核心在于Form（以及同底层的List）默认带有不透明的系统背景，它会完全覆盖ZStack底层的LinearGradient，导致渐变无法透出显示。

解决方案 #

只需要给Form添加.scrollContentBackground(.hidden)修饰符，隐藏其默认的滚动内容背景，就能让底层的渐变显示出来：

修改后的完整代码：

var body: some View {
    
    ZStack {
        LinearGradient(colors: [.pink, .purple], startPoint: .top, endPoint: .bottom)
            .ignoresSafeArea()
        
        NavigationStack {
            Form {
                Section{
                    Text("Preferred wake up time")
                        .font(.title)
                    
                    DatePicker("Enter a time", selection: $wakeUp, displayedComponents: .hourAndMinute)
                        .labelsHidden()
                }
                
                Section{
                    Text("Desired amount of sleep")
                        .font(.title)
                    
                    Stepper("\(sleepAmount.formatted()) hours", value: $sleepAmount, in: 4...12, step: 0.25)
                }
                
                Section {
                    Text("Daily coffee intake")
                        .font(.title)
                    
                    Picker("Cups of coffee", selection: $coffeeAmount) {
                        ForEach(0..<21) {
                            Text("\($0)")
                        }
                    }
                }
                
                Section {
                    Text("Recommended bedtime")
                        .font(.title)
                    Text(sleepResults)
                        .font(.title3)
                }
            }
            .scrollContentBackground(.hidden) // 关键：隐藏Form默认背景
            .navigationTitle("Better Rest")
        }
    }
}

兼容iOS 15及更早版本的替代方案 #

如果你的项目需要兼容旧系统，可以在视图的init方法中修改UITableView的全局外观：

init() {
    UITableView.appearance().backgroundColor = .clear
}

这样Form（底层基于UITableView）的背景会变为透明，同样能透出ZStack里的渐变。

注意：如果后续给Section或Form内的元素设置了不透明背景色，依然会遮挡渐变，需确保这些元素的背景是透明或半透明状态。

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