SwiftUI 在自定義 TextField 上切換活動/非活動線條顏色

Question

我正在嘗試創建一個下面有一行的TextField ，因為我使用了這個答案中建議的Divide並且我添加了一個.onTapGesture()來更改Divider顏色，但是這是一個嵌入在另一個視圖中的組件.

在我的ContentView ，我有一個Button和UnderscoredTextField ，它們包含在HStack ，並且包含在Background組件中（取自此答案），以便能夠以編程方式關閉鍵盤，但我希望能夠更改發生這種情況時，UnderscoredTextField 中的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")
    }
}

這是我隱藏鍵盤時的樣子，但我想將其切換回灰色

Answer 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)
    }
}