SwiftUI bascule la couleur de ligne active / inactive sur le champ de texte personnalisé

Question

J'essaie de créer un TextFieldavec une ligne en dessous, pour cela j'ai utilisé un Dividecomme suggéré dans cette réponse et j'y ai ajouté un .onTapGesture()pour changer la Dividercouleur, mais c'est un composant qui est intégré dans une autre vue.

Dans mon ContentViewj'ai un Buttonet mon UnderscoredTextFieldet ils sont contenus dans un HStacket il est contenu dans un Backgroundcomposant (tiré de this answer ) pour pouvoir rejeter le clavier par programme, mais j'aimerais pouvoir changer la @State var isActivevariable à l'intérieur du UnderscoredTextFieldquand cela arrive, mais comme je suis nouveau sur SwiftUI, je ne sais pas trop comment y parvenir.

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

Voici à quoi ça ressemble quand je cache le clavier, mais j'aimerais le remettre en gris

Answer 1

Si j'ai bien compris il suffit d'utiliser onEditingChanged, comme ci-dessous

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