actionscript-3 - 使用 Flex 在文本区域上输入或删除标签

Question

我正在使用 Flex，我有一个文本区域，当我输入一些文本并点击键盘上的Space或Enter按钮时，我希望它创建一些带有X标记的设计，就像 Stack Overflow 标签部分一样。

如果我输入“Flex”并按空格或回车，它将添加Flex X. 然后，如果我单击十字标记 ( X)，“Flex”将从标签文本框中删除。

请帮助我处理这种类型的文本框或文本区域。

Answer 1

做到这一点并非易事。这是我几年前在电子邮件客户端上使用的方法。

创建一个自定义的“容器”类，它可以扩展Group(Flex 4) 或UIComponent(Flex 3)。此容器将有两种类型的子对象：一个TextInput表示标签或电子邮件地址的另一个对象。

最初容器只有一个孩子，TextInput其大小为容器宽度的 100%。有TextInput一个键盘事件监听器来检测用户何时按下Space或Enter“提交”地址并将其转换为“标签”对象。

当文本“提交”时，您：

• 删除输入到文本输入中的文本。
• 根据输入的文本创建“标签”并将其添加到容器中。将其添加到容器时，将其添加到文本输入的前面。
• 调整文本输入的大小，使其现在占据容器的剩余宽度。如果当前行的文本输入空间不足，则将文本输入放置在下一行的下方并再次使其宽度为 100%。

“tag”对象有一个“x”图标的事件监听器，当点击它时会导致标签从容器中移除。

在 Flex 4 中，您的容器类可以是 a Group，并且子文本输入和标记对象的所有大小/定位都可以通过自定义 Spark 布局来完成。如果您在 Flex 3 中执行此操作，那么大小/定位逻辑将是容器逻辑的一部分。在这两种情况下，您都应该使用适当的 Flex 生命周期方法来调整容器的子对象的大小/定位。