SwiftUI 在自定义 TextField 上切换活动/非活动线条颜色

Posted 2023-02-23

【中文标题】SwiftUI 在自定义 TextField 上切换活动/非活动线条颜色

【英文标题】：SwiftUI toggle active / inactive line color on custom TextField

【发布时间】：2020-08-19 17:45:58

【问题描述】：

我正在尝试创建一个TextField，并在其下方添加一行，为此我使用了Divide，正如this answer 中所建议的那样，我添加了一个.onTapGesture() 来更改Divider 颜色，但是，这是嵌入在另一个视图中的组件。

在我的ContentView 中，我有一个Button 和我的UnderscoredTextField，它们包含在HStack 中，它包含在Background 组件中（取自this answer），以便能够关闭键盘以编程方式进行，但我希望能够在发生这种情况时更改 UnderscoredTextField 内的 @State var isActive 变量，但由于我是 SwiftUI 新手，我不太确定如何实现这一点。

import SwiftUI

struct ContentView: View 
    var body: some View 
        Background 
            UnderscoredTextField(phoneNumber: "")
        .onTapGesture 
            self.hideKeyboard()
            //How to tell my UnderscoreTextField's isActive variable to change
        
    


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

---

import SwiftUI

struct UnderscoredTextField: View 
    @State var phoneNumber: String
    @State var isActive: Bool = false
    
    var body: some View 
        VStack 
            TextField("12345678", text: $phoneNumber)
                .keyboardType(.phonePad)
                .onTapGesture 
                    self.isActive = true
            
            Divider()
                .padding(.horizontal)
                .frame(height: 1)
                .background(isActive ? Color.red : Color.gray)
        
    


struct UnderscoredTextField_Previews: PreviewProvider 
    static var previews: some View 
        UnderscoredTextField(phoneNumber: "12345678")
    

这是我隐藏键盘时的样子，但我想将其切换回灰色

【参考方案1】：

如果我理解正确，使用onEditingChanged 就足够了，如下所示

var body: some View 
    VStack 
        TextField("12345678", text: $phoneNumber, onEditingChanged: 
                self.isActive = $0     // << here !!
        ).keyboardType(.phonePad)
        Divider()
            .padding(.horizontal)
            .frame(height: 1)
            .background(isActive ? Color.red : Color.gray)