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

Question

我正在尝试在SwiftUI的文本字段的左侧获取一个SF符号，但是SwiftUI之前使用的方法并没有真正起作用。我以为这段代码可以用，但是没有用。另外，如果有人可以提供帮助，我该如何更改文本字段中文本的字体和颜色？

这是我要完成的工作的图片：https://i.stack.imgur.com/Dud0M.png

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

Answer 1

这是一个实现。请注意，有一个错误，如果文本字段的初始文本为空，则颜色和字体设置将被忽略：

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))

Answer 2

SwiftUI，XCode 11.6

此代码对我有用。

注意：- 视图外部的黄色边框是背景视图颜色，在您的情况下不会出现。最外面的HStack包含另一个image和TextField的HStack（内部HStack）。到内部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)
                }