UITextFields 未显示在结构中，如何解决？答案

【问题标题】：UITextFields not displaying in struct, how to fix?UITextFields 未显示在结构中，如何解决？
【发布时间】：2020-08-18 18:34:44
【问题描述】：

我试图在我的应用程序上使用某种类型的提交表单，但由于某种原因我无法放置 UItextfields。我在这个结构的开头声明了它们，但是在显示时我得到了错误：

“类型'()'不能符合'View'；只有结构/枚举/类类型可以符合协议”

import SwiftUI
import UIKit

/// Shows a list of inspiring quotes/bio
struct FeatureView: View {
    
    @State private var userEmail: UITextField = UITextField(frame: CGRect(x:10, y:320, width:300.00, height:30.00))
    
    private var instagramName: UITextField = UITextField(frame: CGRect(x:10, y:320, width:300.00, height:30.00))
    
    var body: some View {
        VStack {
            HStack {
                VStack(alignment: .leading) {
                    Text("Get Featured").font(.largeTitle).bold()
                    Spacer()
                    Text("1. Submit your information below")
                    Spacer()
                    Text("2. On the 1st and 14th we choose a new account to feature")
                    Spacer()
                    Text("3. Get notified by e-mail if your account is chosen!")
                    Spacer()
                }
                Spacer()
                userEmail.placeholder = "email"
                userEmail.addSubview(userEmail)
            }.padding(EdgeInsets(top: 20, leading: 20, bottom: 0, trailing: 20))
            
        }
    }
}

我现在只是想显示和编辑一个电子邮件字段，但最终我想要 5-6 个不同的字段，它们都包含我最终可以让用户提交的信息

【问题讨论】：

使用 SwiftUI TextField 而不是尝试混合两种不同的界面风格怎么样？
只是一个小提示：您不需要导入 SwiftUI 和 UIKit，因为 SwiftUI 已经包含 UIKit...

标签： ios swift xcode uitextview

【解决方案1】：

你必须使用TextField。如果要使用UIKit，则必须将UITextField 包装成UIViewRepresentable。

这里是如何使用TextField，您需要创建两个@State 属性来跟踪每个TextField 的文本：

import SwiftUI

/// Shows a list of inspiring quotes/bio
struct FeatureView: View {

    @State private var emailText: String = ""
    @State private var instagramNameText: String = ""

    var body: some View {
        VStack {
            HStack {
                VStack(alignment: .leading) {
                    Text("Get Featured").font(.largeTitle).bold()
                    Spacer()
                    Text("1. Submit your information below")
                    Spacer()
                    Text("2. On the 1st and 14th we choose a new account to feature")
                    Spacer()
                    Text("3. Get notified by e-mail if your account is chosen!")
                    Spacer()
                }
                Spacer()
            }.padding(EdgeInsets(top: 20, leading: 20, bottom: 0, trailing: 20))

            VStack {
                TextField("Email", text: $emailText)
                    .frame(width: 300, height: 30)
                    .padding(.leading, 10)
                TextField("Instagram name", text: $instagramNameText)
                    .frame(width: 300, height: 30)
                    .padding(.leading, 10)
            }
        }
    }
}

以下是使用UIViewRepresentable 包装它以使用UITextField 的方法：

import SwiftUI

/// Shows a list of inspiring quotes/bio
struct FeatureView: View {

    private let emailTextField = CustomWrappedTextField(customPlaceholder: "Email")
    private let instagramTextField = CustomWrappedTextField(customPlaceholder: "Instagram name")

    var body: some View {
        VStack {
            HStack {
                VStack(alignment: .leading) {
                    Text("Get Featured").font(.largeTitle).bold()
                    Spacer()
                    Text("1. Submit your information below")
                    Spacer()
                    Text("2. On the 1st and 14th we choose a new account to feature")
                    Spacer()
                    Text("3. Get notified by e-mail if your account is chosen!")
                    Spacer()
                }
                Spacer()
            }.padding(EdgeInsets(top: 20, leading: 20, bottom: 0, trailing: 20))

            VStack {
                emailTextField
                instagramTextField
            }
        }
    }
}

final class CustomWrappedTextField: UIViewRepresentable {

    typealias UIViewType = UITextField

    let customPlaceholder: String

    init(customPlaceholder: String) {
        self.customPlaceholder = customPlaceholder
    }

    func makeUIView(context: Context) -> UITextField {

        let customTextField = UITextField(frame: CGRect(x: 10, y: 320, width: 300.00, height: 30.00))

        customTextField.placeholder = customPlaceholder

        return customTextField
    }

    func updateUIView(_ uiView: UITextField, context: Context) {

    }
}

【讨论】：