Flex中如何使用addChild()和removeChild()函数动态添加或删除Accordion容器中项目的例子

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#52BBF8, #F6F9FA]">

     <mx:Script>
        <![CDATA[
            import mx.containers.VBox;
 
            private const MAX_CHILDREN:uint = 5;
 
            private function accordion_addChild():void {
                if (accordion.numChildren < MAX_CHILDREN) {
                    var vbox:VBox = new VBox();
                    vbox.label = "child " + accordion.numChildren;
                    vbox.percentWidth = 100;
                    vbox.percentHeight = 100;
                    var randColor:uint = Math.random() * 0xFFFFFF;
                    vbox.setStyle("backgroundColor", randColor);
                    accordion.addChild(vbox);
                }
            }
 
            private function accordion_deleteChild():void {
                if (accordion.selectedChild) {
                    accordion.removeChild(accordion.selectedChild);
                }
            }
        ]]>
    </mx:Script>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Add child"
            click="accordion_addChild();" />
        <mx:Button label="Delete child"
            click="accordion_deleteChild();" />
    </mx:ApplicationControlBar>
 
    <mx:Accordion id="accordion" width="240" height="160"  x="104" y="69"/>
 
</mx:Application>