防止 SwiftUI 重置 @State

Question

我通常不明白 SwiftUI 何时重置视图的状态（即所有标记为 @State 的）。例如，看看这个最小的例子：

import SwiftUI

struct ContentView: View {
    @State private var isView1Active = true
    let view1 = View1()
    let view2 = View2()

    var body: some View {
        VStack {
            if isView1Active {
                view1
            } else {
                view2
            }

            Button(action: {
                self.isView1Active.toggle()
            }, label: {
                Text("TAP")
            })
        }
    }
}

struct View1: View {
    @State private var text = ""
    var body: some View {
        TextField("View1: type something...", text: $text)
    }
}

struct View2: View {
    @State private var text = ""
    var body: some View {
        TextField("View2: type something...", text: $text)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

我希望这两个TextField保留他们的内容，但是如果你运行这个例子，会发生一些奇怪的行为：

• 如果您在预览上运行示例，则仅View1 TextField内容仍然存在：

• 相反，如果您在模拟器（或实际设备）上运行该示例，则第一个文本字段内容和第二个文本字段内容均不存在：

那么，这里发生了什么？有没有办法告诉 SwiftUI 不要为视图重置 @State？谢谢。

Answer 1

问题是View1和View2每次更改时都会重新创建isView1Active（因为它正在使用@State它重新加载 的主体ContentView）。

解决方案是保留 s 的文本属性，TextField如下ContentView所示并使用@Binding：

struct ContentView: View {

    @State private var isView1Active = true
    @State private var view1Text = ""
    @State private var view2Text = ""

    var body: some View {
        VStack {
            if isView1Active {
                View1(text: $view1Text)
            } else {
                View2(text: $view2Text)
            }

            Button(action: {
                self.isView1Active.toggle()
            }, label: {
                Text("TAP")
            })
        }
    }
}

struct View1: View {

    @Binding var text: String

    var body: some View {
        TextField("View1: type something...", text: $text)
    }
}

struct View2: View {

    @Binding var text: String

    var body: some View {
        TextField("View2: type something...", text: $text)
    }
}

行动中显示：