Layout組件使用以下配置：

1.png

效果如下圖所示

2.png

cocosCreator版本：1.9.2

這個效果明顯不是我想要的，我想要的效果是卡牌不論有多少張，它們在垂直方向都能居中，而在實際效果圖中我們看到明顯是往上偏移了。
此時，觀察到我們的這個Layout組件的高度值僅有一個卡牌高度的量（如一張卡牌高度是100，那么兩張卡牌高度本應該是200，而我們這個Layout的實際高度僅有100），所以可以得到一個結論：問題出在Layout的高度計算代碼有誤。

解決方案
新建一個JavaScript文件，然后使其繼承自cc.Layout，然后重寫它在GRID這種Type情況下的垂直方向布局方法。

cc.Class({
    extends: cc.Layout,

    properties: {

    },

    //覆蓋父類同名方法，代碼取自父類方法，僅修改幾個小細節(jié)
    _doLayoutGridAxisHorizontal(layoutAnchor, layoutSize){
        var baseWidth = layoutSize.width;

        var sign = 1;
        var bottomBoundaryOfLayout = -layoutAnchor.y * layoutSize.height;
        var paddingY = this.paddingBottom;
        if (this.verticalDirection === cc.Layout.VerticalDirection.TOP_TO_BOTTOM) {
            sign = -1;
            bottomBoundaryOfLayout = (1 - layoutAnchor.y) * layoutSize.height;
            paddingY = this.paddingTop;
        }

        //修改處1：此處根據(jù)sign的不同使用不同計算方式
        var fnPositionY = function(child, topOffset, row) {
            return sign === 1 ? (bottomBoundaryOfLayout + topOffset + child.anchorY * child.height + paddingY + row * this.spacingY) : 
            (bottomBoundaryOfLayout - topOffset - (1 - child.anchorY) * child.height - paddingY - row * this.spacingY);
        }.bind(this);

        //修改處2：resizeMode === CONTAINER時的高度計算方式修改
        this._doLayoutHorizontally(baseWidth, true, fnPositionY, true);

        if (this.resizeMode === cc.Layout.ResizeMode.CONTAINER) {
            var minY = Number.MAX_VALUE, maxY = Number.MIN_VALUE;
            for(var c of this.node.children)
            {
                if (c.activeInHierarchy) {
                    var b = c.getBoundingBox();
                    if(b.yMin < minY)minY = b.yMin;
                    if(b.yMax > maxY)maxY = b.yMax;
                }
            }

            var newHeight = maxY - minY;
            this.node.setContentSize(baseWidth, newHeight);

            bottomBoundaryOfLayout = sign === 1 ? (-layoutAnchor.y * newHeight) : ((1 - layoutAnchor.y) * newHeight);
            this._doLayoutHorizontally(baseWidth, true, fnPositionY, true);
        }
    }
});

使用此Javascript文件替代Layout作為布局組件即可解決問題，當然，要是你想修改官方cc.Layout的源碼也行，就是步驟多一點，而且升級ccc之后還得重新寫一遍。希望官方人員看到此貼后可以及時修改Layout中相關高度計算的源碼。不過我這個只給出了自適應高度的計算代碼，全當拋磚引玉了，自適應寬度的計算代碼在此就不寫了