0

グリッドレイアウトがどのように機能するかを理解しようとしていますが、結果に非常に失望しています。

実際、私のレイアウトは width 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>

ここに画像の説明を入力

では、レイアウトが私の希望に沿わない理由を説明していただけますか!

ありがとう。

4

1 に答える 1

1

問題は、あなたGridItemの s が一貫していないことです。これはグリッド レイアウトであるため、すべてのセル ラインに架空の線を引くことができます。あるケースで、あるセルを 35% にしたいと言い、そのすぐ下のセルを 100% に設定すると、問題が発生します。グリッド レイアウトを使用する場合は、セルの幅を一定にする必要があります。まさにこの理由から、グリッド レイアウトを使用したくないのですが、解決できると確信しています。

次のアプローチを取ります。

1. 最初の行を除くすべてをコメントアウトします。涼しい！それはあなたが望むようにレイアウトされています。

2. 次に、2 行目のコメントを外します。

すでに、あなたのレイアウトはめちゃくちゃです。なんで？GridItem2 行目のすべてのがwidth="100%"設定されているため、最初の行の幅と一致しません。

3. 幅を最初の行と同じパーセントに設定します。また、それらの内部の入力コントロールを 100% に拡大してください。

すすいで繰り返します。

于 2012-05-22T10:46:43.553 に答える