如何为SwiftUI中Form的单个Section设置背景色/渐变

iOS 16+ 官方简洁方案 #

苹果在iOS 16及以上提供了listSectionBackground修饰符，专门用于设置Section的背景，直接使用即可实现需求：

Form {
    Section {
        // 普通Section，保持默认样式
    }
    
    Section {
        Text("Hello")
            .padding() // 给内容添加内边距优化视觉
    }
    .listSectionBackground(
        LinearGradient(colors: [.teal, .cyan, .green], startPoint: .leading, endPoint: .trailing)
            .opacity(0.6)
            .cornerRadius(8) // 可选：添加圆角增强美观
            .padding(.horizontal, 12) // 可选：调整背景与屏幕边缘的间距
    )
}
.listStyle(.insetGrouped) // 搭配合适的列表样式，让背景显示更自然

兼容iOS 15及以下的方案 #

低版本系统没有官方的Section背景设置API，需要通过清除系统默认样式+ZStack嵌套的方式实现：

首先定义一个清除Section默认背景的Modifier：

struct ClearSectionBackgroundModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .listRowBackground(Color.clear)
            .listSectionSeparator(.hidden)
    }
}

extension View {
    func clearSectionBackground() -> some View {
        modifier(ClearSectionBackgroundModifier())
    }
}

然后在Form中使用：

Form {
    Section {
        // 普通Section
    }
    
    Section {
        ZStack {
            // 渐变背景放在底层
            LinearGradient(colors: [.teal, .cyan, .green], startPoint: .leading, endPoint: .trailing)
                .opacity(0.6)
                .cornerRadius(8)
                .padding(.horizontal, 16)
            
            // 内容放在上层
            Text("Hello")
                .padding()
        }
        .clearSectionBackground()
    }
}
.listStyle(.grouped)

说明 #

• 两种方案都不会影响整个Form的背景，仅作用于目标Section
• 可根据实际需求调整渐变的方向、圆角大小、边距参数

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