Flex表单布局 - 添加与标签垂直对齐的第一个子项

时间:2010-09-22 01:26:36

标签: flex forms

在弹性表单布局中

<mx:Form id="form">
        <mx:FormItem label="horizontal:">
            <mx:Text text="test"/>
        </mx:FormItem>
</mx:Form>

输出将是

横向'测试'

但是我的约束是我希望将文本框(表单项的第一个子项)与标签垂直对齐。我该怎么做?邀请任何投入

2 个答案:

答案 0 :(得分:1)

您可以通过覆盖updateDisplayList方法来覆盖表单/ formitem类以更改布局方法。

你也可以尝试这样的事情:

<mx:Form id="form">
        <mx:FormItem direction="vertical">
            <mx:Label text="horizontal:"/>
            <mx:Text text="test"/>
        </mx:FormItem>
</mx:Form>

答案 1 :(得分:0)

对于Spark-Forms,它的工作方式不同。看看这个非常好的描述:https://opensource.adobe.com/wiki/display/flexsdk/Spark+Form

从上面的来源:

<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";

    #stackedForm s|FormItem
    {
        skinClass : ClassReference("spark.skins.spark.StackedFormItemSkin");
    }
</fx:Style>



<s:Form id="stackedForm">                
    <s:FormItem label="Address" sequenceLabel="1." required="true" >
        <s:TextInput width="100%"/>
        <s:TextInput width="100%"/>
        <s:TextInput width="100%"/>
        <s:helpContent>
            <s:Label text="(ex. 123 Main Street)" baseline="24"/>
            <s:Button label="?" width="30" baseline="24" x="120"/>
        </s:helpContent>
    </s:FormItem>       
    <s:FormItem label="City" sequenceLabel="2." required="true">
        <s:TextInput width="100%"/>
    </s:FormItem> 
    <s:FormItem label="State" sequenceLabel="3.">
        <s:ComboBox dataProvider="{statesDP}" width="100%"/>
    </s:FormItem>
    <s:FormItem label="ZipCode" sequenceLabel="4." required="true">
        <s:TextInput widthInChars="4" restrict="0123456789"/>
        <s:helpContent>
            <s:Label text="Will appear in your profile" left="0" right="0" baseline="24"/>
        </s:helpContent>
    </s:FormItem>
</s:Form>