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

Question

我在 SwiftUI 中创建了一个文本字段和一个安全文本字段，但我不知道如何在 SwiftUI 中将图像添加到我的文本字段/安全文本字段中。SwiftUI 的在线文档并不像旧版本的 Swift 那样多。我还想将（占位符/输入文本）移动指定的数量，例如向右移动 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放在 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()
        }
    }
}