MacOs 中带标签的 SwiftUI TextField 或 UITextField

Question

我正在尝试复制 macOs Mail.app 正在执行的行为，当您使用搜索栏搜索电子邮件时，它允许您在字段内添加“标签”。该标签变成一个按钮，您可以将其删除，在其周围键入内容，然后单击它。

查看文档或第三方库没有结果。

我有一个想法，试图实现类似于 ButtonStyle 的 TextFieldStyle，一开始看起来很有希望，但也被困在那里。

struct TaggedTextFieldStyle: TextFieldStyle {
  func makeBody(configuration: Configuration) -> some View {
    // Parse body, and find tags
    ForEach(parts){
      if(parts.isTag){
        Text(parts.value)
      } else {
         TextField(
            "Part",
            text: $parts.value
        )
      }
    }
    .padding()
    .background(Color.yellow.cornerRadius(8))
  }
}

我没能用那种方式让它工作。有没有办法以这种方式实现这一目标？

Answer 1

总之，玩了一下，找到了方法（多亏了这个Whosebug question

基本上，我有一个 TextField 附加了一个 ViewModifier。看起来像这样：

TextField(
 "Placeholder",
 text: .constant("Text")
)
.modifier(TextFieldModifier(text: "TextOverlayWithExtra"))

修饰符：

struct TextFieldModifier: ViewModifier {
    
    var text: String
    
    func body(content: Content) -> some View {
        content
            // Clear color for the TextField
            .foregroundColor(.clear)
            // Overlay with text and extra
            .overlay(
                HStack(spacing: 0.0) {
                    // This Swift View splits the text and adds what I need
                    TextFieldHighlightedVariables(text)
                    Spacer()
                }
                    .padding(.top, 2)
                    .padding(.leading, 4)
                ,
                alignment: .topLeading
            )
    }
}

MacOs 中带标签的 SwiftUI TextField 或 UITextField

SwiftUI TextField or UITextField with tag in MacOs

textfield

swift

swiftui