输入或删除文本区域的标签使用Flex

Question

我使用Flex和我有一个文本区域，当我输入一些文字，并击中了空间或在键盘上输入按钮，我希望它使用X标记创建一些设计，就像Stack Overflow标签部分一样。

如果我输入“Flex”并点击空格或输入，则会添加Flex X。然后，如果我点击十字标记（X），将从标签文本框中删除“Flex”。

请帮我该怎么做这种类型的文本框或文本区域。

Answer 1

这样做并非微不足道。这是几年前我在电子邮件客户端上使用的方法。

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

最初容器只有一个孩子，其尺寸为容器宽度的100％。 TextInput有一个键盘事件监听器来检测用户何时按空间或输入来“提交”地址并将其转换为“标记”对象。

文本为“COMMITED”，您：

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

“标记”对象具有“x”图标的事件侦听器，单击该图标时会将标记从容器中移除。

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