如何使用 Actionscript 让 Flex 组件填充可用空间答案

【问题标题】：How to get Flex components to fill available space using Actionscript如何使用 Actionscript 让 Flex 组件填充可用空间
【发布时间】：2010-01-19 03:22:23
【问题描述】：

我正在使用 mxml 布置我的 Flex 组件并让它们正常工作。但后来我想将它们切换到 Actionscript，因为我希望它们扩展一个提供默认功能的基本组件。

我已经完成了代码工作，只是我使用 width="100%" 和 height="100%" 填充整个空间的组件似乎只使用默认尺寸显示。你知道我怎样才能让它们再次占据整个空间吗？

这是我正在使用的一个测试组件，它显示了问题。

Main.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:bbq="components.*" backgroundGradientColors="[#000000, #3333dd]" minWidth="480" minHeight="320" layout="vertical" verticalAlign="top" horizontalAlign="center" paddingLeft="0" paddingRight="0" paddingTop="30" paddingBottom="0" width="100%" height="100%" >

<mx:VBox backgroundColor="0xcccc66">
    <mx:ViewStack id="mainViewStack" width="100%" height="100%" color="0x323232">
        <bbq:TestComp id="testComp" height="100%" width="100%" />
        <bbq:ResultsBox />
    </mx:ViewStack>
</mx:VBox>

TestComp.as

package components {

import mx.containers.VBox;

import mx.containers.Panel;

import flash.events.*;

public class TestComp extends VBox {
    private var p:Panel;

    function TestComp(){
        super();
        percentHeight = 100;
        percentWidth = 100;
    }

    override protected function createChildren():void {
        super.createChildren();
        p = new Panel();
        p.percentHeight = 100;
        p.percentWidth = 100;
        p.title = "Test Comp";
        addChild(p);
    }       
}

}

【问题讨论】：

你可以在 MXML 中进行继承，对吧？
这个好像没问题——能贴出对应的mxml吗？您确定 TestComp 的高度/宽度 - 您是否在 mxml 中使用了固定值？
我在上面添加了包装测试组件的代码。

标签： apache-flex actionscript viewstack vbox

【解决方案1】：

添加继承的方法调用；调用 super() 方法；

import mx.containers.VBox;
import mx.containers.Panel;
import flash.events.*;

public class TestComp extends VBox {
    private var p:Panel;

    function TestComp(){
        super(); // add this line

        percentHeight = 100;
        percentWidth = 100;
    }

    override protected function createChildren():void {
        super.createChildren(); // add this line

        p = new Panel();
        p.percentHeight = 100;
        p.percentWidth = 100;
        p.title = "Test Comp";
        addChild(p);
    }       
}

在你的mxml中：

<local:TestComp width="100%" height="100%" />

【讨论】：

我添加了这些超级，但仍然有问题。

【解决方案2】：

我想我可能知道它是什么。我认为我明确设置了视图堆栈中其他组件之一的宽度和高度，并且我认为这影响了视图堆栈本身，因此添加到其中的所有其他组件也具有这些尺寸。

【讨论】：

【解决方案3】：

resizeToContent=true

【讨论】：