SwiftUI Textfield - 如何在编辑模式下设置文本字段的背景颜色以清除

Posted 2023-02-24

【中文标题】SwiftUI Textfield - 如何在编辑模式下设置文本字段的背景颜色以清除

【英文标题】：SwiftUI Textfield - How to set the background Color for textfield in edit mode to clear

【发布时间】：2019-12-18 14:23:28

【问题描述】：

为了适应我的其他控件，我的 TextField 视图具有比文本本身更高的框架。

标准视图显示在带有自定义占位符的图像顶部。

当我点击 TextField 时，较小的文本区域本身具有灰色背景，如图底部所示。

如何将此文本背景设置为清晰的颜色？

struct TestView: View 
    
    @State var city: String
    @State var street: String
    
    var body: some View 
        VStack
            ZStack(alignment: .center) 
                if city.isEmpty  Text("Bitte Namen eingeben")
                    .font(.system(size: 24, weight: .heavy, design: .default))
                    .foregroundColor(Color( red: 1.0, green: 0.0, blue: 0.0, opacity: 0.3))
                
            TextField("", text: self.$city)
                .textFieldStyle(CustomTFStyle())
            
            
            ZStack(alignment: .center) 
                if street.isEmpty  Text("Bitte Strasse eingeben")
                    .font(.system(size: 24, weight: .heavy, design: .default))
                    .foregroundColor(Color( red: 1.0, green: 0.0, blue: 0.0, opacity: 0.3))
                
            TextField("", text: self.$street)
                .textFieldStyle(CustomTFStyle())
            
        
    


public struct CustomTFStyle : TextFieldStyle 
    public func _body(configuration: TextField<Self._Label>) -> some View 
        configuration
            .accentColor(.black)
                .frame(width: 300, height: 70, alignment: .center)
                .border(Color.gray, width: 4)
             .font(.system(size: 30, weight: .heavy, design: .default))
            .clipShape(RoundedRectangle(cornerRadius: 12))
            .shadow(radius: 12)
            .foregroundColor(.black)
            
    

【问题讨论】：

嗨 Reiner，我刚刚测试了你的代码 - 但从未见过你的灰色背景......我该如何重现它？

运行代码，点击其中一个文本字段并输入文本

你测试的是哪个 ios 版本？

我假设您正在测试 13.2....在 13.0 和 13.3 中，灰色没有显示在您的示例中

用 iOS 13.0 测试

【参考方案1】：

"UIScrollView.appearance().backgroundColor = .lightGray" 在我的 rootview 的 init 方法中也会影响 Textfield 的行为。删除这一行就可以了。

【参考方案2】：

无法重现此内容。尝试清理您的项目并退出/重新启动 Xcode。

尝试将修饰符添加到您的CustomTFStyle：

.background(Color.clear)

旁注： 您可能还需要考虑将AttributedString 分配为占位符，而不是在TextField 之上有条件地在ZStack 上添加一个单独的Text ?

为此，您需要将UITextField 包装在UIViewRepresentable 中，并在makeUIView 方法中执行经典工作。

【讨论】：

我清理了项目，删除了派生数据文件夹并重新启动了 Xcode。我使用 Canvas、iphone11 和 IPAD Pro 模拟器以及在真实设备上对其进行了测试。一旦我单击文本字段，它就会显示灰色背景。我删除了 Textfieldstyle 并且行为仍然存在。我正在使用 Xcode 11.2.1 和 catalina 10.15.1。 @Jordan 我也考虑了旁注，但是因为我想习惯 swiftUi，所以我只在寻找 SwiftUI 解决方案。