Question

我在SwiftUI中创建了一个文本字段和一个securetextfield，但是我不知道如何在SwiftUI中将图像添加到我的文本字段/安全文本字段中。与早期版本的Swift相比，SwiftUI的在线文档并不多。我还想将（占位符/在文本中键入）移至指定的数量，例如向右移动30点。我还尝试查看背景色是否会从白色变为红色，但是正如您所看到的，它在我的代码中对UI没有影响。

注意：我在代码的前面调用了GeometryReader以及用户名和密码的@state变量。

我的目标是使其看起来像这样，现在看起来像这样

            VStack (spacing: deviceSize.size.height * (50/812)) {
                TextField ("Username", text: self.$username)
                    .foregroundColor(.black)//text color when you type
                    .accentColor(.blue)//cursor color
                    .background(Color(.red))//????
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                    .cornerRadius(50)

                // .border(Color.white)
                //.font(.title)

                SecureField ("Password", text: self.$password)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                    .cornerRadius(50)

            }
            .padding(.init(top: 0, leading: deviceSize.size.width * (38/375), bottom: 0, trailing: deviceSize.size.width * (38/375)))

Answer 1

实现这种设计的最简单方法是将Image和TextField放在HStack中，并为其赋予一个四舍五入的背景。密码字段稍微复杂一些，因为它需要一个额外的Button，并且在隐藏/显示密码时，您需要在TextField和SecureField之间进行更改。这是我的看法：

struct ContentView: View {

    @State private var username = ""
    @State private var password = ""
    @State private var showPassword = false

    var body: some View {
        ZStack {
            Color.blue
            VStack {
                HStack {
                    Image(systemName: "person")
                        .foregroundColor(.secondary)
                    TextField("Username",
                              text: $username)
                }   .padding()
                    .background(Capsule().fill(Color.white))
                HStack {
                    Image(systemName: "lock")
                        .foregroundColor(.secondary)
                    if showPassword {
                        TextField("Password",
                        text: $password)
                    } else {
                    SecureField("Password",
                              text: $password)
                    }
                    Button(action: { self.showPassword.toggle()}) {

                        Image(systemName: "eye")
                        .foregroundColor(.secondary)
                    }
                }   .padding()
                    .background(Capsule().fill(Color.white))
            }   .padding()
        }
    }
}

Answer 2

我真的是 SwiftUI 的新手，但我找到了一个解决方法，我希望它不会在将来引起任何问题，否则这将是一个重要的教训。如果有人有任何建议，我也会很感激！ =]

我将 TextField 和图像嵌入到 ZStack 中，并将图像放入视图中并为视图添加了填充。

[
  {
    "operation": "modify-overwrite-beta",
    "spec": {
      "queryParams": {
        "lmt": "=firstElement(@(1,limit))",
        "limit": "=divide(@(1,lmt),2)"
      }
    }
  },
  {
    "operation": "shift",
    "spec": {
      "queryParams": {
        "limit": "&1.limit",
        "breakdowns": "&1.breakdowns"        
      },
      "body": "body"
    }
  }
]

Answer 3

我创建了一个名为 ASTextField 的可重复使用的SwiftUI文本字段，其工作原理类似于UIKit中的textField，您可以在其中添加 leftView 和 rightView 并可以处理与它们相关的事件。

您可以在gist上找到此实现。

这种消费方式：-

struct ContentView : View , ASTextFieldDelegate {

   let leftImage = UIImage(systemName: "calendar")
   let rightImage = UIImage(systemName: "eye")
   let rightImage1 = UIImage(systemName: "trash")

   @State var text : String? = "with simple binding"
   @State var text1 : String? = "with closure for right item"
   @State var text2 : String? = "for secure entry"

   var body: some View {
       VStack {
          Spacer()
           ASTextField(text: $text)

          Spacer()

          ASTextField(rightItem: rightImage1, leftItem: leftImage, handleLeftTap: {
            print("right icon tapped.....")
          }, delegate: self, text: $text1)

          Spacer()

          ASTextField(rightItem: rightImage, leftItem: leftImage, isSecuredEntry: true, delegate: self, text: $text2)

          Spacer()

      }
   }
}

Answer 4

“Introspect”对你有用

文本域() .introspectTextField { 文本字段在 textfield.rightViewMode = .unlessEditing textfield.rightView = UIImageView(image: UIImage(named: ImageCatalog.error.content)) }

在SwiftUI中将图像添加到TextField / SecureField中，在占位符文本中添加填充

4 个答案: