將Flex組件放置在屏幕中間

我有一個非常普遍的問題，並準備了一個簡單的測試用例。將Flex組件放置在屏幕中間

當使用BasicLayout（即絕對定位）時 - 將Flex組件放置在應用程序中心的最佳方法是什麼？

在測試情況下，下面我使用X =「{寬度/ 2}」但是這給我至少2個問題：

如何佔組分尺寸（測試用例中的ProgressBar）？
是否有約束力{width/2}一個好主意？在某些情況下它不會發送不必要的DATA_CHANGE事件嗎？

最後我不知道，這一切是如何適用於使用StageScaleMode.SHOW_ALL全屏應用程序 - 因爲目前我的應用程序放置在頂部的左在全屏模式下，有一個白色的死區在它的右邊。（這至少與純Flash/AS3行爲有所不同，其中全屏幕內容顯示在屏幕中心和左右兩個死區）。

<?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" 
    width="700" height="525" 
    backgroundColor="#CCFFCC" 
    initialize="systemManager.stage.scaleMode=StageScaleMode.SHOW_ALL"> 

    <fx:Script> 
     <![CDATA[ 
      private function fullScreen(event:MouseEvent):void { 
       stage.displayState = 
        stage.displayState == StageDisplayState.NORMAL ? 
        StageDisplayState.FULL_SCREEN : 
        StageDisplayState.NORMAL; 
      } 
     ]]> 
    </fx:Script> 

    <s:states> 
     <s:State name="normal" /> 
     <s:State name="connected" /> 
    </s:states> 

    <s:CheckBox right="10" bottom="10" 
     label="Full screen" 
     click="fullScreen(event)" /> 

    <mx:ProgressBar indeterminate="true" 
     x="{width/2}" y="{height/2}" 
     label="Connecting..." labelPlacement="center" 
     includeIn="normal" /> 

</s:Application>

比這更容易

enter image description here

來源

2011-09-06 Alexander Farber

方式：只需使用的UIComponent中horizontalCenter和verticalCenter性能。在BasicLayout中使用時，組件將始終居中。就像這樣：

<mx:ProgressBar indeterminate="true" 
       horizontalCenter="0" verticalCenter="0" 
       label="Connecting..." labelPlacement="center" />

如果給這些屬性以外的值「0」的組件將被從中間的像素指定爲一個值的偏移量。（例如，horizontalCenter="50"會將組件50個像素偏移到父組件的中心右側）

該空格可能是由於您使用了systemManager.stage.scaleMode=StageScaleMode.SHOW_ALL。只要刪除該行。你爲什麼要這樣做？

編輯

只注意到您使用的是固定的「寬度」和「高度」在你的應用程序：你必須讓那些「100％」如果你希望你的應用程序，真正填補了屏幕。這是該空白的另一個可能原因。

來源

2011-09-06 14:47:19 RIAstar

All right horizontalCenter =「0」完美地工作（我是一個Flex新手）。 –

不，我確實想使用StageScaleMode.SHOW_ALL，但我希望我的內容放置在屏幕中間，而不是與左側對齊。背景是我有一款主要由老年人玩的紙牌遊戲，所以他們點擊全屏並獲得大的信件/卡片：http：//apps.facebook.com/video-preferans/ –

SHOW_ALL播放不好與Flex應用程序。解決問題並不容易。我認爲你最好的選擇是用相對大小而不是固定大小來定義你的所有組件。如果使用矢量圖形，視覺效果也會更好（不模糊）。 – RIAstar

我通常做兩件事情，

我把內側對準VGroups/HGroups目的，我也使用相對寬度，例如百分比。

想想在使用HTML表格的舊時代。它工作得非常好，特別是如果您的畫布調整大小分配。

我所有的畫布都必須調整大小，因爲我喜歡只寫一次我的應用程序，適用於PC，手機等，所以我只是將所有內容都默認擴展。

來源

2011-09-07 08:52:32

使用systemManager.stage.scaleMode=StageScaleMode.SHOW_ALL時，爲了讓應用程序居中（而不是左/右對齊），請將systemManager.stage.align設置爲空字符串 - 即：

// in your Application creationComplete handler 
systemManager.stage.scaleMode = StageScaleMode.SHOW_ALL; 
systemManager.stage.align = "";

來源

2013-08-14 04:55:47

將Flex組件放置在屏幕中間

回答

相關問題