Mx 网格 - 非常奇怪的布局

Question

我使用 flex 4.6，我尝试使用 mx:grid 组件在我的 Air 窗口上显示组件。 目标是对齐某些组件并具有良好的调整大小效果。 请参阅下面的代码示例和屏幕截图

    <?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                   xmlns:s="library://ns.adobe.com/flex/spark" 
                   xmlns:mx="library://ns.adobe.com/flex/mx" 
                   width="100%" verticalCenter="0" borderColor="#A8CB17">
    <fx:Declarations>
        <!-- Placer ici les éléments non visuels (services et objets de valeur, par exemple). -->
    </fx:Declarations>
    <mx:Grid width="100%"
             paddingBottom="5" paddingTop="5" paddingLeft="0" paddingRight="0" >
        <mx:GridRow id="cdr1" verticalAlign="middle" width="100%" >
            <mx:GridItem colSpan="2" width="100%" verticalAlign="middle" horizontalAlign="left">
                <s:Label text="Label" fontWeight="bold" width="100%" paddingTop="5" color="#333333"/>
            </mx:GridItem>
        </mx:GridRow>
        <mx:GridRow id="cdr2" width="100%" borderVisible="true" dropShadowVisible="false"
                    verticalAlign="middle">
            <mx:GridItem width="100%" colSpan="1" horizontalAlign="right" verticalAlign="middle">
                <s:Label width="100%" horizontalCenter="0" text="Label1" textAlign="right"/>
            </mx:GridItem>
            <mx:GridItem colSpan="2" width="100%" verticalAlign="middle" horizontalAlign="left">
                <s:HGroup width="100%">
                    <s:CheckBox id="cbMolC1" label="Cb I" width="33%"/>
                    <s:CheckBox id="cbMolC2" label="cb. II" width="33%"/>
                    <s:CheckBox id="cbMolC3" label="Cb III" width="33%"/>
                </s:HGroup>
            </mx:GridItem>
            <mx:GridItem colSpan="4" width="100%" verticalAlign="middle" horizontalAlign="left">
                <s:TextInput id="tiClassMol" width="100%"/>
            </mx:GridItem>

        </mx:GridRow>

        <mx:GridRow id="cdr3" verticalAlign="middle" width="100%" >
            <mx:GridItem colSpan="1" width="100%" verticalAlign="middle" horizontalAlign="right">
                <s:Label width="100%" horizontalCenter="0" text="Label 2" textAlign="right"/>
            </mx:GridItem>
            <mx:GridItem colSpan="2" width="100%" verticalAlign="middle" horizontalAlign="right">
                <s:HGroup width="100%">
                    <s:CheckBox id="cbMolC1" label="Cb I" width="33%"/>
                    <s:CheckBox id="cbMolC2" label="Cb II" width="33%"/>
                    <s:CheckBox id="cbMolC3" label="Cb III" width="33%"/>
                </s:HGroup>
            </mx:GridItem>
            <mx:GridItem colSpan="4" width="100%" verticalAlign="middle" horizontalAlign="left">
                <s:TextInput id="tiClassMol" width="100%"/>
            </mx:GridItem>
        </mx:GridRow>
    </mx:Grid>
</s:BorderContainer>

我的问题是，即使 textinput 放置在 colspan = 4 的网格项上，该网格项的大小与 colspan =1 的第一个网格项的大小相同。

所以，我觉得这很奇怪。

你能帮帮我吗？

谢谢

Answer 1

为什么在使用 Flex 4 时使用 mx:Grid？！

如果你想要一个表单，我绝对建议你使用 Spark Form layout 而不是 Grid，它已被弃用。