如何让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
相关产品推荐
相关产品推荐

