@nativescript/core 9.0.21-next.2 → 9.0.21-next.21

package/ui/layouts/flexbox-layout/index.ios.js

@@ -1,32 +1,29 @@
 import { FlexDirection, FlexWrap, JustifyContent, AlignItems, AlignContent, FlexboxLayoutBase, FlexBasisPercent, orderProperty, flexGrowProperty, flexShrinkProperty, flexWrapBeforeProperty, alignSelfProperty } from './flexbox-layout-common';
 import { View } from '../../core/view';
 import { layout } from '../../../utils';
+import { CoreTypes } from '../../../core-types';
 export * from './flexbox-layout-common';
-var EXACTLY = layout.EXACTLY;
-var AT_MOST = layout.AT_MOST;
-var UNSPECIFIED = layout.UNSPECIFIED;
-var MEASURED_SIZE_MASK = layout.MEASURED_SIZE_MASK;
-var MEASURED_STATE_TOO_SMALL = layout.MEASURED_STATE_TOO_SMALL;
-function requestFlexboxLayout(value) {
-    const flexbox = this.parent;
-    if (flexbox instanceof FlexboxLayoutBase) {
-        flexbox.requestLayout();
-    }
-}
+const EXACTLY = layout.EXACTLY;
+const AT_MOST = layout.AT_MOST;
+const UNSPECIFIED = layout.UNSPECIFIED;
+const MEASURED_STATE_TOO_SMALL = layout.MEASURED_STATE_TOO_SMALL;
+const MATCH_PARENT = -1;
+const WRAP_CONTENT = -2;
+const View_sUseZeroUnspecifiedMeasureSpec = true; // NOTE: android version < M
+const makeMeasureSpec = layout.makeMeasureSpec;
+const getMeasureSpecMode = layout.getMeasureSpecMode;
+const getMeasureSpecSize = layout.getMeasureSpecSize;
 View.prototype[orderProperty.setNative] = requestFlexboxLayout;
 View.prototype[flexGrowProperty.setNative] = requestFlexboxLayout;
 View.prototype[flexShrinkProperty.setNative] = requestFlexboxLayout;
 View.prototype[flexWrapBeforeProperty.setNative] = requestFlexboxLayout;
 View.prototype[alignSelfProperty.setNative] = requestFlexboxLayout;
-const MATCH_PARENT = -1;
-const WRAP_CONTENT = -2;
-const View_sUseZeroUnspecifiedMeasureSpec = true; // NOTE: android version < M
-// Long ints may not be safe in JavaScript
-const MAX_SIZE = 0x00ffffff & MEASURED_SIZE_MASK;
-var makeMeasureSpec = layout.makeMeasureSpec;
-var getMeasureSpecMode = layout.getMeasureSpecMode;
-var getMeasureSpecSize = layout.getMeasureSpecSize;
-import { CoreTypes } from '../../enums';
+function requestFlexboxLayout(_value) {
+    const flexbox = this.parent;
+    if (flexbox instanceof FlexboxLayoutBase) {
+        flexbox.requestLayout();
+    }
+}
 // `eachLayoutChild` iterates over children, and we need more - indexed access.
 // This class tries to accomodate that by collecting all children in an
 // array no more than once per measure.
@@ -52,7 +49,7 @@ class FlexLine {
         this._right = Number.MAX_VALUE;
         this._bottom = Number.MAX_VALUE;
         this._mainSize = 0;
-        this._dividerLengthInMainSize = 0;
+        this._gapLengthInMainSize = 0;
         this._crossSize = 0;
         this._itemCount = 0;
         this._goneItemCount = 0;
@@ -102,7 +99,6 @@ class Order {
 }
 export class FlexboxLayout extends FlexboxLayoutBase {
     constructor() {
-        // Omit divider
         super(...arguments);
         this._flexLines = [];
     }
@@ -145,17 +141,20 @@ export class FlexboxLayout extends FlexboxLayoutBase {
         const orders = this._createOrders(childCount);
         return this._sortOrdersIntoReorderedIndices(childCount, orders);
     }
-    _sortOrdersIntoReorderedIndices(childCount, orders) {
+    _sortOrdersIntoReorderedIndices(_childCount, orders) {
         orders.sort((a, b) => a.compareTo(b));
         if (!this._orderCache) {
             this._orderCache = [];
         }
-        this._orderCache.length = 0;
+        else {
+            this._orderCache.length = 0;
+        }
         const reorderedIndices = [];
-        orders.forEach((order, i) => {
+        for (let i = 0, length = orders.length; i < length; i++) {
+            const order = orders[i];
             reorderedIndices[i] = order.index;
-            this._orderCache[i] = order.order;
-        });
+            this._orderCache[order.index] = order.order;
+        }
         return reorderedIndices;
     }
     _createOrders(childCount) {
@@ -195,91 +194,93 @@ export class FlexboxLayout extends FlexboxLayoutBase {
         const heightMode = getMeasureSpecMode(heightMeasureSpec);
         let childState = 0;
         this._flexLines.length = 0;
-        (() => {
-            const childCount = this.measureContext.childrenCount;
-            const paddingStart = FlexboxLayout.getPaddingStart(this);
-            const paddingEnd = FlexboxLayout.getPaddingEnd(this);
-            let largestHeightInRow = Number.MIN_VALUE;
-            let flexLine = new FlexLine();
-            let indexInFlexLine = 0;
-            flexLine._mainSize = paddingStart + paddingEnd;
-            for (let i = 0; i < childCount; i++) {
-                const child = this._getReorderedChildAt(i);
-                if (child === null) {
-                    this._addFlexLineIfLastFlexItem(i, childCount, flexLine);
-                    continue;
-                }
-                else if (child.isCollapsed) {
-                    flexLine._itemCount++;
-                    flexLine._goneItemCount++;
-                    this._addFlexLineIfLastFlexItem(i, childCount, flexLine);
-                    continue;
-                }
-                child._updateEffectiveLayoutValues(widthSize, widthMode, heightSize, heightMode);
-                const lp = child; // child.style;
-                if (FlexboxLayout.getAlignSelf(child) === 'stretch') {
-                    flexLine._indicesAlignSelfStretch.push(i);
-                }
-                let childWidth = lp.effectiveWidth;
-                if (FlexBasisPercent.DEFAULT /*lp.flexBasisPercent*/ !== FlexBasisPercent.DEFAULT && widthMode === EXACTLY) {
-                    childWidth = Math.round(widthSize * FlexBasisPercent.DEFAULT /*lp.flexBasisPercent*/);
-                }
-                const childWidthMeasureSpec = FlexboxLayout.getChildMeasureSpec(widthMeasureSpec, lp.effectivePaddingLeft + lp.effectivePaddingRight + lp.effectiveMarginLeft + lp.effectiveMarginRight, childWidth < 0 ? WRAP_CONTENT : childWidth);
-                const childHeightMeasureSpec = FlexboxLayout.getChildMeasureSpec(heightMeasureSpec, lp.effectivePaddingTop + lp.effectivePaddingBottom + lp.effectiveMarginTop + lp.effectiveMarginBottom, lp.effectiveHeight < 0 ? WRAP_CONTENT : lp.effectiveHeight);
-                child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
-                this._checkSizeConstraints(child);
-                childState = View.combineMeasuredStates(childState, child.getMeasuredState());
-                largestHeightInRow = Math.max(largestHeightInRow, child.getMeasuredHeight() + lp.effectiveMarginTop + lp.effectiveMarginBottom);
-                if (this._isWrapRequired(child, widthMode, widthSize, flexLine._mainSize, child.getMeasuredWidth() + lp.effectiveMarginLeft + lp.effectiveMarginRight, i, indexInFlexLine)) {
-                    if (flexLine.layoutVisibleItemCount > 0) {
-                        this._addFlexLine(flexLine);
-                    }
-                    flexLine = new FlexLine();
-                    flexLine._itemCount = 1;
-                    flexLine._mainSize = paddingStart + paddingEnd;
-                    largestHeightInRow = child.getMeasuredHeight() + lp.effectiveMarginTop + lp.effectiveMarginBottom;
-                    indexInFlexLine = 0;
-                }
-                else {
-                    flexLine._itemCount++;
-                    indexInFlexLine++;
-                }
-                flexLine._mainSize += child.getMeasuredWidth() + lp.effectiveMarginLeft + lp.effectiveMarginRight;
-                flexLine._totalFlexGrow += FlexboxLayout.getFlexGrow(child);
-                flexLine._totalFlexShrink += FlexboxLayout.getFlexShrink(child);
-                flexLine._crossSize = Math.max(flexLine._crossSize, largestHeightInRow);
-                // Omit divider
-                if (this.flexWrap !== FlexWrap.WRAP_REVERSE) {
-                    flexLine._maxBaseline = Math.max(flexLine._maxBaseline, FlexboxLayout.getBaseline(child) + lp.effectiveMarginTop);
-                }
-                else {
-                    flexLine._maxBaseline = Math.max(flexLine._maxBaseline, child.getMeasuredHeight() - FlexboxLayout.getBaseline(child) + lp.effectiveMarginBottom);
-                }
+        const childCount = this.measureContext.childrenCount;
+        const paddingStart = FlexboxLayout.getPaddingStart(this);
+        const paddingEnd = FlexboxLayout.getPaddingEnd(this);
+        let largestHeightInRow = Number.MIN_VALUE;
+        let flexLine = new FlexLine();
+        let indexInFlexLine = 0;
+        flexLine._mainSize = paddingStart + paddingEnd;
+        for (let i = 0; i < childCount; i++) {
+            const child = this._getReorderedChildAt(i);
+            if (child === null) {
                 this._addFlexLineIfLastFlexItem(i, childCount, flexLine);
+                continue;
+            }
+            else if (child.isCollapsed) {
+                flexLine._itemCount++;
+                flexLine._goneItemCount++;
+                this._addFlexLineIfLastFlexItem(i, childCount, flexLine);
+                continue;
+            }
+            child._updateEffectiveLayoutValues(widthSize, widthMode, heightSize, heightMode);
+            const lp = child; // child.style;
+            if (FlexboxLayout.getAlignSelf(child) === 'stretch') {
+                flexLine._indicesAlignSelfStretch.push(i);
+            }
+            let childWidth = lp.effectiveWidth;
+            if (FlexBasisPercent.DEFAULT /*lp.flexBasisPercent*/ !== FlexBasisPercent.DEFAULT && widthMode === EXACTLY) {
+                childWidth = Math.round(widthSize * FlexBasisPercent.DEFAULT /*lp.flexBasisPercent*/);
+            }
+            const childWidthMeasureSpec = FlexboxLayout.getChildMeasureSpec(widthMeasureSpec, lp.effectivePaddingLeft + lp.effectivePaddingRight + lp.effectiveMarginLeft + lp.effectiveMarginRight, childWidth < 0 ? WRAP_CONTENT : childWidth);
+            const childHeightMeasureSpec = FlexboxLayout.getChildMeasureSpec(heightMeasureSpec, lp.effectivePaddingTop + lp.effectivePaddingBottom + lp.effectiveMarginTop + lp.effectiveMarginBottom, lp.effectiveHeight < 0 ? WRAP_CONTENT : lp.effectiveHeight);
+            child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
+            this._checkSizeConstraints(child);
+            childState = View.combineMeasuredStates(childState, child.getMeasuredState());
+            largestHeightInRow = Math.max(largestHeightInRow, child.getMeasuredHeight() + lp.effectiveMarginTop + lp.effectiveMarginBottom);
+            if (this._isWrapRequired(child, widthMode, widthSize, flexLine._mainSize, child.getMeasuredWidth() + lp.effectiveMarginLeft + lp.effectiveMarginRight, i, indexInFlexLine)) {
+                if (flexLine.layoutVisibleItemCount > 0) {
+                    this._addFlexLine(flexLine);
+                }
+                flexLine = new FlexLine();
+                flexLine._itemCount = 1;
+                flexLine._mainSize = paddingStart + paddingEnd;
+                largestHeightInRow = child.getMeasuredHeight() + lp.effectiveMarginTop + lp.effectiveMarginBottom;
+                indexInFlexLine = 0;
+            }
+            else {
+                flexLine._itemCount++;
+                indexInFlexLine++;
+            }
+            flexLine._mainSize += child.getMeasuredWidth() + lp.effectiveMarginLeft + lp.effectiveMarginRight;
+            flexLine._totalFlexGrow += FlexboxLayout.getFlexGrow(child);
+            flexLine._totalFlexShrink += FlexboxLayout.getFlexShrink(child);
+            flexLine._crossSize = Math.max(flexLine._crossSize, largestHeightInRow);
+            // Check if column gap is required for the flex item
+            if (this.effectiveColumnGap > 0 && this._hasPrecedingViews(i, indexInFlexLine)) {
+                flexLine._mainSize += this.effectiveColumnGap;
+                flexLine._gapLengthInMainSize += this.effectiveColumnGap;
+            }
+            if (this.flexWrap !== FlexWrap.WRAP_REVERSE) {
+                flexLine._maxBaseline = Math.max(flexLine._maxBaseline, FlexboxLayout.getBaseline(child) + lp.effectiveMarginTop);
+            }
+            else {
+                flexLine._maxBaseline = Math.max(flexLine._maxBaseline, child.getMeasuredHeight() - FlexboxLayout.getBaseline(child) + lp.effectiveMarginBottom);
             }
-        })();
+            this._addFlexLineIfLastFlexItem(i, childCount, flexLine);
+        }
         this._determineMainSize(this.flexDirection, widthMeasureSpec, heightMeasureSpec);
         if (this.alignItems === AlignItems.BASELINE) {
             let viewIndex = 0;
-            this._flexLines.forEach((flexLine) => {
+            for (const fl of this._flexLines) {
                 let largestHeightInLine = Number.MIN_VALUE;
-                for (let i = viewIndex; i < viewIndex + flexLine._itemCount; i++) {
+                for (let i = viewIndex; i < viewIndex + fl._itemCount; i++) {
                     const child = this._getReorderedChildAt(i);
                     const lp = child; // .style;
                     if (this.flexWrap !== FlexWrap.WRAP_REVERSE) {
-                        let marginTop = flexLine._maxBaseline - FlexboxLayout.getBaseline(child);
+                        let marginTop = fl._maxBaseline - FlexboxLayout.getBaseline(child);
                         marginTop = Math.max(marginTop, lp.effectiveMarginTop);
                         largestHeightInLine = Math.max(largestHeightInLine, child.getMeasuredHeight() + marginTop + lp.effectiveMarginBottom);
                     }
                     else {
-                        let marginBottom = flexLine._maxBaseline - child.getMeasuredHeight() + FlexboxLayout.getBaseline(child);
+                        let marginBottom = fl._maxBaseline - child.getMeasuredHeight() + FlexboxLayout.getBaseline(child);
                         marginBottom = Math.max(marginBottom, lp.effectiveMarginBottom);
                         largestHeightInLine = Math.max(largestHeightInLine, child.getMeasuredHeight() + lp.effectiveMarginTop + marginBottom);
                     }
                 }
-                flexLine._crossSize = largestHeightInLine;
-                viewIndex += flexLine.itemCount;
-            });
+                fl._crossSize = largestHeightInLine;
+                viewIndex += fl.itemCount;
+            }
         }
         this._determineCrossSize(this.flexDirection, widthMeasureSpec, heightMeasureSpec, this.effectivePaddingTop + this.effectivePaddingBottom);
         this._stretchViews(this.flexDirection, this.alignItems);
@@ -345,7 +346,9 @@ export class FlexboxLayout extends FlexboxLayoutBase {
             flexLine._totalFlexGrow += FlexboxLayout.getFlexGrow(child);
             flexLine._totalFlexShrink += FlexboxLayout.getFlexShrink(child);
             flexLine._crossSize = Math.max(flexLine._crossSize, largestWidthInColumn);
-            // Omit divider
+            if (this.effectiveRowGap > 0 && this._hasPrecedingViews(i, indexInFlexLine)) {
+                flexLine._mainSize += this.effectiveRowGap;
+            }
             this._addFlexLineIfLastFlexItem(i, childCount, flexLine);
         }
         this._determineMainSize(this.flexDirection, widthMeasureSpec, heightMeasureSpec);
@@ -363,9 +366,9 @@ export class FlexboxLayout extends FlexboxLayoutBase {
             needsMeasure = true;
             childWidth = minWidth;
         }
-        else if (view.getMeasuredWidth() > MAX_SIZE /*lp.maxWidth*/) {
+        else if (view.getMeasuredWidth() > view.effectiveMaxWidth) {
             needsMeasure = true;
-            childWidth = MAX_SIZE /*lp.maxWidth*/;
+            childWidth = view.effectiveMaxWidth;
         }
         const minHeight = view.effectiveMinHeight;
         view.effectiveMinHeight = 0;
@@ -373,9 +376,9 @@ export class FlexboxLayout extends FlexboxLayoutBase {
             needsMeasure = true;
             childHeight = minHeight;
         }
-        else if (childHeight > MAX_SIZE /*lp.maxWidth*/) {
+        else if (childHeight > view.effectiveMaxHeight) {
             needsMeasure = true;
-            childHeight = MAX_SIZE /*lp.maxWidth*/;
+            childHeight = view.effectiveMaxHeight;
         }
         if (needsMeasure) {
             view.measure(makeMeasureSpec(childWidth, EXACTLY), makeMeasureSpec(childHeight, EXACTLY));
@@ -389,7 +392,6 @@ export class FlexboxLayout extends FlexboxLayoutBase {
         }
     }
     _addFlexLine(flexLine) {
-        // Omit divider
         this._flexLines.push(flexLine);
     }
     _determineMainSize(flexDirection, widthMeasureSpec, heightMeasureSpec) {
@@ -426,14 +428,14 @@ export class FlexboxLayout extends FlexboxLayoutBase {
                 throw new Error('Invalid flex direction: ' + flexDirection);
         }
         let childIndex = 0;
-        this._flexLines.forEach((flexLine) => {
+        for (const flexLine of this._flexLines) {
             if (flexLine.mainSize < mainSize) {
                 childIndex = this._expandFlexItems(flexLine, flexDirection, mainSize, paddingAlongMainAxis, childIndex);
             }
             else {
                 childIndex = this._shrinkFlexItems(flexLine, flexDirection, mainSize, paddingAlongMainAxis, childIndex);
             }
-        });
+        }
     }
     _expandFlexItems(flexLine, flexDirection, maxMainSize, paddingAlongMainAxis, startIndex) {
         let childIndex = startIndex;
@@ -445,7 +447,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
         let needsReexpand = false;
         const pendingSpace = maxMainSize - flexLine._mainSize;
         const unitSpace = pendingSpace / flexLine._totalFlexGrow;
-        flexLine._mainSize = paddingAlongMainAxis + flexLine._dividerLengthInMainSize;
+        flexLine._mainSize = paddingAlongMainAxis + flexLine._gapLengthInMainSize;
         let accumulatedRoundError = 0;
         for (let i = 0; i < flexLine.itemCount; i++) {
             const child = this._getReorderedChildAt(childIndex);
@@ -462,10 +464,10 @@ export class FlexboxLayout extends FlexboxLayoutBase {
                     const flexGrow = FlexboxLayout.getFlexGrow(child);
                     const rawCalculatedWidth = child.getMeasuredWidth() + unitSpace * flexGrow + accumulatedRoundError;
                     let roundedCalculatedWidth = Math.round(rawCalculatedWidth);
-                    // TODO: MAX_SIZE is so big, this is always false:
-                    if (roundedCalculatedWidth > MAX_SIZE /* lp.maxWidth */) {
+                    // Freeze the child once flex-grow would push it past its max-width (Infinity when unconstrained).
+                    if (roundedCalculatedWidth > child.effectiveMaxWidth) {
                         needsReexpand = true;
-                        roundedCalculatedWidth = MAX_SIZE /* lp.maxWidth */;
+                        roundedCalculatedWidth = child.effectiveMaxWidth;
                         this._childrenFrozen[childIndex] = true;
                         flexLine._totalFlexGrow -= flexGrow;
                     }
@@ -481,10 +483,10 @@ export class FlexboxLayout extends FlexboxLayoutBase {
                     const flexGrow = FlexboxLayout.getFlexGrow(child);
                     const rawCalculatedHeight = child.getMeasuredHeight() + unitSpace * flexGrow + accumulatedRoundError;
                     let roundedCalculatedHeight = Math.round(rawCalculatedHeight);
-                    // TODO: MAX_SIZE is so big this is always false:
-                    if (roundedCalculatedHeight > MAX_SIZE /*lp.maxHeight*/) {
+                    // Freeze the child once flex-grow would push it past its max-height (Infinity when unconstrained).
+                    if (roundedCalculatedHeight > child.effectiveMaxHeight) {
                         needsReexpand = true;
-                        roundedCalculatedHeight = MAX_SIZE /*lp.maxHeight*/;
+                        roundedCalculatedHeight = child.effectiveMaxHeight;
                         this._childrenFrozen[childIndex] = true;
                         flexLine._totalFlexGrow -= flexGrow;
                     }
@@ -512,7 +514,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
         let needsReshrink = false;
         const unitShrink = (flexLine._mainSize - maxMainSize) / flexLine._totalFlexShrink;
         let accumulatedRoundError = 0;
-        flexLine._mainSize = paddingAlongMainAxis + flexLine._dividerLengthInMainSize;
+        flexLine._mainSize = paddingAlongMainAxis + flexLine._gapLengthInMainSize;
         for (let i = 0; i < flexLine.itemCount; i++) {
             const child = this._getReorderedChildAt(childIndex);
             if (child === null) {
@@ -605,81 +607,78 @@ export class FlexboxLayout extends FlexboxLayoutBase {
             }
             else if (this._flexLines.length >= 2 && totalCrossSize < size) {
                 switch (this.alignContent) {
-                    case AlignContent.STRETCH:
-                        (() => {
-                            const freeSpaceUnit = (size - totalCrossSize) / this._flexLines.length;
-                            let accumulatedError = 0;
-                            for (let i = 0, flexLinesSize = this._flexLines.length; i < flexLinesSize; i++) {
-                                const flexLine = this._flexLines[i];
-                                let newCrossSizeAsFloat = flexLine._crossSize + freeSpaceUnit;
-                                if (i === this._flexLines.length - 1) {
-                                    newCrossSizeAsFloat += accumulatedError;
+                    case AlignContent.STRETCH: {
+                        const freeSpaceUnit = (size - totalCrossSize) / this._flexLines.length;
+                        let accumulatedError = 0;
+                        for (let i = 0, flexLinesSize = this._flexLines.length; i < flexLinesSize; i++) {
+                            const flexLine = this._flexLines[i];
+                            let newCrossSizeAsFloat = flexLine._crossSize + freeSpaceUnit;
+                            if (i === this._flexLines.length - 1) {
+                                newCrossSizeAsFloat += accumulatedError;
+                                accumulatedError = 0;
+                            }
+                            let newCrossSize = Math.round(newCrossSizeAsFloat);
+                            accumulatedError += newCrossSizeAsFloat - newCrossSize;
+                            if (accumulatedError > 1) {
+                                newCrossSize += 1;
+                                accumulatedError -= 1;
+                            }
+                            else if (accumulatedError < -1) {
+                                newCrossSize -= 1;
+                                accumulatedError += 1;
+                            }
+                            flexLine._crossSize = newCrossSize;
+                        }
+                        break;
+                    }
+                    case AlignContent.SPACE_AROUND: {
+                        let spaceTopAndBottom = size - totalCrossSize;
+                        const numberOfSpaces = this._flexLines.length * 2;
+                        const newFlexLines = [];
+                        const dummySpaceFlexLine = new FlexLine();
+                        spaceTopAndBottom = spaceTopAndBottom / numberOfSpaces;
+                        dummySpaceFlexLine._crossSize = spaceTopAndBottom;
+                        for (const flexLine of this._flexLines) {
+                            newFlexLines.push(dummySpaceFlexLine);
+                            newFlexLines.push(flexLine);
+                            newFlexLines.push(dummySpaceFlexLine);
+                        }
+                        this._flexLines = newFlexLines;
+                        break;
+                    }
+                    case AlignContent.SPACE_BETWEEN: {
+                        let spaceBetweenFlexLine = size - totalCrossSize;
+                        const numberOfSpaces = this._flexLines.length - 1;
+                        spaceBetweenFlexLine = spaceBetweenFlexLine / numberOfSpaces;
+                        let accumulatedError = 0;
+                        const newFlexLines = [];
+                        for (let i = 0, flexLineSize = this._flexLines.length; i < flexLineSize; i++) {
+                            const flexLine = this._flexLines[i];
+                            newFlexLines.push(flexLine);
+                            if (i !== this._flexLines.length - 1) {
+                                const dummySpaceFlexLine = new FlexLine();
+                                if (i === this._flexLines.length - 2) {
+                                    dummySpaceFlexLine._crossSize = Math.round(spaceBetweenFlexLine + accumulatedError);
                                     accumulatedError = 0;
                                 }
-                                let newCrossSize = Math.round(newCrossSizeAsFloat);
-                                accumulatedError += newCrossSizeAsFloat - newCrossSize;
+                                else {
+                                    dummySpaceFlexLine._crossSize = Math.round(spaceBetweenFlexLine);
+                                }
+                                accumulatedError += spaceBetweenFlexLine - dummySpaceFlexLine._crossSize;
                                 if (accumulatedError > 1) {
-                                    newCrossSize += 1;
+                                    dummySpaceFlexLine._crossSize += 1;
                                     accumulatedError -= 1;
                                 }
                                 else if (accumulatedError < -1) {
-                                    newCrossSize -= 1;
+                                    dummySpaceFlexLine._crossSize -= 1;
                                     accumulatedError += 1;
                                 }
-                                flexLine._crossSize = newCrossSize;
-                            }
-                        })();
-                        break;
-                    case AlignContent.SPACE_AROUND:
-                        (() => {
-                            let spaceTopAndBottom = size - totalCrossSize;
-                            const numberOfSpaces = this._flexLines.length * 2;
-                            spaceTopAndBottom = spaceTopAndBottom / numberOfSpaces;
-                            const newFlexLines = [];
-                            const dummySpaceFlexLine = new FlexLine();
-                            dummySpaceFlexLine._crossSize = spaceTopAndBottom;
-                            this._flexLines.forEach((flexLine) => {
                                 newFlexLines.push(dummySpaceFlexLine);
-                                newFlexLines.push(flexLine);
-                                newFlexLines.push(dummySpaceFlexLine);
-                            });
-                            this._flexLines = newFlexLines;
-                        })();
-                        break;
-                    case AlignContent.SPACE_BETWEEN:
-                        (() => {
-                            let spaceBetweenFlexLine = size - totalCrossSize;
-                            const numberOfSpaces = this._flexLines.length - 1;
-                            spaceBetweenFlexLine = spaceBetweenFlexLine / numberOfSpaces;
-                            let accumulatedError = 0;
-                            const newFlexLines = [];
-                            for (let i = 0, flexLineSize = this._flexLines.length; i < flexLineSize; i++) {
-                                const flexLine = this._flexLines[i];
-                                newFlexLines.push(flexLine);
-                                if (i !== this._flexLines.length - 1) {
-                                    const dummySpaceFlexLine = new FlexLine();
-                                    if (i === this._flexLines.length - 2) {
-                                        dummySpaceFlexLine._crossSize = Math.round(spaceBetweenFlexLine + accumulatedError);
-                                        accumulatedError = 0;
-                                    }
-                                    else {
-                                        dummySpaceFlexLine._crossSize = Math.round(spaceBetweenFlexLine);
-                                    }
-                                    accumulatedError += spaceBetweenFlexLine - dummySpaceFlexLine._crossSize;
-                                    if (accumulatedError > 1) {
-                                        dummySpaceFlexLine._crossSize += 1;
-                                        accumulatedError -= 1;
-                                    }
-                                    else if (accumulatedError < -1) {
-                                        dummySpaceFlexLine._crossSize -= 1;
-                                        accumulatedError += 1;
-                                    }
-                                    newFlexLines.push(dummySpaceFlexLine);
-                                }
                             }
-                            this._flexLines = newFlexLines;
-                        })();
+                        }
+                        this._flexLines = newFlexLines;
                         break;
+                    }
                     case AlignContent.CENTER: {
                         let spaceAboveAndBottom = size - totalCrossSize;
                         spaceAboveAndBottom = spaceAboveAndBottom / 2;
@@ -713,7 +712,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
     _stretchViews(flexDirection, alignItems) {
         if (alignItems === AlignItems.STRETCH) {
             let viewIndex = 0;
-            this._flexLines.forEach((flexLine) => {
+            for (const flexLine of this._flexLines) {
                 for (let i = 0; i < flexLine.itemCount; i++, viewIndex++) {
                     const view = this._getReorderedChildAt(viewIndex);
                     const alignSelf = FlexboxLayout.getAlignSelf(view);
@@ -733,11 +732,11 @@ export class FlexboxLayout extends FlexboxLayoutBase {
                             throw new Error('Invalid flex direction: ' + flexDirection);
                     }
                 }
-            });
+            }
         }
         else {
-            this._flexLines.forEach((flexLine) => {
-                flexLine._indicesAlignSelfStretch.forEach((index) => {
+            for (const flexLine of this._flexLines) {
+                for (const index of flexLine._indicesAlignSelfStretch) {
                     const view = this._getReorderedChildAt(index);
                     switch (flexDirection) {
                         case FlexDirection.ROW:
@@ -751,8 +750,8 @@ export class FlexboxLayout extends FlexboxLayoutBase {
                         default:
                             throw new Error('Invalid flex direction: ' + flexDirection);
                     }
-                });
-            });
+                }
+            }
         }
     }
     _stretchViewVertically(view, crossSize) {
@@ -854,15 +853,34 @@ export class FlexboxLayout extends FlexboxLayoutBase {
         if (mode === UNSPECIFIED) {
             return false;
         }
-        // Omit divider
+        if (this._isMainAxisDirectionHorizontal(this.flexDirection)) {
+            if (this.effectiveColumnGap > 0 && this._hasPrecedingViews(childAbsoluteIndex, childRelativeIndexInFlexLine)) {
+                childLength += this.effectiveColumnGap;
+            }
+        }
+        else {
+            if (this.effectiveRowGap > 0 && this._hasPrecedingViews(childAbsoluteIndex, childRelativeIndexInFlexLine)) {
+                childLength += this.effectiveRowGap;
+            }
+        }
         return maxSize < currentLength + childLength;
     }
     _getLargestMainSize() {
         return this._flexLines.reduce((max, flexLine) => Math.max(max, flexLine.mainSize), Number.MIN_VALUE);
     }
     _getSumOfCrossSize() {
-        // Omit divider
-        return this._flexLines.reduce((sum, flexLine) => sum + flexLine._crossSize, 0);
+        const isHorizontalDirection = this._isMainAxisDirectionHorizontal(this.flexDirection);
+        let sum = 0;
+        for (let i = 0, length = this._flexLines.length; i < length; i++) {
+            const flexLine = this._flexLines[i];
+            const gap = isHorizontalDirection ? this.effectiveRowGap : this.effectiveColumnGap;
+            // Judge if gap is required
+            if (gap > 0 && this._hasPrecedingFlexLines(i)) {
+                sum += gap;
+            }
+            sum += flexLine._crossSize;
+        }
+        return sum;
     }
     _isMainAxisDirectionHorizontal(flexDirection) {
         return flexDirection === FlexDirection.ROW || flexDirection === FlexDirection.ROW_REVERSE;
@@ -907,8 +925,12 @@ export class FlexboxLayout extends FlexboxLayoutBase {
         let childBottom = height - paddingBottom;
         let childTop = paddingTop;
         let childRight;
-        this._flexLines.forEach((flexLine, i) => {
-            // Omit divider
+        for (let i = 0, length = this._flexLines.length; i < length; i++) {
+            const flexLine = this._flexLines[i];
+            if (this.effectiveRowGap > 0 && this._hasPrecedingFlexLines(i)) {
+                childBottom -= this.effectiveRowGap;
+                childTop += this.effectiveRowGap;
+            }
             let spaceBetweenItem = 0.0;
             switch (this.justifyContent) {
                 case JustifyContent.FLEX_START:
@@ -956,7 +978,10 @@ export class FlexboxLayout extends FlexboxLayoutBase {
                 const lp = child; // .style;
                 childLeft += lp.effectiveMarginLeft;
                 childRight -= lp.effectiveMarginRight;
-                // Omit divider
+                if (this.effectiveColumnGap > 0 && this._hasPrecedingViews(currentViewIndex, j)) {
+                    childLeft += this.effectiveColumnGap;
+                    childRight -= this.effectiveColumnGap;
+                }
                 if (this.flexWrap === FlexWrap.WRAP_REVERSE) {
                     if (isRtl) {
                         this._layoutSingleChildHorizontal(child, flexLine, this.flexWrap, this.alignItems, Math.round(childRight) - child.getMeasuredWidth(), childBottom - child.getMeasuredHeight(), Math.round(childRight), childBottom);
@@ -984,7 +1009,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
             }
             childTop += flexLine._crossSize;
             childBottom -= flexLine._crossSize;
-        });
+        }
     }
     _layoutSingleChildHorizontal(view, flexLine, flexWrap, alignItems, left, top, right, bottom) {
         const lp = view; // .style;
@@ -1047,8 +1072,12 @@ export class FlexboxLayout extends FlexboxLayoutBase {
         let childRight = width - paddingRight;
         let childTop;
         let childBottom;
-        this._flexLines.forEach((flexLine) => {
-            // Omit divider.
+        for (let i = 0, length = this._flexLines.length; i < length; i++) {
+            const flexLine = this._flexLines[i];
+            if (this.effectiveColumnGap > 0 && this._hasPrecedingFlexLines(i)) {
+                childLeft += this.effectiveColumnGap;
+                childRight -= this.effectiveColumnGap;
+            }
             let spaceBetweenItem = 0.0;
             switch (this.justifyContent) {
                 case JustifyContent.FLEX_START:
@@ -1096,7 +1125,10 @@ export class FlexboxLayout extends FlexboxLayoutBase {
                 const lp = child; // .style;
                 childTop += lp.effectiveMarginTop;
                 childBottom -= lp.effectiveMarginBottom;
-                // Omit divider.
+                if (this.effectiveRowGap > 0 && this._hasPrecedingViews(currentViewIndex, j)) {
+                    childTop += this.effectiveRowGap;
+                    childBottom -= this.effectiveRowGap;
+                }
                 if (isRtl) {
                     if (fromBottomToTop) {
                         this._layoutSingleChildVertical(child, flexLine, true, this.alignItems, childRight - child.getMeasuredWidth(), Math.round(childBottom) - child.getMeasuredHeight(), childRight, Math.round(childBottom));
@@ -1124,7 +1156,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
             }
             childLeft += flexLine.crossSize;
             childRight -= flexLine.crossSize;
-        });
+        }
     }
     _layoutSingleChildVertical(view, flexLine, isRtl, alignItems, left, top, right, bottom) {
         const lp = view; // .style;
@@ -1166,7 +1198,26 @@ export class FlexboxLayout extends FlexboxLayoutBase {
             }
         }
     }
-    // Omit divider in onDraw(), drawDividersHorizontal, drawDividersVertical, drawVerticalDivider
+    _hasPrecedingViews(childAbsoluteIndex, childRelativeIndexInFlexLine) {
+        for (let i = 1; i <= childRelativeIndexInFlexLine; i++) {
+            const view = this._getReorderedChildAt(childAbsoluteIndex - i);
+            if (view != null && !view.isCollapsed) {
+                return true;
+            }
+        }
+        return false;
+    }
+    _hasPrecedingFlexLines(flexLineIndex) {
+        if (flexLineIndex < 0 || flexLineIndex >= this._flexLines.length) {
+            return false;
+        }
+        for (let i = 0; i < flexLineIndex; i++) {
+            if (this._flexLines[i].layoutVisibleItemCount > 0) {
+                return true;
+            }
+        }
+        return false;
+    }
     // requestLayout on set flexDirection, set flexWrap, set justifyContent, set alignItems, set alignContent
     // NOTE Consider moving to View if frequently used
     static getChildMeasureSpec(spec, padding, childDimension) {