SwiftUI将图像添加到文本字段左侧

Question

我试图在SwiftUI中的文本字段左侧放置一个SF符号，但以前使用的方法在SwiftUI中不起作用。我认为这段代码会起作用，但事实并非如此。如果有人能帮忙，我该如何更改文本字段中文本的字体和颜色？

这是我想要实现的效果的图片：https://istack.dev59.com/Dud0M.webp

TextField(textFieldDescription, text: 
                .constant(""))
                .padding(.all)
                .background(textFieldBackground)
                .cornerRadius(10)
                .leftViewMode = Image(systemName: "lock").always
                .leftViewMode = .always

- user7817604

Answer 1

以下是一个实现方式。请注意，如果文本框的初始文本为空，则会存在一个错误，即颜色和字体设置将被忽略：

这里是一种实现方法。请注意，如果文本框的初始文本为空，将会出现一个 bug，导致颜色和字体设置无法生效：

HStack {
    Image(systemName: "lock")
    TextField("", text: .constant("typed text")).foregroundColor(Color.red).font(Font.custom("Papyrus", size: 16))
}
.padding()
.overlay(RoundedRectangle(cornerRadius: 10).stroke(lineWidth: 2).foregroundColor(Color.black))

- kontiki

---

非常感谢！如果我尝试使用自定义字体，那也可以吗？ - user7817604

不客气。是的，它可以使用不同的字体。虽然与颜色相同的错误也适用。我更新了答案。 - kontiki

抱歉，最后一个问题，我很确定这是一个bug，但如果我为文本字段添加提示文本，它不会适应样式。 - user7817604

这很可能是一个bug，因为它根本没有任何意义。 - kontiki

Answer 2

SwiftUI，XCode 11.6

这段代码对我很有效。

注意： 视图外的黄色边界是背景视图颜色，在您的情况下不会出现。最外层的 HStack 包含另一个 HStack（内部 HStack），其中包含项目图像和 TextField。在内部 HStack 中添加 Spacer(minLength: 20) 可以远离屏幕边缘。

HStack {
                        Spacer(minLength: 20)
                        HStack (alignment: .center,
                                spacing: 10) {
                                    Image("userName")
                                        .resizable()
                                        .frame(width: 30, height: 30, alignment: .center)
                                        .foregroundColor(.black)
                                        
                                        .frame(minWidth: 0, maxWidth: 30)
                                        .frame(minHeight: 0, maxHeight: 33)
                                    
                                    TextField ("User Name", text: $userName)
                        }  // HSTack
                            .padding([.top,.bottom], 2)
                            .padding(.leading, 5)
                            .background(Color.white, alignment: .center)
                            .cornerRadius(5)
                        Spacer(minLength: 20)
                }

- Pratik

Answer 3

如果可以的话，我建议将您的TextField和其他输入内容封装在SwiftUI的Form容器中，以围绕您的TextField输入提供一些“免费”的样式，这可以使您正在寻找的内容更加容易。例如，在iOS和iPadOS中，Form包装器将每个元素呈现为List中的项目，并具有.grouped样式。（对于macOS来说有点不同。）

以下是我用来实现您要查找的样式的代码。需要注意的是，SF Symbols在宽度上并不统一，因此您需要显式设置框架尺寸和填充以使所有内容完美对齐。

        Form {
            HStack{
                Image(systemName:"envelope")
                // play with the frame and padding here 
                TextField("Email Address", text: $email)
            }
            HStack{
                Image(systemName:"lock")
                SecureField("Password", text: $password)
            }
        }

- David Lowry Whitt

Answer 4

这是我的使用ZStack实现的代码：

ZStack(alignment: .trailing) {
                                TextField("", text: $text)
                                    .font(Font.system(size: 21))
                                Button(action: {
                                    //Some button action
                                }) {
                                    Image("iconName").resizable()
                                }
                                .frame(width: 35, height: 35)
                                .padding(.trailing, 10)
                            }

- Kenan Begić