panel滾動區域

panel是LAYA提供的一種滾動組件，LIST也可以滾動。

給panel直接添加子元素，發現panel的滾動區域有點大，最後一個子元素可以一直滑到panel中間，而策劃想要的效果確實panel的最後一個子元素，滑到panel邊緣就不要再滑動。

實現方法是在UI編輯器裏面給panel添加一個子元素box，把原本需要添加到panel的元素添加到box，設置一個變量tempY記錄box所有子元素的高度及間隙總和，每添加一個元素，tempY累加子元素的高和相鄰元素間隙（最後一個子元素可以不加相鄰元素間隙），最後設置box的高度爲tempY即可實現panel最後一個子元素滑到邊緣就停止滑動

//***************************************************分割線，下面是LAYA源碼分析******************************************************

LAYA panel組件源碼

Panel在創建時，會自動給panel添加一個_contentBox

		/**@inheritDoc */
		override protected function createChildren():void {
			super.addChild(_content = new Box());
		}

然後重寫了一系列add和remove方法，重寫成add和remove都是對panel的子元素_contentBox進行的add和remove

		/**@inheritDoc */
		override public function addChild(child:Node):Node {
			child.on(Event.RESIZE, this, onResize);
			_setScrollChanged();
			return _content.addChild(child);
		}
		
		/**
		 * @private
		 * 子對象的 <code>Event.RESIZE</code> 事件偵聽處理函數。
		 */
		private function onResize():void {
			_setScrollChanged();
		}
		
		/**@inheritDoc */
		override public function addChildAt(child:Node, index:int):Node {
			child.on(Event.RESIZE, this, onResize);
			_setScrollChanged();
			return _content.addChildAt(child, index);
		}
		
		/**@inheritDoc */
		override public function removeChild(child:Node):Node {
			child.off(Event.RESIZE, this, onResize);
			_setScrollChanged();
			return _content.removeChild(child);
		}
		
		/**@inheritDoc */
		override public function removeChildAt(index:int):Node {
			getChildAt(index).off(Event.RESIZE, this, onResize);
			_setScrollChanged();
			return _content.removeChildAt(index);
		}
		
		/**@inheritDoc */
		override public function removeChildren(beginIndex:int = 0, endIndex:int = 0x7fffffff):Node {
			_content.removeChildren(beginIndex, endIndex);
			_setScrollChanged();
			return this;
		}
		
		/**@inheritDoc */
		override public function getChildAt(index:int):Node {
			return _content.getChildAt(index);
		}
		
		/**@inheritDoc */
		override public function getChildByName(name:String):Node {
			return _content.getChildByName(name);
		}
		
		/**@inheritDoc */
		override public function getChildIndex(child:Node):int {
			return _content.getChildIndex(child);
		}
		
		/**@inheritDoc */
		override public function get numChildren():int {
			return _content.numChildren;
		}

所有實現panel滾動的時候，直接添加在panel中，相當於直接添加在_contentBox中,關係相當於panel-_contentBox-children;

而new一個box，添加到panel，然後再在new的box裏面添加內容，關係相當於panel-_contentBox-new Box-children

panel通過設置並操作裁剪區域實現滾動效果，

設置裁剪

		
		/**
		 * @private
		 * 設置內容的寬度、高度（以像素爲單位）。
		 * @param width 寬度。
		 * @param height 高度。
		 */
		private function setContentSize(width:Number, height:Number):void {
			var content:Box = _content;
			content.width = width;
			content.height = height;
			content._style.scrollRect || (content.scrollRect = Rectangle.create());
			content._style.scrollRect.setTo(0, 0, width, height);
			content.scrollRect = content.scrollRect;
		}

操作裁剪區域X或者Y（相當於設置起始填充座標）

		/**
		 * @private
		 * 滾動條的<code><code>Event.MOUSE_DOWN</code>事件偵聽處理函數。</code>事件偵聽處理函數。
		 * @param scrollBar 滾動條對象。
		 * @param e Event 對象。
		 */
		protected function onScrollBarChange(scrollBar:ScrollBar):void {
			var rect:Rectangle = _content._style.scrollRect;
			if (rect) {
				var start:int = Math.round(scrollBar.value);
				scrollBar.isVertical ? rect.y = start : rect.x = start;
				_content.scrollRect = rect;
			}
		}

滑動時，實際上是改變了scrollRect的X或者Y