背景:
在使用官方提供的Layout组件的时候，Grid模式不能直接在编辑器中指定等分每列，需要通过代码来确定，使用其他不够直观。
扩展Layout
###添加如下属性
var ResizeMode = cc.Enum({
/**
* !#en Don't do any scale.
* !#zh 不做任何缩放
* @property {Number} NONE
*/
NONE: 0,
/**
* !#en The container size will be expanded with its children's size.
* !#zh 容器的大小会根据子节点的大小自动缩放。
* @property {Number} CONTAINER
*/
CONTAINER: 1,
/**
* !#en Child item size will be adjusted with the container's size.
* !#zh 子节点的大小会随着容器的大小自动缩放。
* @property {Number} CHILDREN
*/
CHILDREN: 2,
/**
* !#zh 列数确定。
* @property {Number} COLUMN_FIXED
*/
COLUMN_FIXED:3,
/**
* !#zh 行数确定。
* @property {Number} ROW_FIXED
*/
ROW_FIXED:4,
/**
* !#zh 列数和行数确定。
* @property {Number} COLUMN_ROW_FIXED
*/
COLUMN_ROW_FIXED:5,
});
###效果
PS:官方Layout的小问题
...
if (rowBreak) {
var rowBreakBoundary = nextX + rightBoundaryOfChild + sign * (sign > 0 ? this.paddingRight : this.paddingLeft);
//此处直接比较会有些问题，由于nextX上面的处理会导致精度丢失
var leftToRightRowBreak = this.horizontalDirection === HorizontalDirection.LEFT_TO_RIGHT && rowBreakBoundary > (1 - layoutAnchor.x) * baseWidth;
var rightToLeftRowBreak = this.horizontalDirection === HorizontalDirection.RIGHT_TO_LEFT && rowBreakBoundary < -layoutAnchor.x * baseWidth;
...
临时方案：
...
if (rowBreak) {
var rowBreakBoundary = nextX + rightBoundaryOfChild + sign * (sign > 0 ? this.paddingRight : this.paddingLeft);
//添加_toFixed处理
var leftToRightRowBreak = this.horizontalDirection === HorizontalDirection.LEFT_TO_RIGHT && this._toFixed(rowBreakBoundary, 5) > this._toFixed((1 - layoutAnchor.x) * baseWidth, 5);
var rightToLeftRowBreak = this.horizontalDirection === HorizontalDirection.RIGHT_TO_LEFT && this._toFixed(rowBreakBoundary, 5) < this._toFixed(-layoutAnchor.x * baseWidth, 5);
...
_toFixed代码：
// toFixed 修复
_toFixed: function(num, s) {
var times = Math.pow(10, s)
var des = num * times + 0.5
des = parseInt(des, 10) / times
return des + ''
},
工程Demo下载Demo.zip (366.6 KB)
