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”属性，或者您始终可以在项目渲染器的单击事件中手动更改状态。