0

我正在尝试使用 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>
4

2 回答 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 回答
2

我真的尽量避免使用垫片。我想我曾经用过一个东西来破解一些东西……但感觉很脏。

第一行不应该是 a HGroup，而是Group由三个HGroups 组成。像这样，但没有任何垫片：

<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 回答