Flex之旅：第二部分：容器与布局(6)---在容器中滚动到某个指定的子组件

原创

茜茜770 2022-12-06 10:36:20 博主文章分类：flex ©著作权

文章标签 xml ide spark 文章分类 虚拟化云计算

©著作权归作者所有：来自51CTO博客作者茜茜770的原创作品，请联系作者获取转载授权，否则将追究法律责任

页面与内容之间，肯定存在着，页面框架大小已经固定，而框架里面的内容是很多，超出框架大小的情况。

这样一来，就需要控制当前页面，滚动到具体的某个内容上，显示出来。

设定，这两个值，可以控制横向滚动和纵向滚动的位置：

mx.core.Container.verticalScrollPosition():Number

mx.core.Container.horizontalScrollPosition():Number

下面看例子：

<?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="800"
         height="600">
  <mx:Canvas id="c">
    <fx:Script>
      <![CDATA[
        private function showScrollValue():void{
          trace(vbox.verticalScrollPosition+" "+vbox.horizontalScrollPosition);
        }
        
        private function changeScrollToShowChild():void
        {
          vbox.verticalScrollPosition =
            (returnChildrenHeights((comboBox.selectedItem as Number))) - vbox.height;
        }
        
        private function returnChildrenHeights(index:int):Number
        {
          var i:int = 0;
          var sumHeight:Number = 0;
          while(i<index) {
            sumHeight += vbox.getChildAt(i).height;
            i++;
          }
          return sumHeight;
        }
      ]]>
    </fx:Script>
    <mx:ComboBox id="comboBox" change="changeScrollToShowChild()">
      <mx:dataProvider>
        <fx:Array>
          <fx:Number>1</fx:Number>
          <fx:Number>2</fx:Number>
          <fx:Number>3</fx:Number>
          <fx:Number>4</fx:Number>
          <fx:Number>5</fx:Number>
        </fx:Array>
      </mx:dataProvider>
    </mx:ComboBox>
    <mx:VBox width="650" height="300" id="vbox"
         backgroundColor="#00ffff" y="50" verticalScrollPolicy="on"
         scroll="showScrollValue()" paddingLeft="50" verticalGap="0">
      <mx:Panel height="150" width="550">
        <mx:LinkButton label="First"/>
      </mx:Panel>
      <mx:Panel height="160" width="550">
        <mx:LinkButton label="Second"/>
      </mx:Panel>
      <mx:Panel height="110" width="550">
        <mx:LinkButton label="Third"/>
      </mx:Panel>
      <mx:Panel height="150" width="550">
        <mx:LinkButton label="Fourth"/>
      </mx:Panel>
      <mx:Panel height="130" width="550">
        <mx:LinkButton label="Fifth"/>
      </mx:Panel>
    </mx:VBox>
  </mx:Canvas>
  
</s:Application>