它比这容易得多:对于这个用例,您应该简单地扩展Group
. 为了使事情更容易,用 MXML 编写您的组合组件。
创建一个新文件MyBlock.mxml
(例如 in com/mydomain/components
)并添加以下代码:
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:TextInput .. />
<s:BitmapImage .. />
</s:Group>
现在只需使用这个组件:
<c:MyBlock />
其中c
命名空间被定义为xmlns:c="com.mydomain.components.*"
使用此类的文档的根节点。例如:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:c="com.mydomain.components.*">
<c:MyBlock />
</s:Application>
现在假设您想在每个块中使用不同的文本,您必须公开一个属性。为此,让我们添加一个label
属性到MyBlock
:
<fx:Declarations>
<fx:String id="label" />
</fx:Declarations>
为了TextInput
在该变量更改时显示该变量中的内容,我们使用如下绑定:
<s:TextInput text="{label}" />
最终组件看起来像这样:
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Declarations>
<fx:String id="label" />
</fx:Declarations>
<s:TextInput text="{label}" .. />
<s:BitmapImage .. />
</s:Group>
现在您可以使用不同的文本创建多个MyBlock
实例:
<c:MyBlock label="hello" />
<c:MyBlock label="world" />
请注意,如果您经常以类似列表的方式使用 MyBlock,您可能需要考虑使用List
带有自定义 ItemRenderer 的组件,而不是MyBlock
一遍又一遍地使用。