SwiftUI สลับสีของเส้นที่ใช้งานอยู่ / ไม่ใช้งานบน TextField ที่กำหนดเอง

Aug 20 2020

ฉันพยายามสร้างTextFieldโดยมีบรรทัดด้านล่างเพราะฉันใช้ a Divideตามที่แนะนำในคำตอบนี้และฉันเพิ่ม a .onTapGesture()เพื่อเปลี่ยนDividerสี แต่นั่นเป็นส่วนประกอบที่ฝังอยู่ในมุมมองอื่น

ในของContentViewฉันฉันมีButtonและของฉันUnderscoredTextFieldและมีอยู่ใน a HStackและมีอยู่ในBackgroundส่วนประกอบ (นำมาจากคำตอบนี้ ) เพื่อให้สามารถปิดแป้นพิมพ์โดยใช้โปรแกรมได้ แต่ฉันต้องการที่จะสามารถเปลี่ยน@State var isActiveตัวแปรภายในUnderscoredTextFieldเมื่อนั้น เกิดขึ้น แต่เมื่อฉันเพิ่งเริ่มใช้ 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 Asperi Aug 20 2020 at 00:56

ถ้าฉันเข้าใจถูกต้องก็เพียงพอที่จะใช้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)
    }
}