如何将 TextField 中的更改传达给另一个兄弟视图（Swift UI、Xcode 11.5、macOS Catalina）

Question

I have a parent View which is showing two subView. See attached image.

I expect user to enter height and weight in View 1. As and when the value of either height or weight changes in View 1, I want the View2 to automatically reflect the value of BMI (body mass index) which is weight / (height * height)

For this parent view I have tried multiple option but none working in iOS Simulator

Option 1

1. I created two state variable in parent view and passed their binding to both View1 and View2
2. I have then bind-ed two TextField in View1 to them
3. In View2 I set the text to be a function calcBMI which uses height and weight.

In Overall View

@State var height: Float = 1.2
@State var weight: Float = 98.0

VStack{
View1(height : $height, weight: $weight)
View2(height : $height, weight: $weight)
}

In View1

@Binding var height: Float
@Binding var weight: Float

TextField("Height", value: $height, formatter: NumberFormatter())
TextField("Weight", value: $weight, formatter: NumberFormatter())

In View2

 @Binding var height: Float
 @Binding var weight: Float

 Text("Your BMI \(calcBMI())")

 private fund calcBMI(){
  return height <= 0 ? 0.0 : weight / (height * height)
 }

Only initial value of 68.05 is getting displayed in BMI in Simulator but post this if I change the value of height and/or weight in View1 that doesn't propagate to View2. The BMI stays 68.05 no matter what I change in View1

Question: Isn't the binding from TextField should have send back the state value to Overall View and from there View2 should have picked the changes and reflect the latest value of BMI as and when user typing changes? ie TextField changes -> affecting Parent's State??

Any clue what is missing here?

Option 2

I tried encapsulating height and weight in a class and making it ObservableObject and marked @Published to height and weight. I then injected same instance of this class into View1 and View2 via Overall View. I bind-ed the height and weight in View1 to the instance property of ObservedObject but that also didn't work. No change is propagated from View1 -> Parent -> View2.

import Foundation
import Combine

class BodyStats: ObservableObject{
   @Published var height: Float
   @Published var weight : Float
}

Overall View

@State var bodySt = BodyStats(height: 1.2, weight: 98.0)

View1(bodyST : $self.bodySt)
View2(bodyST : $self.bodySt)

View1

@ObserverdObject var bodyST : BodyStats

TextField("Height", value: $bodyST.height, formatter: NumberFormatter())
TextField("Weight", value: $bodyST.weight, formatter: NumberFormatter())

View2

@ObserverdObject var bodyST : BodyStat
 Text("Your BMI \(calcBMI())")

 private fund calcBMI(){
  return bodyST.height <= 0 ? 0.0 : bodyST.weight / (bodyST.height * bodyST.height)
 }

Overall all I need to capture value from TextField in View1 and then pass down to View 2 for calculation on real time (as user is typing). I believe we can do this in SwiftUI but not able to get my head around the right communication pattern.

Answer 1

I assume that the reason is in putting calculation result in completely in separated function, and such hiding dependency from renderer.

Try something like the following (second option looks more appropriate for your goal).

 @ObserverdObject var bodyST : BodyStat

 var body: some View {
    // leave dependency on ObservedObject in body
    Text("Your BMI \(calcBMI(bodyST.weight, bodyST.height))")
 }

 private fund calcBMI(_ weight: Float, _ height: Float) {
  return height <= 0 ? 0.0 : weight / (height * height)
 }

Answer 2

What I found is that if data is bound to value attribute of TextField then user's typing into TextField is never synced into bounded variable. So below doesn't work.

@Binding var height: Float
TextField("Height", value: @height, formatter: NumberFormatter())

Below works perfectly

@Binding var height: String
TextField("Height", text: @height)

So in nutshell as long as TextField is bound to a String type variable I got it working both in Option 1 and Option 2. To me it looks like this is a bug in TextField's binding behaviour when variable is bound to value: attribute. The compromise is to declare the holding variable as String even though the underlying value is numeric.

Overall below is how I was able to get it working

import Foundation
import Combine

class BodyStats: ObservableObject{
   @Published var height: String
   @Published var weight : String

   func getBMI() -> Float{
        if let height = Float(self.height), let weight = Float(self.weight){
            return height <= 0.0 ? 0.0 : weight / (height * height)
        }

        return 0.0
    }

Overall View

@ObservedObject var bodySt = BodyStats(height: "1.2", weight: "98.0")

View1(bodyST : bodySt)
View2(bodyST : bodySt)

In View 1

@ObserverdObject var bodyST : BodyStats

TextField("Height", text: $bodyST.height)
TextField("Weight", text: $bodyST.weight)

In View 2

@ObserverdObject var bodyST : BodyStat
Text("Your BMI \(bodyST.getBMI())")