layabox list底层渲染方式

做功能意外发现list的渲染没有按照arr顺序进行,而是从上往下、从左往右进行渲染的。

仔细观察,博主所做的功能,list纵向有两个item,横向可以无限增加item个数。

查看laya引擎底层list类,发现渲染代码如下

	private function _createItems(startY:int, numX:int, numY:int):void {
			var box:Box = _content;
			var cell:Box = _getOneCell();
			var cellWidth:Number = cell.width + _spaceX;
			var cellHeight:Number = cell.height + _spaceY;
			
			if (cacheContent) {
				var cacheBox:Box = new Box();
				cacheBox.cacheAsBitmap = true;
				cacheBox.pos((_isVertical ? 0 : startY) * cellWidth, (_isVertical ? startY : 0) * cellHeight);
				_content.addChild(cacheBox);
				_content.optimizeScrollRect = true;
				box = cacheBox;
			} else {
				var arr:Array = [];
				for (var i:int = _cells.length - 1; i > -1; i--) {
					var item:Box = _cells[i];
					item.removeSelf();
					arr.push(item);
				}
				_cells.length = 0;
			}
			//这里是关键代码,_isVertical设置纵向滚动条时,渲染方向为从左往右、从上往下
            //设置横向滚动条时,渲染方向为从上往下,从左往右,_isVertical默认为true
			for (var k:int = startY; k < numY; k++) {
				for (var l:int = 0; l < numX; l++) {
					if (arr && arr.length) {
						cell = arr.pop();
					} else {
						cell = createItem();
					}
					cell.x = (_isVertical ? l : k) * cellWidth - box.x;
					cell.y = (_isVertical ? k : l) * cellHeight - box.y;
					cell.name = "item" + (k * numX + l);
					box.addChild(cell);
					addCell(cell);
				}
			}
		}

故,laya引擎在渲染list item时,设置纵向滚动条或者不设置滚动条时,渲染方向为从左往右、从上往下;设置横向滚动条时,渲染方向为从上往下、从左往右。

laya引擎暂时不支持手动调节渲染方向,故一定需要手动调整渲染方向时,可以对arr数据的顺序进行操作来实现。

发布了61 篇原创文章 · 获赞 2 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/qq_22794043/article/details/89166670