0

VGroup と HGroup を使用して Flex レイアウトを学習しようとしています。簡単な演習として、ボタン ペアのピクセル配置を制御したいと思います。以下のコードは、3 組のボタンをそれぞれ 2 行に配置しようとしています。たとえば、最初の行には、上と左から 20 ピクセルのボタン ペアがあります。もう 1 つのボタン ペアは、上から 20 ピクセル、中央に配置されます。もう 1 つのボタンは、上と右から 20 ピクセルの位置にあります。2 行目には、すべてのボタンが 20 ピクセル左に配置されています。

次のようになります。

button button                     button button                   button button
button button button button button button

しかし、このコードでは 2 つの行に違いはありません。意図したようにレイアウトを制御する方法を理解してくれる人はいますか?

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" 
           minWidth="955" 
           minHeight="600">

<s:VGroup top="20" left="20" right="20">

    <s:HGroup top="20" left="20" right="20">

        <s:Button label="row1 left1"/>
        <s:Button label="row1 left2"/>

        <s:HGroup  horizontalAlign="center">
            <s:Button label="row1 middle1"/>
            <s:Button label="row1 middle2"/>
        </s:HGroup>

        <s:HGroup right="20">
            <s:Button label="row1 right1"/>
            <s:Button label="row1 right2"/>
        </s:HGroup>

    </s:HGroup>

    <s:HGroup top="50" left="20">
        <s:Button label="row2 left1"/>
        <s:Button label="row2 left2"/>
        <s:Button label="row2 middle1"/>
        <s:Button label="row2 middle2"/>
        <s:Button label="row2 right1"/>
        <s:Button label="row2 right2"/>
    </s:HGroup>

</s:VGroup>

</s:Application>

更新: 以下の Dom の回答に基づいて、これが私が意図していた正しいコードです。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" 
           minWidth="955" 
           minHeight="600">

<s:HGroup left="20" right="20" top="20">
    <s:HGroup>
        <s:Button click=""/>
        <s:Button click=""/>
    </s:HGroup>
    <s:Spacer width="100%"/>
    <s:HGroup>
        <s:Button click=""/>
        <s:Button click=""/>
    </s:HGroup>
    <s:Spacer width="100%"/>
    <s:HGroup>
        <s:Button click=""/>
        <s:Button click=""/>
    </s:HGroup>
</s:HGroup>
<s:VGroup left="20" right="20" top="50">
    <s:HGroup width="100%">
        <s:Button click=""/>
        <s:Button click=""/>
        <s:Button click=""/>
        <s:Button click=""/>
        <s:Button click=""/>
        <s:Button click=""/>
    </s:HGroup>
</s:VGroup>

</s:Application>
4

2 に答える 2

2

私は本当にスペーサーを避けようとします。一度使って何かをハックしたことがあると思いますが…でも汚れた感じがしました。

最初の行はである必要はありませんが、HGroup3GroupつHGroupので構成されます。このようになりますが、スペーサーはありません。

<s:VGroup top="20" left="20" right="20">

    <s:Group width="100%">

        <s:HGroup left="0">
            <s:Button label="row1 left1"/>
            <s:Button label="row1 left2"/>
        </s:HGroup>

        <s:HGroup horizontalCenter="0">
            <s:Button label="row1 middle1"/>
            <s:Button label="row1 middle2"/>
        </s:HGroup>

        <s:HGroup right="0">
            <s:Button label="row1 right1"/>
            <s:Button label="row1 right2"/>
        </s:HGroup>

    </s:Group>

    <s:HGroup top="50" left="20">
        <s:Button label="row2 left1"/>
        <s:Button label="row2 left2"/>
        <s:Button label="row2 middle1"/>
        <s:Button label="row2 middle2"/>
        <s:Button label="row2 right1"/>
        <s:Button label="row2 right2"/>
    </s:HGroup>

</s:VGroup>
于 2012-05-02T01:53:26.343 に答える
2

2 つのオプションが表示されます。

1: HGroup を使用しない

2: HGroup を使用し、アイテムにスペースを空ける

<s:Spacer width="x"/>

ここで、x は % または正確なピクセルです。

編集: s:spacer が表示されるように、回答を適切にフォーマットしました

編集2：以下のコードを追加：

<s:VGroup width="100%" height="100%">
    <s:HGroup width="100%">
        <s:HGroup>
            <s:Button click=""/>
            <s:Button click=""/>
        </s:HGroup>
        <s:Spacer width="100%"/>
        <s:HGroup>
            <s:Button click=""/>
            <s:Button click=""/>
        </s:HGroup>
        <s:Spacer width="100%"/>
        <s:HGroup>
            <s:Button click=""/>
            <s:Button click=""/>
        </s:HGroup>
    </s:HGroup>
    <s:HGroup width="100%">
        <s:Button click=""/>
        <s:Button click=""/>
        <s:Button click=""/>
        <s:Button click=""/>
        <s:Button click=""/>
        <s:Button click=""/>
    </s:HGroup>
</s:VGroup>

上記の例とまったく同じになります。

于 2012-05-02T01:11:03.973 に答える