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，XCode11.6

这段代码对我有用。

注：- 视图外的黄色边框是背景视图颜色，在您的情况下不会出现。 Outer-most HStack 持有项目图像和文本字段的另一个 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)
                }

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

SwiftUI add image to left side of text field

uitextfield

swiftui