layabox list item居中_如何使laya的list组件内容居中-优快云博客

项目开发中，为了实现list item的居中展示，通常会避免手动调整坐标。本文介绍了一种通过代码动态计算并实现list居中的方法，包括根据item数量和空间调整list的x坐标，以达到自适应的效果。此外，还提供了一个更精简、更通用的list居中代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目开发中，经常遇到list的渲染item需要居中的需求，刚开始做这个的时候，很傻逼地用chrome一个个调好坐标，然后在代码里面再根据item的数量设置list的坐标，这样做不仅费时，而且肉眼比较难看出一两个像素的布局中差距。

比较好的做法是，直接用代码实现居中，不写死坐标值

var len:int = list.length;

var spaceNum:int = len - 1;

len = len>4?4:len;

var _w:int = item.width*len + spaceNum*list.spaceX;

list.x = (576 - _w)/2;

//4为每一行需要显示的item数量，576为项目统一规定的width尺寸（不同的开发项目，值可能不一样，根据具体项目赋值即可）

############2019-3-11再次编辑##################

更精简更通用的list居中代码

//每一行允许同时显示在界面的最大item数量

var maxCell:int = 5;

var len:int = list.arrat.length>=maxCell?maxCell:list.array.length;

var spaceNum:int = len - 1;

//containe为list的直接父容器，item为list用于渲染的cell

list.x = container.x + (container.width - (len*item.width + spaceNum*list.spaceX))/2;

下面直接上封装好的接口，项目中需要用到的LIST居中效果太多了

/**
* 注意，这里写的是横向局中的，纵向的居中逻辑一样，稍作修改即可
* lis-list组件
* parentW-list组件的父容器的宽度
*childW-list组件渲染子对象的宽度
*maxNum-list一行最多显示几个子对象
*/
function layoutList(lis:List,parentW:int,childW:maxNum:int):void{
    //list实际一行显示的子对象个数
    var len:int = list.length > maxNum?maxNum:lis.length;
    //list组件缝隙个数
    var spaceNum:int = len > 1?len-1:0;
    //list组件的宽度
    var _w:int = len*childW + spaceNum*lis.spaceX;
    //小数点太多就直接取整了，0.5像素看不出差别
    lis.x = Math.floor((parentW - _w)/2);
}