如何在SwiftUI的.alert修饰符中使用自定义视图？

嘿，我来给你唠唠怎么搞定这个事儿～其实啊，原生的SwiftUI .alert 修饰符有点“死板”，只能用系统自带的那些组件，没法直接把咱们自己写的自定义视图塞进去。不过别担心，咱们有两个实用的办法绕开这个限制：

办法一：用UIKit的UIAlertController包装自定义视图 #

这个办法兼容性好，iOS13及以上都能用。核心思路是把SwiftUI的自定义视图转成UIKit能识别的视图，再塞进UIAlertController里，最后用SwiftUI的方式触发弹出。

先上代码示例：

import SwiftUI

struct CustomAlertWrapper: UIViewControllerRepresentable {
    @Binding var isPresented: Bool
    // 接收自定义视图的闭包
    let customContent: () -> AnyView
    
    func makeUIViewController(context: Context) -> UIViewController {
        UIViewController()
    }
    
    func updateUIViewController(_ vc: UIViewController, context: Context) {
        // 避免重复弹出
        guard isPresented, vc.presentedViewController == nil else { return }
        
        // 创建UIKit的Alert控制器
        let alertController = UIAlertController(title: "自定义弹窗", message: nil, preferredStyle: .alert)
        
        // 把SwiftUI视图转成UIHostingController
        let hostingVC = UIHostingController(rootView: customContent())
        hostingVC.view.translatesAutoresizingMaskIntoConstraints = false
        
        // 添加到Alert的视图里
        alertController.view.addSubview(hostingVC.view)
        
        // 设置约束，让自定义视图适配Alert的大小
        NSLayoutConstraint.activate([
            hostingVC.view.topAnchor.constraint(equalTo: alertController.view.topAnchor, constant: 20),
            hostingVC.view.leadingAnchor.constraint(equalTo: alertController.view.leadingAnchor, constant: 20),
            hostingVC.view.trailingAnchor.constraint(equalTo: alertController.view.trailingAnchor, constant: -20),
            hostingVC.view.bottomAnchor.constraint(equalTo: alertController.view.bottomAnchor, constant: -80)
        ])
        
        // 添加取消按钮
        alertController.addAction(UIAlertAction(title: "取消", style: .cancel) { _ in
            isPresented = false
        })
        
        // 弹出Alert
        vc.present(alertController, animated: true)
    }
}

// 给View加个扩展，方便调用
extension View {
    func eraseToAnyView() -> AnyView {
        AnyView(self)
    }
}

// 使用示例
struct ContentView: View {
    @State private var showCustomAlert = false
    
    var body: some View {
        Button("弹出自定义Alert") {
            showCustomAlert = true
        }
        .background(
            CustomAlertWrapper(isPresented: $showCustomAlert) {
                // 这里放你的自定义视图，比如带输入框的内容
                VStack(spacing: 16) {
                    Text("这是自定义内容")
                    TextField("请输入内容", text: .constant(""))
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                    Button("点我试试") {
                        print("自定义按钮被点击啦")
                    }
                }
                .padding()
                .eraseToAnyView()
            }
        )
    }
}

办法二：用Sheet模拟自定义Alert #

如果你的App只需要支持iOS16及以上，那这个纯SwiftUI的办法更简洁。咱们用Sheet来模拟Alert的样式，通过调整Sheet的尺寸、背景、指示器等属性，让它看起来和原生Alert一模一样，还能完全自定义内容。

代码示例：

import SwiftUI

struct ContentView: View {
    @State private var showCustomAlert = false
    
    var body: some View {
        Button("弹出自定义Alert") {
            showCustomAlert = true
        }
        .sheet(isPresented: $showCustomAlert) {
            // 自定义Alert的完整视图
            VStack(spacing: 20) {
                // 标题区域
                Text("自定义弹窗")
                    .font(.headline)
                Divider()
                
                // 自定义内容区域
                VStack(spacing: 16) {
                    TextField("输入你的内容", text: .constant(""))
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                    Toggle("开启选项", isOn: .constant(false))
                }
                
                Divider()
                
                // 按钮区域
                HStack {
                    Button("取消") {
                        showCustomAlert = false
                    }
                    Spacer()
                    Button("确认") {
                        showCustomAlert = false
                        // 在这里处理确认逻辑
                    }
                    .foregroundColor(.blue)
                }
            }
            .padding()
            .frame(width: 300)
            .background(Color(.systemBackground))
            .cornerRadius(12)
            .shadow(radius: 10)
        }
        // 固定Sheet高度
        .presentationDetents([.height(250)])
        // 隐藏拖拽指示器
        .presentationDragIndicator(.hidden)
        // 设置背景半透明
        .presentationBackground(.black.opacity(0.3))
    }
}

这两个办法各有优劣：第一种兼容性强，适合需要支持旧版本iOS的项目；第二种纯SwiftUI实现，代码更清爽，适合新版本的项目。你可以根据自己的需求选～

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