Question

我有以下Flex应用程序标记：

<app:MyApplicationClass
    xmlns:app="*"
     width="100%"
    height="100%"
    layout="vertical"
    horizontalScrollPolicy="off"
    verticalScrollPolicy="off">
    <mx:VBox id="idPageContainer" width="100%" height="100%" verticalGap="0"
        horizontalScrollPolicy="off" verticalScrollPolicy="off">
        <mx:HBox id="idTopContainer" width="100%" height="28" horizontalGap="2">
            (top menu stuff goes here)
        </mx:HBox>
        <mx:HBox id="idBottomContainer" width="100%" height="100%" verticalScrollPolicy="off" clipContent="false">
            (page stuff goes here)
        </mx:HBox>
    </mx:VBox>
</app:MyApplicationClass>

当我运行它时，它显示具有固定高度的顶部面板和具有可变高度的底部面板。我希望底部面板的高度包含剩余的高度，但它会以某种方式溢出页面外。

我发现解决此高度问题的唯一方法（到目前为止）是以编程方式将高度设置为固定而不是变量：

    <mx:HBox id="idBottomContainer" width="100%" height="700" verticalScrollPolicy="off" clipContent="false">
        (page stuff goes here)
    </mx:HBox>

代码隐藏：

package {
    import mx.containers.HBox;
    import mx.core.Application;
    import mx.events.ResizeEvent; 

    // (...) 
    public class MyApplicationClass extends Application {
        public var idBottomContainer:HBox;
        // (...) 

        private function ON_CreationComplete (event:FlexEvent) : void {
            // (...) 
            addEventListener(ResizeEvent.RESIZE, ON_Resize);
        } 

        private function ON_Resize (event:Event) : void {
            idBottomContainer.height = this.height - idTopContainer.height;
        }
    }
}

但这个解决方案太“脏”了，我正在寻找一种更优雅的方式。有没有人知道另一种选择？

Answer 1

在我看来你应该做些什么。我有类似的东西在无数的屏幕上工作。但是如果你真的被卡住了，你可以尝试用Canvas替换VBox并做类似的事情：

<mx:Canvasid="idPageContainer" width="100%" height="100%" verticalGap="0"
    horizontalScrollPolicy="off" verticalScrollPolicy="off">
    <mx:HBox id="idTopContainer" width="100%" height="28" horizontalGap="2">
        (top menu stuff goes here)
    </mx:HBox>
    <mx:HBox id="idBottomContainer" width="100%" top="{idTopContainer.height}" 
        height="{idPageContainer.height - idTopContainer.height}"
          verticalScrollPolicy="off" clipContent="false">
        (page stuff goes here)
    </mx:HBox>
</mx:Canvas>

Flex固定和可变高度 - 可以在标记中设置吗？

1 个答案: