SwiftUI中如何修改底部表单（Bottom Sheet）后方的背景颜色？

我太懂你这个困扰了！你的App前景色是一款蓝色调，弹出底部表单时，默认情况下后方的视图会稍微缩小，还会透出App的蓝色前景色，这完全不是你想要的效果对吧？

别发愁，我整理了几个实用的解决办法，轻松帮你搞定这个问题：

方法一：iOS 16+ 用原生API直接搞定（最推荐） #

从iOS 16开始，SwiftUI给我们提供了非常省心的presentationBackground修饰符，直接就能设置底部表单后方的背景色，一步到位：

@State private var showBottomSheet = false

var body: some View {
    Button("弹出底部表单") {
        showBottomSheet.toggle()
    }
    .sheet(isPresented: $showBottomSheet) {
        // 这里放你的底部表单内容
        VStack {
            Text("我的底部表单")
                .font(.title)
                .padding()
            Spacer()
        }
        .frame(maxWidth: .infinity)
        .background(Color.white)
    }
    .presentationBackground(.black.opacity(0.7)) // 替换成你想要的背景色和透明度
}

这个方法不仅能改纯色背景，还能传入渐变、图片这类自定义背景视图，灵活性拉满。

方法二：适配iOS 15及以下旧版本 #

如果需要兼容更早的系统，我们可以借助UIKit的UISheetPresentationController来修改背景色，写个自定义修饰符就行：

// 自定义修饰符
struct SheetBackgroundModifier: ViewModifier {
    let color: Color
    
    func body(content: Content) -> some View {
        content
            .onAppear {
                // 找到当前的Sheet视图控制器
                guard let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene,
                      let rootVC = windowScene.windows.first?.rootViewController,
                      let sheetVC = rootVC.presentedViewController as? UIHostingController<AnyView>,
                      let sheetPresentationController = sheetVC.sheetPresentationController else {
                    return
                }
                // 设置背景色
                sheetPresentationController.backgroundColor = UIColor(color)
            }
    }
}

// 给View扩展个便捷调用方法
extension View {
    func sheetBackgroundColor(_ color: Color) -> some View {
        modifier(SheetBackgroundModifier(color: color))
    }
}

使用的时候直接在sheet后面加这个修饰符：

.sheet(isPresented: $showBottomSheet) {
    Text("兼容旧版本的底部表单")
        .padding()
}
.sheetBackgroundColor(.gray.opacity(0.5))

额外小技巧：去掉背景视图的缩小效果 #

如果你连默认的背景缩小效果也想去掉，可以结合presentationDetents设置表单的高度档位，配合背景色设置，让整体效果完全符合你的预期：

.sheet(isPresented: $showBottomSheet) {
    Text("无缩小效果的底部表单")
        .padding()
}
.presentationBackground(.darkGray.opacity(0.8))
.presentationDetents([.medium, .large]) // 定义表单可停留的高度
.presentationDragIndicator(.visible) // 显示顶部的拖拽指示器

备注：内容来源于stack exchange，提问作者Mauk