Flex/mx spark：創建一個numpad佈局（表格樣式）

Question

有沒有辦法創建一個界面，並只用百分比值定位/縮放元素？我是新來的Flex，我找不到實現這個目標的方法。

我已經能夠創建一個數字鍵盤使用的基本佈局，但我必須使用絕對位置（x & 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}」）

另外，我需要使用百分比，因爲有很多數字鍵盤配置（某些數字鍵盤只有右下角的輸入按鈕，其他數字有一個「0」按鈕，左下角只有1個空格）。如果可能，使用絕對值是我想避免的。

有什麼建議嗎？

Answer 1

對於多行/列使用帶有列寬和行距（網格項）的網格佈局，請將兒童寬度&高度設置爲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>