代码之家  ›  专栏  ›  技术社区  ›  Prutswonder

弹性固定和可变高度-可以在标记中设置吗?

  •  1
  • Prutswonder  · 技术社区  · 16 年前

    我有以下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;
            }
        }
    } 
    

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

    1 回复  |  直到 16 年前
        1
  •  3
  •   Robusto    16 年前

    在我看来你应该做什么。我在无数的屏幕上都有类似的东西。但是如果你真的被卡住了,你可以尝试用画布替换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>