SwiftUI View flickering when displaying it based on State with if-else - swift

Question

I want to display a certain form in the app based on a Picker selected value. However, when I switch using the segmented control fast enough (here it seems forced, but when the form is more complex it's very noticeable). Edit: this seems to be happening with all Views, not just forms.
import SwiftUI
struct ContentView: View {
#State private var calculationType = CalculationType.months
#State private var balanceOwned: String = ""
var body: some View {
VStack {
Picker("Calculation Type", selection: $calculationType) {
ForEach(CalculationType.allCases, id: \.self) {
Text($0.rawValue.capitalized)
}
}.pickerStyle(SegmentedPickerStyle())
// This check seems to be the cause of the problem!
if calculationType == .months {
CustomForm(balanceOwned: $balanceOwned)
} else if calculationType == .fixed {
CustomForm(balanceOwned: $balanceOwned)
} else {
CustomForm(balanceOwned: $balanceOwned)
}
}
}
}
struct CustomForm: View {
#Binding var balanceOwned: String
var body: some View {
Form {
Section {
TextField("Test", text: $balanceOwned)
.foregroundColor(.white)
}
}
}
}
enum CalculationType: String, CaseIterable {
case months
case fixed
case minimum
}
Whatever is inside the form flickers. How do I fix it?

Answer 1

You are facing structural identity problem, when dealing with conditions,
If you want to reuse same CustomForm and data can be populated based on balanceOwned, then need to preserve identity.
Either you give explicit identity or refactor structure to preserve structural identity of SwiftUI view.
Explicit Identity:
var body: some View {
....
Picker("Calculation Type", selection: $calculationType) {
ForEach(CalculationType.allCases, id: \.self) {
Text($0.rawValue.capitalized)
}
}
.onChange(of: calculationType, perform: pickerChange(_:))
.pickerStyle(SegmentedPickerStyle())
if calculationType == .months {
CustomForm(balanceOwned: $balanceOwned)
.id("11") // Common hashable explicit identity used.
} else if calculationType == .fixed {
CustomForm(balanceOwned: $balanceOwned)
.id("11")
} else {
CustomForm(balanceOwned: $balanceOwned)
.id("11")
}
...
}
Structural Identity:
var body: some View {
...
Picker("Calculation Type", selection: $calculationType) {
ForEach(CalculationType.allCases, id: \.self) {
Text($0.rawValue.capitalized)
}
}
.onChange(of: calculationType, perform: pickerChange(_:))
.pickerStyle(SegmentedPickerStyle())
CustomForm(balanceOwned: $balanceOwned) // Preserve structural identity
...
}
func pickerChange(_ type: CalculationType) {
switch type {
case .months:
balanceOwned = "Months"
case .fixed:
balanceOwned = "Fixed"
case .minimum:
balanceOwned = "Minimum"
}
}