TextField() 前面的 Text() 阻止了 SwiftUI 中的编辑答案

【问题标题】：Text() in front of TextField() blocking editing in SwiftUITextField() 前面的 Text() 阻止了 SwiftUI 中的编辑
【发布时间】：2020-12-01 17:58:42
【问题描述】：

所以我希望我的文本字段有一个可自定义的占位符文本，所以我决定在文本字段前面的 ZStack 中放置一个 Text() 元素。唯一的问题是，这个 Text() 项目阻止了它后面的文本字段的选择（也就是当我单击占位符时，我希望单击 TextField）。不幸的是，这个 Text() 元素阻止了点击。我尝试使用 .allowsHitTesting() 属性，如下所示，但这也不起作用，我不知道为什么。

struct ContentView: View {
    @State var text: String = ""

    var body: some View {
        ZStack {
            TextField("", text: self.$text)
                .background(Color.red)
                .foregroundColor(Color.white)
            if text.isEmpty {
                Text("Placeholder")
                    .allowsHitTesting(false)
            }
        }
    }
}

【问题讨论】：

TextField 确实提供了一个选项来提供占位符文本。您是否尝试自定义占位符文本颜色？
@user1046037 是的。为了简单起见，我只是做了一个最小可重复的例子——但这就是我把它放在堆栈中的原因
参考：stackoverflow.com/questions/57688242/…
@user1046037 我已经看到了——它不会有帮助，因为我需要文本字段有背景颜色......背景颜色会挡住 TextField 后面的 Text() 元素，所以Text() 元素必须在文本字段的前面。同样，唯一的问题是它阻塞了文本字段的可点击区域。

标签： swift swiftui textfield

【解决方案1】：

可以通过自定义文本字段样式来完成。

这是解决方案的演示（或可以调整参数）。使用 Xcode 12 / iOS 14 测试（边框仅用于可见性）

struct PlaceholderStyle: TextFieldStyle {
    let isActive: Bool

    var placeholder = "Placeholder"
    var color = Color.white
    var backgrond = Color.red

    func _body(configuration: TextField<_Label>) -> some View {
        Text("\(isActive ? placeholder : "")")
            .foregroundColor(isActive ? color : .clear)
            .background(isActive ? backgrond : .clear)
            .frame(maxWidth: .infinity, alignment: .leading)
        .overlay(configuration)
    }
}

struct DemoView: View {
    @State private var text = ""
    var body: some View {
        TextField("", text: $text)
            .border(Color.gray).padding(.horizontal)
            .textFieldStyle(PlaceholderStyle(isActive: text.isEmpty))
    }
}

【讨论】：

【解决方案2】：

看看这是否符合您的需求：

struct ContentView: View {
    
    @State var text = ""
    
    var body: some View {
        ZStack(alignment: .leading) {
            if text.isEmpty { Text("Placeholder")
                .foregroundColor(.red)
                .background(Color.yellow)
            }
            TextField("", text: $text)
                .background(text.isEmpty ? Color.clear : Color.yellow)
        }
    }
}

【讨论】：