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

Question

在SwiftUI中，我有一个位于屏幕中心的TextField。 我想在其左侧立即添加一个铅笔图标，以指示它是可编辑的 - 我该如何做？ 我尝试过像这样将TextField和Image嵌入到HStack中：

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

但这只能产生类似于这样的东西： 其中文本框不再居中，而铅笔则对齐到屏幕的左侧。任何指导都将不胜感激。

- Nicolas Gimelli

---

如何使文本框居中？（不带图标） - ChrisR

Answer 1

应该可以了：

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

- ChrisR

---

这种方法是可行的，但如果文本长度足够长，它会覆盖铅笔图标。有什么解决办法吗？ - Nicolas Gimelli

你能分享一下包含TextField的完整代码吗？我不太清楚如何将它居中。 - ChrisR

它在一个垂直堆栈中，其对齐方式为.center。 - Nicolas Gimelli

这不会使TextField居中，因为TextField总是占据所有可用的宽度空间。你是否应用了一个框架？ - ChrisR

啊，我应该说明一下，这个文本框占据了整个宽度，我使用multilineTextAlignment(.center)将文本居中。我想出了一个有点奇怪的解决方案，根据输入文本的长度改变文本框的宽度，目前可以解决问题。 - Nicolas Gimelli

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

- cbear84