我正在尝试创建一个表单,但在对齐表单项时遇到问题。
这是 mx:Form 命名空间。 (xmlns:mx="http://www.adobe.com/2006/mxml")
有人对如何纠正这个问题有任何建议吗?任何帮助将不胜感激。
<mx:VBox paddingLeft="0" height="100%">
<form:Form width="100%"
textAlign="left">
<mx:VBox>
<mx:HBox id="snapShotSelect">
<form:FormItem label="My Label Here"
includeInLayout="{model.formItemVisible}"
visible="{model.formItemVisible}"/>
<mx:VBox>
<form:FormItem includeInLayout="{model.formItemVisible}"
visible="{model.formItemVisible}">
<components:SageTextInput textAlign="left"/>
</form:FormItem>
<form:FormItem label=""
visible="{model.formItemVisible}"
includeInLayout="{model.formItemVisible}"/>
<form:FormItem visible="{model.formItemVisible}"
includeInLayout="{model.formItemVisible}">
<components:SageList id="snaps"
allowMultipleSelection="false"
width="200"
rowCount="5"/>
</form:FormItem>
</mx:VBox>
</mx:HBox>
<mx:HBox>
<form:FormItem label="My Label Here"
width="100%"
visible="{model.formItemVisible}"
includeInLayout="{model.formItemVisible}"/>
<form:FormItem label=""
width="100%">
<components:SageComboBox dataProvider="{model.generations}"
textAlign="left"
enabled="{model.generations.length > 0}"/>
</form:FormItem>
</mx:HBox>
<mx:HBox id="radioSelectGroup">
<form:FormItem label="">
<components:SageRadioButtonGroup id="rbGroup"
groupId="rbGroup"
labelPlacement="right"/>
</form:FormItem>
</mx:HBox>
<mx:HBox id="radioNew">
<form:FormItem>
<components:SageRadioButton id="radioCopy" value="{model.RADIO_CREATE}"
group="{rbGroup}"
labelPlacement="right"
width="250"
label="Radio Button 1" />
</form:FormItem>
<form:FormItem>
<components:SageTextInput textAlign="left"
enabled="{rbGroup.selectedValue == model.RADIO_CREATE}"/>
</form:FormItem>
</mx:HBox>
<mx:HBox id="radioExisting">
<form:FormItem>
<components:SageRadioButton id="radioNoCopy" value="{model.RADIO_USE_EXISTING}"
group="{rbGroup}"
labelPlacement="right"
width="250"
label="Radio Button 2"/>
</form:FormItem>
<mx:VBox>
<form:FormItem label=""
paddingBottom="0">
<components:SageTextInput textAlign="left"
enabled="{rbGroup.selectedValue == model.RADIO_USE_EXISTING}"/>
</form:FormItem>
<form:FormItem label=""
indentationLevel="0"
paddingTop="0">
<components:SageList allowMultipleSelection="false"
width="200"
rowCount="5"
enabled="{rbGroup.selectedValue == model.RADIO_USE_EXISTING}"/>
</form:FormItem>
</mx:VBox>
</mx:HBox>
</mx:VBox>
</form:Form>
</mx:VBox>
目前看起来是这样。
但我希望它看起来像这样
最佳答案
使用以下代码:请根据您的对齐要求调整垫片的宽度。另外,不要错过提及 formItem 内每个 HBox 和 VBox 的宽度。在这里,我使用所有 mx 组件。
<mx:Form>
<mx:FormItem width="100%">
<mx:VBox id="ContainerVBox" width="100%">
<mx:HBox width="100%">
<mx:Label id="label1" text="my label here"/>
<mx:Spacer width="10%"/>
<mx:TextInput id="textInput1" text="This is text input 1"/>
</mx:HBox>
<mx:TextInput id="textInput2" text="This is text input 2"/>
</mx:VBox>
</mx:FormItem>
<mx:FormItem width="100%">
<mx:HBox width="100%">
<mx:Label id="label1" text="my label here"/>
<mx:Spacer width="10%"/>
<mx:ComboBox id="myComboBox"/>
</mx:HBox>
</mx:FormItem>
<mx:FormItem width="100%">
<mx:HBox width="100%">
<mx:RadioButton id="myRadioButton"/>
<mx:Text text="Radio Button 1"/>
<mx:Spacer width="10%"/>
<mx:TextInput id="textInput3"/>
</mx:HBox>
</mx:FormItem>
<mx:FormItem width="100%">
<mx:VBox width="100%">
<mx:HBox width="100%">
<mx:RadioButton id="myRadioButton"/>
<mx:Text text="Radio Button 2"/>
<mx:Spacer width="10%"/>
<mx:TextInput id="textInput4"/>
</mx:HBox>
<mx:TextInput id="textInput5" text="This is text input 5"/>
</mx:VBox>
</mx:FormItem>
</mx:Form>
</mx:VBox>
关于apache-flex - 如何对齐formItems?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18486069/