apache-flex - formItems を揃えるには?

Question

フォームを作成しようとしていますが、formItems の配置に問題があります。

これは 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>

現時点ではこんな感じ。

しかし、私はそれがこのように見えるようにしたい

Answer 1

次のコードを使用してください: アライメント要件に従ってスペーサーの幅を調整してください。また、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>