SwiftUI动态视图实例文本数据提取与传递问题求助

问题场景 #

为供应商搭建数据录入表单时，封装了DataFieldView组件复用布局，但遇到两个核心问题：

• 无法将每个DataFieldView实例的用户输入传递到客户预览界面
• 无法将输入内容同步到数据库
  当前代码中，DataFieldView用内部@State管理输入文本，父组件EntryView无法捕获用户修改后的动态内容，只能拿到初始值。

解决方案：使用ObservableObject封装数据模型 #

这种方式适合多字段场景，代码结构更整洁，便于后续维护和扩展。

步骤1：定义数据模型与ViewModel #

创建遵循ObservableObject的ViewModel类，用@Published标记需要监听的字段，确保数据变化时自动通知视图更新：

import SwiftUI
import Combine

// 存储表单字段的结构体
struct ContactInfo {
    var name: String = ""
    var email: String = ""
    var addressLine1: String = ""
    var addressLine2: String = ""
    var city: String = ""
    var state: String = ""
    var zipCode: String = ""
}

// 管理表单状态的ViewModel
class ContactViewModel: ObservableObject {
    @Published var contact = ContactInfo()
}

步骤2：修改DataFieldView，改用@Binding绑定外部状态 #

移除组件内部的@State var enteredText，替换为@Binding接收外部传递的状态，实现双向绑定：

struct DataFieldView: View {
    var title: String = ""
    var subtitle: String?
    var placeholder: String = "" // 优化变量名，语义更清晰
    @Binding var text: String // 绑定外部状态
    
    var body: some View {
        VStack(alignment: .leading) {
            Text(title)
                .font(.title2)
                .italic()
                .padding(.leading, 10)
            TextField(placeholder, text: $text)
                .padding()
                .frame(width: 350)
                .background(Color(red: 0.8, green: 0.8, blue: 0.8))
                .cornerRadius(10)
                .foregroundColor(.black)
                .font(.headline)
            // 安全解包subtitle，避免强制解包崩溃
            if let subtitle = subtitle {
                Text(subtitle)
                    .font(.body)
                    .foregroundColor(Color(red: 0.3, green: 0.3, blue: 0.3))
                    .padding(.leading,10)
            }
        }
    }
}

步骤3：修改EntryView，绑定ViewModel字段 #

在父组件中初始化ViewModel，将每个DataFieldView的输入框与ViewModel对应的字段绑定，同时添加预览和保存逻辑：

struct EntryView: View {
    @StateObject private var viewModel = ContactViewModel()
    @State var genContShow: Bool = true

    var body: some View {
        ScrollView {                
            VStack(alignment:.leading, spacing: 20) {
                Text("General and Contacts")
                    .font(.title)
                    .multilineTextAlignment(.leading)
                    .padding(.bottom, 15)
                if genContShow {
                    DataFieldView(title: "Name", placeholder: "Enter name", text: $viewModel.contact.name)
                    DataFieldView(title: "Email Address", placeholder: "Enter email", text: $viewModel.contact.email)
                    DataFieldView(title: "Address Line 1", placeholder: "Enter address line 1", text: $viewModel.contact.addressLine1)
                    DataFieldView(title: "Address Line 2", placeholder: "Enter address line 2 (optional)", text: $viewModel.contact.addressLine2)
                    DataFieldView(title: "City", placeholder: "Enter city", text: $viewModel.contact.city)
                    DataFieldView(title: "State", placeholder: "Enter state", text: $viewModel.contact.state)
                    DataFieldView(title: "ZIP Code", placeholder: "Enter ZIP code", text: $viewModel.contact.zipCode)
                        .padding(.bottom, 50)
                }
            }
            .padding()
        }
        .toolbar {
            // 预览按钮：传递数据到预览界面
            Button("Preview") {
                print("Preview data: \(viewModel.contact)")
                // 此处可添加跳转预览界面的逻辑，传入viewModel.contact
            }
            // 保存按钮：同步数据到数据库
            Button("Save to DB") {
                saveContactToDatabase(contact: viewModel.contact)
            }
        }
    }
    
    // 模拟数据库保存方法，根据实际需求替换为真实逻辑
    private func saveContactToDatabase(contact: ContactInfo) {
        print("Saved contact: \(contact)")
        // 比如调用Core Data、Firebase等数据库API
    }
}

方案优势 #

• @ObservableObject + @Published 自动管理状态变化，视图会实时响应输入更新
• @Binding 建立子组件与父组件的双向绑定，用户输入直接同步到ViewModel
• 所有字段集中在ContactInfo模型中，方便一次性传递到预览界面或数据库，避免单独处理每个字段

备选方案：单独使用@Binding变量（适合少量字段） #

如果表单字段较少，也可以在EntryView中为每个字段定义独立的@State变量，直接绑定到DataFieldView：

struct EntryView: View {
    @State var name: String = ""
    @State var email: String = ""
    @State var addressLine1: String = ""
    // 其他字段...
    @State var genContShow: Bool = true

    var body: some View {
        ScrollView {                
            VStack(alignment:.leading, spacing: 20) {
                // ...
                DataFieldView(title: "Name", placeholder: "Enter name", text: $name)
                DataFieldView(title: "Email Address", placeholder: "Enter email", text: $email)
                // 其他字段绑定...
            }
        }
        .toolbar {
            Button("Save") {
                let contact = ContactInfo(name: name, email: email, /* 填充其他字段 */)
                saveContactToDatabase(contact: contact)
            }
        }
    }
}

这种方式代码更直观，但字段增多时会出现冗余，不如ViewModel模式易维护。

内容的提问来源于stack exchange，提问作者AzAzinZ