创建可编辑的标签列表

Question

我正在尝试复制 Simplenote 使用其添加标签的功能所做的事情：您编写一个标签，按 space 或“下一步”，然后创建的标签周围有一个药丸。然后您可以使用相同的方法添加另一个标签。

例子

将每个标签显示为药丸是比较简单的部分：

//displaying the tags in a pil-like shape
@State var tags: [String] = []

HStack{
    ForEach(tags, id: \.self){tag in
        Button(action: {}) {
            HStack {
                Text(tag)
            }
        }
        .padding()
        .cornerRadius(.infinity)
    }
}

现在，添加新标签是我正在努力解决的问题。我尝试使用 TextField 但是，我不知道如何输入每个单词并将它们显示为同一行中的药丸。然后我尝试使用 HStack 希望建立一个列表或其他东西并水平显示单词，然后 TextField 紧挨着单词列表。

有人告诉我这不是代码编写服务，我不是找你写我的代码，我只是需要想法。我可以写代码，但我什至不知道如何开始思考这个问题。

谢谢

编辑：

我检查过：

https://www.hackingwithswift.com/books/ios-swiftui/adding-to-a-list-of-words

https://iosexample.com/tag/tags/

Implementing a tag list in SwiftUI

How can I make tag list in Swift?

和https://www.youtube.com/watch?v=_Tj6xp1DOj0

哦，还有

https://www.appcoda.com/learnswiftui/swiftui-gridlayout.html

https://swiftobc.com/repo/HappyIosDeveloper-SwiftUI-TagView-swift-ui

我知道如何显示标签，我只是不知道如何使用文本字段和标签共存的一行来创建它们。但我想 Stack Overflow 不是该问的地方，对吧？

Answer 1

创建了我自己的。它很野蛮而且有很多错误，但是嘿...... 添加和删除标签。不好看

NavigationView {
    VStack {
        TextEditor(text: $text)
        Spacer()

        Divider()
        HStack(alignment: .firstTextBaseline) {
            ForEach(tags, id: \.self) { tag in
                Button(action: {
                    removeTag(tag: tag)
                }) {
                    Text(tag)
                        .padding(1)
                        .lineSpacing(10)
                        .foregroundColor(.secondary)
                }
            }
            TextField("Tag...", text: $newTag).disableAutocorrection(true).onSubmit(addNewTag).submitLabel(.done)
        }
    }
}

// check if tag is already there
func isOriginal(word: String) -> Bool {
    !tags.contains(word)
}

// add new tag
func addNewTag() {
    // lowercase and trim the word, to make sure we don't add duplicate words with case differences
    let tagWord = newTag.lowercased().trimmingCharacters(in: .whitespacesAndNewlines)

    // exit if the remaining string is empty
    guard tagWord.count > 0 else { return }

    // exit if the tag was already used
    guard isOriginal(word: tagWord) else {
        newTag = ""
        return
    }

    tags.insert(tagWord, at: 0)
    newTag = ""
}

func removeTag(tag: String) {
    print("removing " + tag)
    if let index = tags.firstIndex(of: tag) {
        tags.remove(at: index)
        disabled = false
    }
}

创建可编辑的标签列表

Creating an editable list of tags

ios

swiftui