SwiftUI：如何将图标对齐到居中文本字段的左侧？

Question

我在 SwiftUI 中有一个位于屏幕中央的 TextField。我想立即添加一个铅笔图标。在它的左边表示它是可编辑的——我该怎么做？我试过像这样在 HStack 中嵌入 TextField 和 Image：

HStack {
  Spacer()
  Image(systemName: "pencil")
  TextField(...)
}

但这只会产生这样的结果：其中文本字段不再居中并且铅笔与屏幕左侧对齐。

感谢任何指导。

Answer 1

应该这样做：

        TextField("", text: $input)
            .overlay(alignment: .leading) {
                Image(systemName: "pencil")
                    .offset(x: -24, y: 0)
            }

Answer 2

struct CustomTextFieldView: View {
     @State private var text: String = ""
    
     var body: some View {
        VStack(alignment: .leading) {
            textfeild
                .padding()
        }
    }
    var textfeild: some View {
        HStack {
            Image(systemName: "pencil")
            TextField("Edit me!", text: $text)
        }
        .textFieldStyle(DefaultTextFieldStyle())
    }
}

struct CustomTextFieldView_Previews: PreviewProvider {
    static var previews: some View {
        CustomTextFieldView()
    }
}

SwiftUI：如何将图标对齐到居中文本字段的左侧？

SwiftUI: How to align icon to left side of centered text field?

swiftui

icons

textfield