如何为SwiftUI登录页面的底部容器添加模糊效果？

1. 实现模糊背景容器 #

针对底部容器的模糊效果，iOS 15+可直接用系统Material，低版本则用UIKit的UIVisualEffectView做兼容包装，两种方案如下：

// 兼容低版本的模糊背景视图
struct BlurBackgroundView: UIViewRepresentable {
    var style: UIBlurEffect.Style
    
    func makeUIView(context: Context) -> UIVisualEffectView {
        let effect = UIBlurEffect(style: style)
        let view = UIVisualEffectView(effect: effect)
        return view
    }
    
    func updateUIView(_ uiView: UIVisualEffectView, context: Context) {}
}

// iOS 15+ 简化版本（可选，视觉效果更自然）
struct MaterialBackgroundView: View {
    var style: UIBlurEffect.Style
    
    var body: some View {
        if #available(iOS 15.0, *) {
            let material: Material = style == .dark ? .ultraThinMaterialDark : .ultraThinMaterialLight
            Rectangle()
                .fill(material)
        } else {
            BlurBackgroundView(style: style)
        }
    }
}

2. 封装可复用的输入框组件 #

把输入框封装成独立组件，统一样式和交互逻辑：

struct LoginTextField: View {
    let placeholder: String
    let iconName: String
    @Binding var text: String
    var isSecure: Bool = false
    
    var body: some View {
        HStack(spacing: 12) {
            Image(systemName: iconName)
                .foregroundColor(.gray)
            
            if isSecure {
                SecureField(placeholder, text: $text)
                    .foregroundColor(.primary)
            } else {
                TextField(placeholder, text: $text)
                    .foregroundColor(.primary)
            }
        }
        .padding(.vertical, 12)
        .padding(.horizontal, 16)
        .background(Color.white.opacity(0.1))
        .cornerRadius(8)
    }
}

3. 整合到现有登录页面 #

用ZStack叠加背景图与底部模糊容器，将输入框放入容器内：

struct LoginView: View {
    @State private var username: String = ""
    @State private var password: String = ""
    
    var body: some View {
        ZStack {
            // 自定义背景图（自行替换为你的背景资源）
            Image("login_background")
                .resizable()
                .scaledToFill()
                .edgesIgnoringSafeArea(.all)
            
            VStack {
                Spacer()
                
                // 底部模糊容器区域
                VStack(spacing: 20) {
                    Text("登录")
                        .font(.title)
                        .fontWeight(.bold)
                        .foregroundColor(.white)
                        .padding(.top, 24)
                    
                    LoginTextField(placeholder: "用户名/邮箱", iconName: "person", text: $username)
                    
                    LoginTextField(placeholder: "密码", iconName: "lock", text: $password, isSecure: true)
                    
                    Button(action: {
                        // 此处添加登录逻辑
                    }) {
                        Text("登录")
                            .fontWeight(.medium)
                            .foregroundColor(.white)
                            .frame(maxWidth: .infinity)
                            .padding(.vertical, 12)
                            .background(Color.blue)
                            .cornerRadius(8)
                            .padding(.top, 8)
                    }
                    
                    HStack {
                        Text("还没有账号？")
                            .foregroundColor(.white.opacity(0.8))
                        Button("立即注册") {
                            // 此处添加注册跳转逻辑
                        }
                        .foregroundColor(.white)
                    }
                    .padding(.bottom, 24)
                }
                .padding(.horizontal, 24)
                // 绑定模糊背景
                .background(MaterialBackgroundView(style: .dark))
                .cornerRadius(16)
                .padding(.horizontal, 16)
                // 添加阴影增强悬浮感
                .shadow(color: .black.opacity(0.3), radius: 10, x: 0, y: 5)
            }
        }
    }
}

关键说明 #

• 模糊效果适配：MaterialBackgroundView自动识别系统版本，高版本用系统原生Material材质，视觉更柔和；低版本回退到UIVisualEffectView实现模糊
• 输入框复用：统一了图标、占位符、安全输入等逻辑，后续修改样式只需调整组件内部
• 容器样式：通过圆角和阴影实现示例图的悬浮质感，可根据需求调整圆角半径、阴影参数

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