[英]I want to create custom toggle switch with animation color - swiftui
[英]SwiftUI toggle active / inactive line color on custom TextField
我正在尝试创建一个下面有一行的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")
}
}
这是我隐藏键盘时的样子,但我想将其切换回灰色
如果我理解正确,使用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)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.