为什么我的网格布局太奇怪了

时间：2012-05-22 09:19:12

标签： flex flash-builder flex4.5 mxml

我试着理解如何工作gridlayout，我对结果非常失望。

的确，我的布局不适用宽度GridItem。

对于每个mx：GridRow，GridItem总colspan为6。

首先是GridRow，我以百分比定义宽度，但正如您所看到的，即使宽度和colspan数相同，GridItem也没有相同的大小！

主要问题出在GridRow 1和GridRow 2上，两个下拉列表都太大了！

    <s:VGroup id="mainContainer" width="{contentGroup.width}" height="{contentGroup.height}"  >




    <!-- partie centrale-->

    <s:VGroup  height="100%" width="100%">


        <s:BorderContainer width="100%" verticalCenter="0">
            <mx:Grid width="100%" height="100%"
                     paddingBottom="5" paddingTop="5" paddingLeft="5" paddingRight="5">

                <mx:GridRow id="l1" width="100%">
                    <mx:GridItem colSpan="1" width="15%" verticalAlign="middle" horizontalAlign="right">
                        <s:Label text="Label" width="100%" horizontalCenter="0" textAlign="right"/>
                    </mx:GridItem>
                    <mx:GridItem colSpan="2" width="35%" horizontalAlign="left">
                        <s:DropDownList id="cbCivilCor" width="100%"
                                        prompt="" />
                    </mx:GridItem>
                    <mx:GridItem colSpan="1" width="15%" verticalAlign="middle" horizontalAlign="right">
                        <s:Label text="Label"  width="100%" horizontalCenter="0" textAlign="right"/>
                    </mx:GridItem>
                    <mx:GridItem colSpan="2" horizontalAlign="left" width="35%">
                        <s:DropDownList id="cbSpecCor" width="100%"
                                        prompt=""/>
                    </mx:GridItem>
                </mx:GridRow>

                <mx:GridRow id="l2" width="100%">
                    <mx:GridItem colSpan="1" verticalAlign="middle" horizontalAlign="right">
                        <s:Label text="Label" width="100%" horizontalCenter="0" textAlign="right"/>
                    </mx:GridItem>
                    <mx:GridItem colSpan="2" horizontalAlign="left" >
                        <s:TextInput id="tiNom" width="100%"/>
                    </mx:GridItem>
                    <mx:GridItem colSpan="1" verticalAlign="middle" horizontalAlign="left">
                        <s:Label text="Label" width="100%" horizontalCenter="0" textAlign="right"/>
                    </mx:GridItem>
                    <mx:GridItem colSpan="2" horizontalAlign="left" width="100%">
                        <s:TextInput id="tiPrenom" width="100%"/>
                    </mx:GridItem>
                </mx:GridRow>

                <mx:GridRow id="l3" width="100%">
                    <mx:GridItem colSpan="1" verticalAlign="middle" horizontalAlign="right">
                        <s:Label text="Label" width="100%" horizontalCenter="0" textAlign="right"/>
                    </mx:GridItem>
                    <mx:GridItem colSpan="4" horizontalAlign="left" width="100%">
                        <s:TextInput id="tiAdr1" width="100%"/>
                    </mx:GridItem>

                </mx:GridRow>
                <mx:GridRow id="l4" width="100%">
                    <mx:GridItem colSpan="1" verticalAlign="middle" horizontalAlign="right">
                    </mx:GridItem>
                    <mx:GridItem colSpan="4" horizontalAlign="left">
                        <s:TextInput id="tiAdr2" width="100%"/>
                    </mx:GridItem>
                </mx:GridRow>

                <mx:GridRow id="l5" width="100%">
                    <mx:GridItem colSpan="1" verticalAlign="middle" horizontalAlign="right">
                        <s:Label text="Label" width="100%" horizontalCenter="0" textAlign="right"/>
                    </mx:GridItem>
                    <mx:GridItem colSpan="1" horizontalAlign="left">
                        <s:TextInput id="tiCP" width="100%"/>
                    </mx:GridItem>
                    <mx:GridItem colSpan="1" verticalAlign="middle" horizontalAlign="right">
                        <s:Label text="Label" width="100%" horizontalCenter="0" textAlign="right"/>
                    </mx:GridItem>
                    <mx:GridItem colSpan="2" horizontalAlign="left">
                        <s:TextInput id="tiVille" width="100%"/>
                    </mx:GridItem>
                </mx:GridRow>

                <mx:GridRow id="l6" width="100%">
                    <mx:GridItem colSpan="1" verticalAlign="middle" horizontalAlign="right">
                        <s:Label text="Label" width="100%" horizontalCenter="0" textAlign="right"/>
                    </mx:GridItem>
                    <mx:GridItem colSpan="1" horizontalAlign="left">
                        <s:DropDownList id="cbTypeTel1" 
                                        prompt="" width="100%"/>
                    </mx:GridItem>
                    <mx:GridItem colSpan="1" horizontalAlign="left">
                        <s:TextInput id="tiNumTel1" width="100%"/>
                    </mx:GridItem>
                    <mx:GridItem colSpan="2" horizontalAlign="left">
                        <s:TextInput id="tiRemTel1" width="100%"/>
                    </mx:GridItem>
                </mx:GridRow>

                <mx:GridRow id="l7" width="100%">
                    <mx:GridItem colSpan="1" verticalAlign="middle" horizontalAlign="right">
                    </mx:GridItem>
                    <mx:GridItem colSpan="1" horizontalAlign="left">
                        <s:DropDownList id="cbTypeTel2" 
                                        prompt="" width="100%"/>
                    </mx:GridItem>
                    <mx:GridItem colSpan="1" horizontalAlign="left">
                        <s:TextInput id="tiNumTel2" width="100%"/>
                    </mx:GridItem>
                    <mx:GridItem colSpan="2" horizontalAlign="left">
                        <s:TextInput id="tiRemTel2" width="100%"/>
                    </mx:GridItem>
                </mx:GridRow>

                <mx:GridRow id="l8" width="100%">
                    <mx:GridItem colSpan="1" verticalAlign="middle" horizontalAlign="right">
                        <s:Label text="Label" width="100%" horizontalCenter="0" textAlign="right"/>
                    </mx:GridItem>
                    <mx:GridItem colSpan="1" horizontalAlign="left">
                        <s:TextInput id="tiFax" width="100%"/>
                    </mx:GridItem>
                    <mx:GridItem colSpan="1" horizontalAlign="left">
                        <s:Label text="Label" width="100%" horizontalCenter="0" textAlign="right"/>
                    </mx:GridItem>
                    <mx:GridItem colSpan="2" horizontalAlign="left">
                        <s:TextInput id="tiMail" width="100%"/>
                    </mx:GridItem>
                </mx:GridRow>

                <mx:GridRow id="l9" width="100%">
                    <mx:GridItem colSpan="3" verticalAlign="middle" horizontalAlign="right">
                        <s:Label text="Label tres long" width="100%" horizontalCenter="0" textAlign="right"/>
                    </mx:GridItem>
                    <mx:GridItem colSpan="3" horizontalAlign="left">
                        <s:DropDownList id="cbAppelCourr" 
                                        prompt="" width="100%"/>
                    </mx:GridItem>
                </mx:GridRow>

                <mx:GridRow id="l10" width="100%">
                    <mx:GridItem colSpan="3" verticalAlign="middle" horizontalAlign="right">
                        <s:Label text="Label tres long" width="100%" horizontalCenter="0" textAlign="right"/>
                    </mx:GridItem>
                    <mx:GridItem colSpan="3" horizontalAlign="left">
                        <s:DropDownList id="cbPoliCourr" 
                                        prompt="" width="100%"/>
                    </mx:GridItem>
                </mx:GridRow>
            </mx:Grid>
        </s:BorderContainer>






        <customNavTab:IconToggleButtonBar id="tbbAction" height="6%" 
                                          dataProvider="{buttons}"
                                          itemClick="changeBbHandler(event)" labelPlacement="bottom"
                                          paddingBottom="2" selectedIndex="-1" toggleOnClick="false"
                                          horizontalAlign="center"
                                          bottom="3"
                                          width="100%"/>


    </s:VGroup>

</s:VGroup>

enter image description here

那么，你能解释一下为什么布局不符合我的希望！

感谢。

1 个答案:

答案 0 :(得分：1)

问题是您的GridItem不一致。您可以在所有单元格线下绘制一条虚线，并且它们需要对齐，因为这是一个网格布局。如果在一种情况下，你说你想要一个单元格为35％而下一个单元格设置为100％，那么你手上就有问题了。如果要使用网格布局，单元格宽度需要保持一致......出于这个原因我更喜欢网格布局，但我相信你可以解决它。

采取这种方法：

1。评论除第一行外的所有内容。凉！它以你想要的方式布局。

2。现在取消注释第二行。

您的布局已经搞砸了。为什么？因为第二行中的所有GridItem都设置了width="100%"，这与第一行的宽度不一致。

3。将宽度设置为与第一行相同的百分比。还要确保将其中的输入控件拉伸到100％。

冲洗并重复。

相关问题
最新问题