Компоновка гибкой формы - добавление первого дочернего элемента, выровненного по вертикали с меткой

Question

В макете гибкой формы

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

вывод будет

горизонтальный 'тест'

Но мое ограничение - я хочу выровнять текстовое поле (первый дочернийэлемент формы) вертикально с меткой.Как я могу это сделать? Любые предложения приглашены

Answer 1

Вы можете переопределить класс form / formitem, чтобы изменить подход макета, переопределив метод updateDisplayList.

Вы также можете попробовать что-то вроде этого:

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

Answer 2

Для 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>