8

我在 SwiftUI 中创建了一个文本字段和一个安全文本字段，但我不知道如何在 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)))
4

4 回答 4

13

实现这种设计的最简单方法是将ImageandTextField放在 a 中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()
        }
    }
}

生成的用户名和密码字段

于 2019-11-26T20:34:05.150 回答
2

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

我将 TextField 和图像嵌入到 ZStack 中，然后将图像放入 View 中并为视图提供填充。

struct FormInputBox: View {

@State private var text: String = ""
@State private var textFieldState: TextFieldState = .empty

private var textFieldType: TextFieldType
private var textViewPlaceholder = ""

init(placeholder: String,
     textFieldType: TextFieldType) {
    self.textViewPlaceholder = placeholder
    self.textFieldType = textFieldType
}

var body: some View {
    ZStack(alignment: Alignment(horizontal: .trailing, vertical: .center), content: {
        TextField(textViewPlaceholder, text: $text)
            .textFieldStyle(MyTextFieldStyle(textFieldState: $textFieldState))
        AnyView(
            Image("tick")
                .resizable()
                .frame(width: 20, height: 20, alignment: .leading)
        )
            .padding(32)
        
    })
}

这就是它的样子

于 2021-04-20T21:25:01.807 回答
0

我创建了一个名为ASTextField的可重用 SwiftUI 文本字段，其工作方式类似于 UIKit 中的 textField，您可以在其中添加 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()

      }
   }
}
于 2020-05-13T15:24:47.253 回答
0

“内省”会为你工作

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

于 2021-05-03T09:07:48.320 回答