forms - FormItems 未与 DataGroup 中的 ItemRenderer 对齐

Question

我正在尝试将 FormItem 用作 DataGroup 中的 ItemRenderer - 目的是动态创建基于 XMLlist 作为数据提供者的表单。第一部分是成功的，因为表单项已成功呈现，但是我的问题是尽管在 DataGroup 中使用了 FormLayout，但我的 FormItem 标签没有彼此对齐。

<?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"
>
<fx:Declarations>
    <fx:XMLList id="_formModel" >
            <control description="Weeks 1 Form Item"  id="087B4626-B95E-731F-ACC7-80ED7373E083" label="One" />
            <control description="Weeks 2 Form Item"  id="AC546361-D9C5-E9F3-5F90-80EFA52EF54D" label="Second"  />
            <control description="Weeks 3 Form Item"  id="9EE2AAA4-B9C3-68C0-D9B5-80F0374F940E" label="Three" />
            <control description="Weeks 4 Form Item"  id="3CCEABD6-12F9-E511-0C77-80F0A86902D5" label="The Fourth"  />      
    </fx:XMLList> 
    <s:XMLListCollection id="_controls" source="{_formModel}"/>
</fx:Declarations>

<s:Scroller width="100%" height="100%">
    <s:DataGroup width="100%" height="100%" dataProvider="{_controls}"  >
        <s:layout>
            <s:FormLayout/>
        </s:layout>
        <s:itemRenderer>
            <fx:Component>
                <s:ItemRenderer>
                    <s:FormItem label="{data.@label}" width="100%"  >
                        <s:TextInput  width="100%"  text="{data.@description}"/>
                    </s:FormItem>
                </s:ItemRenderer>
            </fx:Component>
        </s:itemRenderer>  
    </s:DataGroup>
</s:Scroller>
</s:Application>

谁能告诉我如何对齐表单项标签，同时仍然在数据组中使用它们，因为练习的目的是根据输入数据组的数据动态创建表单。

提前致谢。

Answer 1

有趣的问题:我在解决它时获得了一些乐趣，结果比我预期的要容易。

问题

问题是 FormItem 必须是具有 FormLayout 的容器的直接子级，但是在这种情况下 FormItem 是一个ItemRenderer 的子项又是 DataGroup 的子项。

解决方案

要解决此问题，您可以创建 FormItem 的子类，该子类也实现了 IItemRenderer 接口(interface)。这样 DataGroup 就会知道如何处理这些项目，而 FormItem 将是 FormLayout 的直接子级。

代码

首先创建自定义项目渲染器:

public class FormItemRenderer extends FormItem implements IItemRenderer {

    private var _data:Object;
    [Bindable("dataChange")]
    public function get data():Object { return _data; }
    public function set data(value:Object):void {
        _data = value;
        label = value ? value.@label : null;

        if (hasEventListener(FlexEvent.DATA_CHANGE))
            dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
    }

    private var _itemIndex:int;
    public function get itemIndex():int { return _itemIndex; }
    public function set itemIndex(value:int):void {
        if (value == _itemIndex) return;

        _itemIndex = value;
        invalidateDisplayList();
    }

    private var _selected:Boolean = false;
    public function get selected():Boolean { return _selected; }
    public function set selected(value:Boolean):void {
        if (value != _selected) {
            _selected = value;
            invalidateDisplayList();
        }
    }

    public function get dragging():Boolean { return false; }
    public function set dragging(value:Boolean):void { }

    public function get showsCaret():Boolean { return false; }
    public function set showsCaret(value:Boolean):void { }

}

我只实现了最低限度的操作以使其正常工作；您可以稍后添加您需要的内容。
另请注意 data setter 的第二行，我们将 XML 节点的 label 属性传递给 FormItem 的 label 属性。这不是一种非常通用的方法，但我想如果需要的话，您以后可以找到解决方案。

现在使用自定义渲染器:

<s:DataGroup dataProvider="{_controls}">
    <s:layout>
        <s:FormLayout/>
    </s:layout>
    <s:itemRenderer>
        <fx:Component>
            <r:FormItemRenderer>
                <s:TextInput width="100%" text="{data.@description}"/>
            </r:FormItemRenderer>
        </fx:Component>
    </s:itemRenderer>
</s:DataGroup>

注意事项

您可以将此解决方案与开箱即用的 DataGroup 一起使用，但如果您想将其与 List(或任何其他扩展 ListBase 的组件)一起使用) 还有一件事需要考虑:
FormLayout 不支持布局虚拟化，这是默认为列表打开的(无论如何对正常用例都没有意义)。因此，您必须将 useVirtualLayout 显式设置为 false 以避免 NullPointerExceptions。

<s:List dataProvider="{_controls}" useVirtualLayout="false">
    ...
</s:List/>