Flex的动态量变到质变的树节点高度

Question

我想有一个树节点渲染器，其作用如下：

• 改变一下它的节点高度。

我已经试过如下：创建一个从UIComponent 派生的自定义类，然后将其插入树节点渲染器里面，但因为某些原因，我希望这是行不通的。

下面的代码：

package 
{ 
    import flash.display.Sprite; 
    import flash.events.MouseEvent; 

    import mx.controls.Tree; 
    import mx.core.UIComponent; 

    public class Expander extends UIComponent 
    { 
     public var expanded : Boolean = false; 

     public function Expander() 
     { 
      super(); 
      this.redraw(); 
      this.addEventListener(MouseEvent.CLICK, onClick); 
     } 

     private function redraw(newWidth : Number = 60, newHeight : Number = 20) : void 
     { 
      this.graphics.clear(); 
      this.graphics.beginFill(0x0000FF, 0.7); 
      this.graphics.drawRect(0, 0, newWidth, newHeight); 
      this.graphics.endFill(); 
     } 

     private function onClick(e : MouseEvent) : void 
     { 
      e.stopImmediatePropagation(); 
      colapseExpand(); 
     } 

     private function colapseExpand() : void 
     { 
      expanded = ! expanded; 
      if(expanded) 
       redraw(this.width, 100); 
      else 
       redraw(); 

      (parent as Tree).invalidateSize(); 

     } 
    } 
} 

下面是渲染器类代码：

<?xml version="1.0" encoding="utf-8"?> 
<s:MXTreeItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" 
         xmlns:lx="*"> 

    <s:states> 
     <s:State name="normal" />    
     <s:State name="hovered" /> 
     <s:State name="selected" /> 
    </s:states> 
    <s:HGroup left="0" right="0" top="0" bottom="0" verticalAlign="middle"> 
     <s:Rect id="indentationSpacer" width="{treeListData.indent}" percentHeight="100" alpha="0"> 
      <s:fill> 
       <s:SolidColor color="0xFFAFFF" /> 
      </s:fill> 
     </s:Rect> 
     <s:Group id="disclosureGroup"> 
      <s:BitmapImage source="{treeListData.disclosureIcon}" visible="{treeListData.hasChildren}" /> 
     </s:Group> 
     <s:BitmapImage source="{treeListData.icon}" /> 
     <s:Label id="labelField" text="{treeListData.label}" paddingTop="2"/> 
     <lx:Expander width="100%"> 

     </lx:Expander> 
    </s:HGroup> 
</s:MXTreeItemRenderer> 

自定义类记为lx:Expander width="100%"。

Answer 1

你想要做的是创建一个树variableRowHeight="true"，然后你的项目渲染器中，您可以使用状态为“扩大”项目渲染：

<?xml version="1.0" encoding="utf-8"?> 
<s:MXTreeItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" 
         xmlns:lx="*"> 

    <s:states> 
     <s:State name="normal" />    
     <s:State name="hovered" /> 
     <s:State name="selected" /> 
    </s:states> 
    <s:HGroup height.selected="75"> 
     <s:Label text="Not expanded" text.selected="EXPANDED!" /> 
    </s:HGroup> 
</s:MXTreeItemRenderer> 

这应该扩大当项目渲染器选中，但我没有测试它。您的树可能需要具有“selectable = true”属性，或者您始终可以在项呈示器中的单击事件中手动更改状态。