SwiftUI：修改TextField内部颜色不影响半透明背景及添加模糊效果

需求概述 #

• 不改变周围半透明区域的前提下，修改蓝色边框内部TextField的背景颜色
• 为TextField的外围区域添加透明/模糊效果
• 曾尝试.background(Color.blue)但效果不符合预期

一、修改TextField内部背景色 #

系统自带的RoundedBorderTextFieldStyle无法直接修改内部背景，需要自定义TextFieldStyle来实现样式定制：

import SwiftUI

// 自定义TextField样式，支持设置内部背景色和蓝色边框
struct CustomTextFieldStyle: TextFieldStyle {
    let bgColor: Color
    
    func _body(configuration: TextField<Self._Label>) -> some View {
        configuration
            .padding(10)
            .background(bgColor) // 设置内部背景色
            .cornerRadius(8)
            .overlay(
                RoundedRectangle(cornerRadius: 8)
                    .stroke(Color.blue, lineWidth: 1) // 保持蓝色边框
            )
    }
}

struct ContentView: View {
    @State private var textFieldContent = ""
    
    var body: some View {
        ZStack {
            VisualEffectView()
            GeometryReader { geometry in
                VStack {
                    Rectangle()
                        .foregroundColor(Color(red: 0.1, green: 0.1, blue: 0.1))
                        .frame(height: geometry.size.height / 1.16)
                    Rectangle()
                        .foregroundColor(.clear)
                        .frame(height: geometry.size.height * 2 / 3)
                }
                
                HStack {
                    TextField("Send a message", text: $textFieldContent)
                        .textFieldStyle(CustomTextFieldStyle(bgColor: .white)) // 应用自定义样式，设置白色内部背景
                        .padding(.leading, 20)
                    Spacer()
                    Button(action: {}) {
                        Text("Send")
                            .foregroundColor(.blue)
                    }
                    .buttonStyle(PlainButtonStyle())
                    .padding(.trailing, 20)
                }
                .padding(1)
                .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom)
                
                VStack {
                    HStack {
                        Spacer()
                        Button(action: {}) {
                            Image(systemName: "gearshape")
                                .foregroundColor(.blue)
                                .padding()
                        }
                        .buttonStyle(PlainButtonStyle())
                    }
                    Spacer()
                }
                .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topTrailing)
                .padding(.top, 20)
            }
        }
        .edgesIgnoringSafeArea(.all)
    }
}

struct VisualEffectView: NSViewRepresentable {
    func makeNSView(context: Context) -> NSVisualEffectView {
        let view = NSVisualEffectView()
        view.blendingMode = .behindWindow
        view.state = .active
        view.material = .underWindowBackground
        return view
    }
    func updateNSView(_ nsView: NSVisualEffectView, context: Context) {}
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

二、给TextField外围添加模糊效果 #

要实现TextField所在区域的模糊背景，只需给包裹TextField的HStack添加模糊背景层：

// 修改后的HStack部分
HStack {
    TextField("Send a message", text: $textFieldContent)
        .textFieldStyle(CustomTextFieldStyle(bgColor: .white))
        .padding(.leading, 20)
    Spacer()
    Button(action: {}) {
        Text("Send")
            .foregroundColor(.blue)
    }
    .buttonStyle(PlainButtonStyle())
    .padding(.trailing, 20)
}
.padding(8) // 给模糊区域留边距
.background(
    VisualEffectView() // 添加模糊背景
        .cornerRadius(12)
)
.padding(1)
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom)

这样既保留了周围的半透明区域，又实现了TextField内部背景色自定义和外围模糊效果。

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