SwiftUI中如何实现类似对话框的透明背景Bottom Sheet

可以实现只显示绿色弹窗区域、不覆盖父页面的效果，核心是修改Sheet的背景属性并调整布局，具体修改如下：

1. 修改Sheet调用代码 #

移除多余的背景设置，添加透明背景和隐藏拖拽指示器：

struct CustomDialogSV: View {
    @State private var showSheet = false

    var body: some View {
        Button("Show Sheet") {
            showSheet = true
        }
        .sheet(isPresented: $showSheet) {
            ZStack {
                // 可选：添加半透明背景+点击外部关闭，更贴近系统Alert体验
                Color.black.opacity(0.3)
                    .edgesIgnoringSafeArea(.all)
                    .onTapGesture {
                        showSheet = false
                    }
                
                // 居中显示绿色弹窗
                CustomAlert()
                    .padding()
            }
        }
        // 设置Sheet背景完全透明
        .presentationBackground(.clear)
        // 隐藏默认的拖拽指示器
        .presentationDragIndicator(.hidden)
    }
}

2. 弹窗内容代码（保留原有逻辑） #

原CustomAlert代码已自带绿色背景，无需额外冗余设置，保持原样即可：

struct CustomAlert: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Alert Title")
                .font(.headline)
                .padding(.bottom)

            Text("This is the alert message. It can be any amount of text.")
                .padding(.bottom)

            HStack {
                Button(action: {
                    // handle action for first button
                }) {
                    Text("First Button")
                }
                .padding(.trailing)

                Button(action: {
                    // handle action for second button
                }) {
                    Text("Second Button")
                }
            }
        }
        .padding()
        .background(Color.green)
        .cornerRadius(10)
        .shadow(radius: 10)
    }
}

关键说明 #

• presentationBackground(.clear)：彻底移除Sheet默认的半透明背景层，让父页面内容完全可见
• presentationDragIndicator(.hidden)：去掉Sheet底部的拖拽条，让样式更接近原生Alert
• ZStack中的半透明背景：可选功能，添加后可以弱化父页面内容、突出弹窗，同时支持点击外部关闭弹窗（不需要的话可替换为Color.clear）

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