You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何让SwiftUI Form实现半透明效果?(iOS 16开发)

实现SwiftUI Form指定区域半透明效果

解决思路

你要的是只让表单里的白色内容区域变半透明,不是整个Form滚动区域。iOS16+刚好提供了精准控制表单行/区块背景的修饰符,不用给Form整体加背景,直接针对内容项设置就行。

代码示例

逐个设置表单行的半透明背景

如果你的表单是零散的行,给每个行加.listRowBackground:

var body: some View {
    NavigationStack(path: $path) {
        ZStack {
            LinearGradient(gradient: Gradient(colors: [.pink, .yellow]),
                           startPoint: .topTrailing,
                           endPoint: .bottomLeading)
            .edgesIgnoringSafeArea(.all)

            Form {
                Text("示例文本行")
                    .listRowBackground(.thinMaterial)
                
                TextField("输入框", text: .constant(""))
                    .listRowBackground(.thinMaterial)
                
                // 你的自定义VStack内容
                VStack {
                    Text("自定义内容")
                    Button("按钮") {}
                }
                .listRowBackground(.thinMaterial)
            }
            .scrollContentBackground(.hidden) // 隐藏Form默认的滚动背景
        }
    }
}

给整个Section统一设置半透明背景

如果内容都放在Section里,直接给Section加.sectionBackground更省事:

var body: some View {
    NavigationStack(path: $path) {
        ZStack {
            LinearGradient(gradient: Gradient(colors: [.pink, .yellow]),
                           startPoint: .topTrailing,
                           endPoint: .bottomLeading)
            .edgesIgnoringSafeArea(.all)

            Form {
                Section {
                    VStack {
                        Text("自定义内容")
                        Button("按钮") {}
                    }
                    TextField("输入框", text: .constant(""))
                }
                .sectionBackground(.thinMaterial) // 给整个Section套半透明背景
            }
            .scrollContentBackground(.hidden)
        }
    }
}

额外提示

  • .sectionBackground是iOS16专属的,刚好适配你的开发环境;
  • 想要不同透明度的效果,可以把.thinMaterial换成.ultraThinMaterial(更透)、.thickMaterial(更实),或者直接用Color.white.opacity(0.4)这种自定义透明色;
  • 一定要保留.scrollContentBackground(.hidden),不然Form默认的白色滚动背景会盖掉你的渐变底。

内容的提问来源于stack exchange,提问作者Rafał Sroka

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.11 16:20:32