创建一个@State var 区域，即基于两个@State var 宽度，一个@State var 高度

Question

如何将多个状态变量组合成另一个？

我想通过一些用户交互来更改高度或宽度的值，并相应地更新视图中的所有内容。所以高度或宽度会改变，面积也会改变。

我想它看起来像这样

@State var width: CGFloat = 50.0
@State var height: CGFloat = 100.0


@State var area: CGFloat // somehow equal to width*height

当前的解决方案只是调用一个函数

func area() -> CGFloat {
  width * height
}

Answer 1

不要area@State;只需将其设为计算变量即可：

@State var height: CGFloat = 50.0
@State var width: CGFloat = 100.0
var area: CGFloat {
    width * height
}
var body: some View {
    VStack {
        Text("Width: \(width)")
        Text("Height: \(height)")
        Text("Area \(area)")
        Button(action: {
            self.height *= 2
        }) {
            Text("Double height")
        }
        Button(action: {
            self.width += 10
        }) {
            Text("Add 10 to width")
        }
    }
}

我添加了一些代码来说明如果width 或height 更改，area 也会更改，因为width 或height 更改会导致视图被重绘，因为它们是@State。由于计算了area，因此当重绘视图时，area 被确定为更新后的width 和height 值的乘积。不过，像您在当前解决方案中所说的那样将其作为一个函数也应该可以工作。

如果您希望 area 成为 @State 以便您可以将其作为 Binding 传递给其他视图，请执行以下操作：

struct ContentView: View {
@State var height: CGFloat = 50.0
@State var width: CGFloat = 100.0
var area: Binding<CGFloat> {
    Binding(get: {
        self.height * self.width
    }) { (newVal) in

    }
}
var body: some View {
    VStack {
        Text("Width: \(width)")
        Text("Height: \(height)")
        Text("Area \(area.wrappedValue)")
        BindingView(num: area)
        BindingView(num: $height)
        Button(action: {
            self.height *= 2
        }) {
            Text("Double height")
        }
        Button(action: {
            self.width += 10
        }) {
            Text("Add 10 to width")
        }
    }
}

struct BindingView: View {
    @Binding var num: CGFloat
    var body: some View {
        Text("Binding number: \(num)")
    }
}

我创建了BindingView 作为如何以不同方式使用绑定的示例。对于@State 变量，您可以通过添加$ 前缀有效地将它们转换为Binding，但由于区域明确为Binding，因此您不需要$。同样要访问Binding 中的值，您只需执行变量.wrappedValue。