Flex / mx spark：创建一个小键盘布局（表格样式）

Question

有没有办法只创建一个具有百分比值的接口和positionnate / scale元素？我是Flex的新手，我无法找到实现这一目标的方法。

我已经能够创建一个基本布局的小键盘，但我必须使用绝对位置（x＆amp; y）：

代码：

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                       xmlns:s="library://ns.adobe.com/flex/spark"
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       width="400" height="500">
    <s:layout>
        <s:BasicLayout/>
    </s:layout>
    <fx:Declarations>
        <!-- Placer ici les éléments non visuels (services et objets de valeur, par exemple). -->
    </fx:Declarations>
    <s:Button x="0" y="0" width="25%" height="20%" label="NUM LOCK"/>
    <s:Button x="100" y="0" width="25%" height="20%" label="/"/>
    <s:Button x="200" y="0" width="25%" height="20%" label="*"/>
    <s:Button x="300" y="0" width="25%" height="20%" label="-"/>

    <s:Button x="0" y="100" width="25%" height="20%" label="7"/>
    <s:Button x="100" y="100" width="25%" height="20%" label="8"/>
    <s:Button x="200" y="100" width="25%" height="20%" label="9"/>
    <s:Button x="300" y="100" width="25%" height="40%" label="+"/>

    <s:Button x="0" y="200" width="25%" height="20%" label="4"/>
    <s:Button x="100" y="200" width="25%" height="20%" label="5"/>
    <s:Button x="200" y="200" width="25%" height="20%" label="6"/>

    <s:Button x="0" y="300" width="25%" height="20%" label="1"/>
    <s:Button x="100" y="300" width="25%" height="20%" label="2"/>
    <s:Button x="200" y="300" width="25%" height="20%" label="3"/>
    <s:Button x="300" y="300" width="25%" height="40%" label="ENTER"/>

    <s:Button x="0" y="400" width="50%" height="20%" label="0"/>
    <s:Button x="200" y="400" width="25%" height="20%" label="."/>

</s:WindowedApplication>

结果：

问题是当我缩放小键盘时都会出错 - 因为我遇到了绝对值（x = 100 y = 200）。我不能使用百分比（x = 25％y = 40％或x =“{this.width * 1/4}”y =“{this.height * 2/5}”）

Aslo，我需要使用百分比，因为有很多小键盘配置（一些小键盘只有右下方有输入按钮，其他小键盘有一个“0”按钮，左下角只有一个空格）。如果可能的话，我希望避免使用绝对值。

有什么建议吗？

Answer 1

对于多行/列，使用带有columnspan和rowspan（在网格项上）的网格布局，设置子宽度和列宽。高度为100％。在父级上将差距设置为0。

更多信息here

<mx:Grid id="myGrid" width="100%" height="100%">
        <mx:GridRow>
            <mx:GridItem>
                <mx:Button label="NL" width="100%" height="100%" >
                </mx:Button>
            </mx:GridItem>
            <mx:GridItem>
                <mx:Button label="/" width="100%" height="100%" >
                </mx:Button>
            </mx:GridItem>
            <mx:GridItem>
                <mx:Button label="*" width="100%" height="100%" >
                </mx:Button>
            </mx:GridItem>
            <mx:GridItem>
                <mx:Button label="-" width="100%" height="100%" >
                </mx:Button>
            </mx:GridItem>
        </mx:GridRow>
        <mx:GridRow id="row1">
            <mx:GridItem>
                <mx:Button label="7"  width="100%" height="100%" />
            </mx:GridItem>
            <mx:GridItem>
                <mx:Button label="8"  width="100%" height="100%" />
            </mx:GridItem>
            <mx:GridItem>
                <mx:Button label="9"  width="100%" height="100%" />
            </mx:GridItem>
            <mx:GridItem rowSpan="2">
                <mx:Button label="+"  width="100%" height="100%"  />
            </mx:GridItem>
        </mx:GridRow>
        <mx:GridRow id="row2">
            <mx:GridItem>
                <mx:Button label="4"  width="100%" height="100%" />
            </mx:GridItem>
            <mx:GridItem>
                <mx:Button label="5"  width="100%" height="100%" />
            </mx:GridItem>
            <mx:GridItem>
                <mx:Button label="6"  width="100%" height="100%" />
            </mx:GridItem>
        </mx:GridRow>
        <mx:GridRow id="row4">
            <mx:GridItem>
                <mx:Button label="1"  width="100%" height="100%" />
            </mx:GridItem>
            <mx:GridItem>
                <mx:Button label="2"  width="100%" height="100%" />
            </mx:GridItem>
            <mx:GridItem>
                <mx:Button label="3"  width="100%" height="100%" />
            </mx:GridItem>
            <mx:GridItem rowSpan="2">
                <mx:Button label="ENTR"  width="100%" height="100%" />
            </mx:GridItem>
        </mx:GridRow>
        <mx:GridRow id="row5">
            <mx:GridItem colSpan="2">
                <mx:Button label="0" width="100%" height="100%" />
            </mx:GridItem>
            <mx:GridItem>
                <mx:Button label="."  width="100%" height="100%" />
            </mx:GridItem>
        </mx:GridRow>
    </mx:Grid>