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

发布于 2025-01-10 00:49:43 字数 409 浏览 1 评论 0原文

我在 SwiftUI 中有一个位于屏幕中央的 TextField。我想立即添加一个铅笔图标。它的左侧表明它是可编辑的 - 我该如何做到这一点？我尝试将 TextField 和 Image 嵌入到 HStack 中，如下所示：

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

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

任何指导表示赞赏。

原文

I've got a TextField in SwiftUI that is centered on the screen. I want to add a pencil icon immediately. to the left of it to indicate that it is editable - how can I do this? I've tried embedding both the TextField and Image in an HStack like this:

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

But that only yields something like this:
where the textfield is no longer centered and the pencil is aligned to the left of the screen.

Any guidance is appreciated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

安人多梦 2025-01-17 00:49:43

这应该可以做到：

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

this should do it:

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

回复收藏 0 原文

提笔书几行 2025-01-17 00:49:43

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

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

回复收藏 0 原文

~没有更多了~