2

如何将 uicomponent 传递给 mxml 自定义组件？
例如：我想传入任意数量的按钮，并且我希望我的自定义组件以特定顺序排列它们。

MainApp.mxml：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark"
           xmlns:mx="library://ns.adobe.com/flex/mx"
           minWidth="955" minHeight="600" xmlns:local="*"
           >

<local:myComp >
   <s:Button label='Button1' />
   <s:Button label='Button2' />
   <!--I want to add anything else here -->
</local:myComp>

myComp.mxml：

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:mx="library://ns.adobe.com/flex/mx"
     creationComplete="init()"
     width="400" height="300"
     >


<fx:Script>
    <![CDATA[
        private function init():void {
        // how do I access the added components and place them where I want?
        // do I use removeChildren and AddChildren?
        // addItemsHere.addchild(nextButton);
    ]]>
</fx:Script>

<s:HGroup id='addItemsHere' />

4

2 回答 2

1

当你的组件扩展Group时，你应该使用addElement代替addChild（并且对于所有其他名称中带有'child'的方法，它应该替换为'element'。因此，对所有元素的访问将是这样的：

for(var i:int =0; i < numElements; i++){
   var button:Button = Button(getElementAt(i));
   doWhatIWantWithMyButton(button);
}

createChildren如果您知道在创建时要添加什么，最好覆盖组件的方法。

如果您不需要非常具体的按钮放置，您可以将layout组件的属性设置为任何所需的布局（例如 VerticalLayout），并且这些布局是可调的。

于 2012-12-21T19:21:10.227 回答
1

您似乎正在尝试重新创建 SDK 中已经存在的功能。这是SkinnableContainer的用途。
根据您的用例，有两种使用方法：

您只需要为您的自定义组件添加一些自定义图形元素，而不需要额外的行为

在这种情况下，您可以简单地重用 SkinnableContainer 并为其分配自定义外观，如下所示：

<s:SkinnableContainer skinClass="MySkin">
    <s:Button label='Button1' />
    <s:Button label='Button2' />
</s:SkinnableContainer>

使用 MySkin.mxml 可能类似于：

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark">

    <fx:Metadata>
        [HostComponent("spark.components.SkinnableContainer")]
    </fx:Metadata> 

    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>

    <s:layout>
         <s:VerticalLayout/>
    </s:layout>

    <s:Label text="I'm a SkinnableContainer"/>

    <s:Group id="contentGroup" width="100%" height="100%">

 </s:SkinnableContainer>

您的按钮现在将自动添加到contentGroup; SkinnableContainer 类会为您处理这个问题。请注意，该组必须具有该 id；这是必需的 SkinPart。

你想为你的组件添加一些行为

该过程是相同的，但您现在将子类化 SkinnableContainer（这通常在纯 ActionScript 中完成），在其中编写一些行为，并将外观分配给此类的实例。

public class MyComp extends SkinnableContainer {
    //additional behaviour goes here
}

用法：

<local:MyComp skinClass="MySkin">
    <s:Button label='Button1' />
    <s:Button label='Button2' />
</local:MyComp>
于 2012-12-21T22:13:25.490 回答