Why does the interface twitch when changing the state variable? - ios

Question

Content view:
#State var login: String = ""
#State var password: String = ""
#State var isLoginTextViewActive = false
#State var isPasswordTextViewActive = false
VStack {
TextField("Login", text: $login, onEditingChanged: { isEditing in
print(isEditing)
self.isLoginTextViewActive = isEditing
}
)
TextField("Password", text: $password)
HorizontalLine(color: isLoginTextViewActive ? Color.yellow : Color.black, height: CGFloat(1))
}.frame(width: CGFloat(200), alignment: .center)
Line code:
struct HorizontalLineShape: Shape {
func path(in rect: CGRect) -> Path {
let fill = CGRect(x: 0, y: 0, width: rect.size.width, height: rect.size.height)
var path = Path()
path.addRoundedRect(in: fill, cornerSize: CGSize(width: 2, height: 2))
return path
}
}
struct HorizontalLine: View {
private var color: Color? = nil
private var height: CGFloat = 1.0
init(color: Color, height: CGFloat = 1.0) {
self.color = color
self.height = height
}
var body: some View {
HorizontalLineShape().fill(self.color!).frame(minWidth: 0, maxWidth: .infinity, minHeight: height, maxHeight: height)
}
}
When you change the focus between "TextView", they begin to twitch as if due to a change in height. I checked, every time the line initializer is called, but what to do with it I do not know.

Answer 1

This happens because there is a bug with the font size in textfields currently. If you set your font size manually for example 20, it will work like you want.
var body: some View {
VStack {
TextField("Login", text: $login, onEditingChanged: { isEditing in
print(isEditing)
self.isLoginTextViewActive = isEditing
})
.font(.system(size: 20, weight: .medium, design: .default)) // SET SIZE
TextField("Password", text: $password)
.font(.system(size: 20, weight: .medium, design: .default)) // SET SIZE
Rectangle()
.frame(height: 1)
.foregroundColor(isLoginTextViewActive ? Color.yellow : Color.black)
}.frame(width: CGFloat(200), alignment: .center)
}