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

Question

我试图在 SwiftUI 中的文本字段左侧获取 SF 符号，但 SwiftUI 之前使用的方法并不起作用。我以为这段代码会起作用，但事实并非如此。另外，如果有人可以帮忙，我将如何更改文本字段中文本的字体和颜色？

这是我想要完成的任务的图像：https://i.sstatic.net/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 包含项目图像和 TextField 的另一个 HStack（内部 HStack）。到内部HStack 间隔（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)
                }

Answer 3

如果可以，我可能建议将您的

TextField

和其他输入封装在 SwuiftUI 的

Form

容器中，围绕您的

TextField

输入。这将为您提供一些“免费赠品”样式，使您寻找的东西变得更容易。例如，在 iOS 和 iPadOS 中，

Form

包装器将每个元素呈现为具有 .grouped 样式的列表中的项目。 （对于 macOS 来说有点不同。）

这是我用来实现您正在寻找的风格的方法。需要注意的是：SF 符号的宽度并不统一，因此您需要显式设置框架尺寸和填充以使所有内容完美排列。

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

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

Answer 5

我知道问题已经得到解答，但如果您想在 TextField 中添加左图像作为提示文本，您只需一行代码即可通过在其中连接系统图标来实现这一目标。请参阅下面我的代码。

                    TextField("\(Image(systemName: "magnifyingglass")) Search topic...", text: $searchText)

结果