在 SwiftUI 中创建表单 UI

Question

我正在尝试编写一个基本的 UI 表单来捕获有关餐厅的详细信息。我将捕获以下详细信息：

"NAME"，占位符："Fill in the restaurant name"， "TYPE"，占位符："Fill in the restaurant type"， "ADDRESS"，占位符："Fill in the restaurant address"， "PHONE"，占位符："Fill in the restaurant phone"， "DESCRIPTION"，占位符："Fill in the restaurant description"，

我已经设计了基本的 TextField 模型，并对其进行了风格化，因为我将不得不在表单中的所有条目中重复使用这种风格（如上所述），我决定将代码放在 Struct 在不同的 SwiftUI 文件中。到这里为止一切都很好，因为数据在不同的文件中，我对在 ContentView 中重新使用这个 Struct 数据感到震惊。任何帮助或指导都会对我有很大帮助。

此外，这可能是一个愚蠢的问题，但是有没有什么方法可以在不使用 @State 变量的情况下创建 TextField？

import Foundation
import SwiftUI

struct LabelTextField: View {

    @State private var restaurant: String = ""

    var label: String
    var placeHolder: String

    var body: some View {
     VStack(alignment: .leading){
         Text("NAME")
                .font(.headline)
                 TextField("Enter Restaurant Name", text: $restaurant)
                 .padding(.all)
                 .background(Color(red: 239.0/255.0, green: 243.0/255.0, blue: 244.0/255.0, opacity: 1.0))
                 .cornerRadius (5.0)
         } .padding(.horizontal, 15)
 }
}

Answer 1

你快到了。您只需将所需的变量传递给 LabelTextField。而 TextField 需要一个 Binding 变量。我已经更新了您的代码以按预期运行。希望这可以帮助。编码愉快。

struct ContentView: View {
    @State private var restaurant: String = ""

    var body: some View {
        VStack {
            LabelTextField(label: "NAME", placeHolder: "Fill in the restaurant name", restaurant: $restaurant)
            Text("Restaurant name - \(restaurant)")
        }
    }
}

struct LabelTextField: View {
    var label: String
    var placeHolder: String
    @Binding var restaurant: String

    var body: some View {
        VStack(alignment: .leading) {
            Text(label)
                .font(.headline)
            TextField(placeHolder, text: $restaurant)
                .padding(.all)
                .background(Color(red: 239.0/255.0, green: 243.0/255.0, blue: 244.0/255.0, opacity: 1.0))
                .cornerRadius (5.0)
        }
        .padding(.horizontal, 15)
    }
}

在 SwiftUI 中创建表单 UI

Creating Form UI in SwiftUI

swift

swift5

swiftui