Question

我正在尝试使用VGroup和HGroup学习Flex布局。作为一个简单的练习，我想控制按钮对的像素位置。下面的代码试图将3对按钮分别放在两行中。例如，第一行具有从顶部和左侧20个像素的按钮对;另一个按钮对从顶部20像素并居中;和另一个按钮对从顶部和右侧20像素。第二行只有所有按钮左对齐20个像素。

它应该类似于：

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

但代码在两行之间没有区别。任何人都可以帮我理解如何像我想要的那样控制布局吗？

<?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>

Answer 1

我看到两个选项：

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>

这看起来与上面的例子完全相同。

Answer 2

我真的试图避开垫片。我想我已经用一次一次来破解某些东西......但它感觉很脏。

第一行不应该是HGroup，而是由Group组成的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>

Flex新手使用Group和Group来控制布局

2 个答案: