Question

enter image description here 我使用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。

Mx网格 - 非常奇怪的布局

1 个答案: