ios - 如何从结构 View 数组中提取状态？ SwiftUI

Question

我在从 SwiftUI 结构数组中获取状态时遇到问题。

我有一个包含 topText 和 bottomText 的卡片结构。我有另一个结构，它是输入组件(例如卡片)的表单。我将这些卡片存储在一个数组中，随着单击 + 按钮越来越多。在父 View 中，我对该数组有一个 foreach，因此它们可以动态呈现。

我在尝试从这些结构中提取状态值时遇到问题。这些卡片包含 topText 和 bottomText 的状态。当在父数组(存在卡片数组的位置)中单击保存按钮时，它会遍历卡片数组，并通过 get 方法打印它们的状态。但是，它不会打印这些卡片的当前状态。它打印一个空白字符串。我相信这种情况正在发生，因为当我附加结构时，它只是复制了一个死结构，而不是真正的有状态结构。

我的假设是否正确？或者这是 swiftUI 中的错误？有没有人对正确的方法有任何想法？我只想在单击按钮时从卡片中获取输入。但它需要是动态的，因为用户可以多次单击 + 按钮并继续制作更多卡片。

这是卡片结构的代码:

struct memeCard: View, Identifiable{
    @State private var topText = ""
    @State private var bottomText = ""

    let id = UUID()

    //  TODO: figure out how to make text wrap so it doesn't go on one line forever.

    var body: some View{
        VStack(spacing: 30){
            TextField("Top text...", text: $topText).multilineTextAlignment(.center)
            Divider()
            TextField("Bottom text...", text: $bottomText)
        }
        .frame(width: 300, height: 350, alignment: .center).multilineTextAlignment(.center)
        .background(Color.white)
        .cornerRadius(20)
        .shadow(color: Color.gray, radius: 4, x: 4, y: 4)
    }

    func getBottomText() -> String{
        return self.bottomText
    }

    func getTopText() -> String{
        return self.topText
    }
}

这是父 View :

struct CreateMemePage: View {
    @Environment(\.presentationMode) var presentation

    let realm = try! Realm()
    @State private var sectionInput = ""
    @State private var memeTitleInput = ""
    @State private var offsetValue: CGFloat = 0.0
    @State private var createCards: [memeCard] = [memeCard()]

    var body: some View {

NavigationView{
            VStack(spacing: 30){
                ScrollView{
                    TextField("Section...", text: $sectionInput)
                        .multilineTextAlignment(.center)
                        .frame(width: 350, height: 75, alignment: .center)
                        .background(Color.white)
                        .cornerRadius(15)
                        .shadow(color: Color.gray, radius: 4, x: 4, y: 4)

                    TextField("Meme Title...", text: $memeTitleInput)
                        .multilineTextAlignment(.center)
                        .frame(width: 350, height: 75, alignment: .center)
                        .background(Color.white)
                        .cornerRadius(15)
                        .shadow(color: Color.gray, radius: 4, x: 4, y: 4)


                    ForEach(0..<self.createCards.count, id: \.self){ item in
                        self.createCards[item].padding()
                    }

                    .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .center)
                }

                Button(action: {
                    self.createCards.append(memeCard())
                }) {
                    Image(systemName: "plus")
                        .accentColor(Color.white)
                        .frame(width: 50, height: 50, alignment: .center)
                        .background(LinearGradient(gradient: Gradient(colors: [ .red, .purple]), startPoint: .top, endPoint: .trailing))
                        .cornerRadius(60)
                        .shadow(color: Color.gray, radius: 2, x: 3, y: 3)
                }
            }
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .center)
            .keyboardSensible($offsetValue)

            .navigationBarTitle("Create meme")
            .navigationBarItems(trailing:
                Button(action: {

                 for item in createCards{
                     print(item.getBottomText())
                     print(item.getTopText())
              }
                }){
                    Text("Save")
                }
            )        }

    }

}

Answer 1

你需要知道如何使用ObservableObject , @ObservedObject , @State , 和 @Binding .

但为简单起见，让我们看看我们如何制作您的 memeCard功能起作用。

创建模型

class Model: ObservableObject {
    var topText: String = ""
    var bottomText: String = ""

    init(top: String, bottom: String) {
        self.topText = top
        self.bottomText = bottom
    }
}

在 memeCard 中使用模型实例看法。

struct memeCard: View, Identifiable{
    @ObservedObject var model = Model(top: "", bottom: "")

    let id = UUID()
    ...

接下来，我们绑定(bind)model textFields 的实例。

VStack(spacing: 30){
    TextField("Top text...", text: self.$model.topText).multilineTextAlignment(.center)
    Divider()
    TextField("Bottom text...", text: self.$model.bottomText)
}

然后我们可以使用现有的顶部和底部函数从模型类中提取数据，如下所示:

func getBottomText() -> String{
    print("BOTTOM: \(self.model.bottomText)")
    return self.model.bottomText
}

func getTopText() -> String{
    print("TOP: \(self.model.topText)")
    return self.model.topText
}

瞧!现在应该可以了。
这个答案来自另一个问题https://stackoverflow.com/a/57623488/3231194
应该能帮到你，写的很全面。