SwiftUI mengubah warna garis aktif / tidak aktif pada TextField kustom

Aug 20 2020

Saya mencoba membuat TextFielddengan garis di bawahnya, untuk itu saya menggunakan Divideseperti yang disarankan dalam jawaban ini dan saya menambahkannya .onTapGesture()untuk mengubah Dividerwarna, namun itu adalah komponen yang disematkan di tampilan lain.

Di saya, ContentViewsaya punya Buttondan saya UnderscoredTextFielddan mereka terkandung di dalam a HStackdan itu terkandung di dalam Backgroundkomponen (diambil dari jawaban ini ) untuk dapat menutup keyboard secara terprogram, tetapi saya ingin dapat mengubah @State var isActivevariabel di dalam UnderscoredTextFieldsaat itu terjadi, tetapi karena saya baru mengenal SwiftUI, saya tidak begitu yakin bagaimana mencapai ini.

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

Ini adalah tampilannya saat saya menyembunyikan keyboard, tapi saya ingin mengubahnya kembali ke warna abu-abu

Jawaban

1 Asperi Aug 20 2020 at 00:56

Jika saya mengerti dengan benar maka cukup digunakan onEditingChanged, seperti di bawah ini

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