Flex组件居中问题

大多数 Flex 容器使用预定义的规则集来自动定位您在其内定义的所有子组件。如果您使用 Canvas 容器, 或者 Application 或 Panel 容器, 其 layout 属性被设置为 "absolute", 则可以为其子级指定绝对位置, 或者使用基于限制的布局。

 

在 Flex 应用程序中定位组件的方法有三种:

 

• 使用自动定位
• 使用绝对定位
• 使用基于限制的布局

•  

  详细可见：http://www.adobe.com/cn/devnet/flex/quickstart/layout_modes/

   

   

  下面我讲总结一下我在学习中遇到的组件布局的问题，集中在居中问题，如：让弹出的窗体居中(通过x,y，而不是使用TitleWindow的createPopUp方法)

   

  如果使用x,y来定位组件时，前提必须是父容器的layout属性值为absolute，这让才能让子容器或者组件的x y有效，而x y是绝对定位，所以要实现水平垂直居中可能没有那么容易，不过其实也很简单，下面将详细讲述一下：

   

  例：在一个Application中需要弹出一个TitleWindow窗口，如果不采用createPopUp方法进行弹出，而使用addPopUp方法，则弹出的窗口的位于左上端，即x y 都等于0，我们想实现的效果是使用xy坐标定位让窗口居中显示，实现的原理如下：

   

  x坐标 = (父容器的宽度 - 窗口的宽度)/2;

  y坐标 = (父容器的高度 - 窗口的高度)/2;

   

  注：前提是父容器的layout属性值为absolute

   

   

  下面将以下我在学习过程中的实例： 

   

  我在使用FlexLib组件库中的MDIWindow的时候，要实现的效果类似，就是弹出一个MDIWindow，其父容器时MDICanvas，实现的原理是一样的，但是操作有点不同。

   

  var win:MDIWindow = new MDIWindow();
  win.width = 500;
  win.height = 400;
  win.layout = "absolute";
      
  mdiCanvas.windowManager.add(win);  // mdiCanvas是MDICanvas的id
  
  win.x = (mdiCanvas.width - win.width)/2;
  win.y = (mdiCanvas.height - win.height)/2;

   

  如上代码：

   

  MDIWindow的x y坐标是在add完之后才设置，如果在add之前设置将无效。