Skip to content

fix(core): FlexboxLayout nested views alignment corrections #10766

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
NathanWalker merged 3 commits into from
Jul 20, 2025
Merged

fix(core): FlexboxLayout nested views alignment corrections #10766

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
686e55d
fix(android): Incorrect children alignment on flexbox with justify-sp…
CatchABus Jul 18, 2025
e3e6ea3
chore: Removed unused variables
CatchABus Jul 18, 2025
347455f
fix: Corrected iOS flexbox height for align baseline
CatchABus Jul 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified packages/core/platforms/android/widgets-release.aar
View file
Open in desktop
Binary file not shown.
40 changes: 27 additions & 13 deletions packages/core/ui/layouts/flexbox-layout/index.ios.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ class FlexLine {
_dividerLengthInMainSize = 0;
_crossSize = 0;
_itemCount = 0;
_goneItemCount = 0;
_totalFlexGrow = 0;
_totalFlexShrink = 0;
_maxBaseline = 0;
Expand Down Expand Up @@ -95,6 +96,9 @@ class FlexLine {
get itemCount(): number {
return this._itemCount;
}
get layoutVisibleItemCount(): number {
return this._itemCount - this._goneItemCount;
}
get totalFlexGrow(): number {
return this._totalFlexGrow;
}
Expand Down Expand Up @@ -249,6 +253,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
continue;
} else if (child.isCollapsed) {
flexLine._itemCount++;
flexLine._goneItemCount++;
this._addFlexLineIfLastFlexItem(i, childCount, flexLine);
continue;
}
Expand Down Expand Up @@ -276,7 +281,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
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.itemCount > 0) {
if (flexLine.layoutVisibleItemCount > 0) {
this._addFlexLine(flexLine);
}

Expand Down Expand Up @@ -318,11 +323,11 @@ export class FlexboxLayout extends FlexboxLayoutBase {
if (this.flexWrap !== FlexWrap.WRAP_REVERSE) {
let marginTop = flexLine._maxBaseline - FlexboxLayout.getBaseline(child);
marginTop = Math.max(marginTop, lp.effectiveMarginTop);
largestHeightInLine = Math.max(largestHeightInLine, child.getActualSize().height + marginTop + lp.effectiveMarginBottom);
largestHeightInLine = Math.max(largestHeightInLine, child.getMeasuredHeight() + marginTop + lp.effectiveMarginBottom);
} else {
let marginBottom = flexLine._maxBaseline - child.getMeasuredHeight() + FlexboxLayout.getBaseline(child);
marginBottom = Math.max(marginBottom, lp.effectiveMarginBottom);
largestHeightInLine = Math.max(largestHeightInLine, child.getActualSize().height + lp.effectiveMarginTop + marginBottom);
largestHeightInLine = Math.max(largestHeightInLine, child.getMeasuredHeight() + lp.effectiveMarginTop + marginBottom);
}
}
flexLine._crossSize = largestHeightInLine;
Expand Down Expand Up @@ -359,6 +364,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
continue;
} else if (child.isCollapsed) {
flexLine._itemCount++;
flexLine._goneItemCount++;
this._addFlexLineIfLastFlexItem(i, childCount, flexLine);
continue;
}
Expand All @@ -385,7 +391,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
largestWidthInColumn = Math.max(largestWidthInColumn, child.getMeasuredWidth() + lp.effectiveMarginLeft + lp.effectiveMarginRight);

if (this._isWrapRequired(child, heightMode, heightSize, flexLine.mainSize, child.getMeasuredHeight() + lp.effectiveMarginTop + lp.effectiveMarginBottom, i, indexInFlexLine)) {
if (flexLine._itemCount > 0) {
if (flexLine.layoutVisibleItemCount > 0) {
this._addFlexLine(flexLine);
}

Expand Down Expand Up @@ -447,7 +453,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
}

private _addFlexLineIfLastFlexItem(childIndex: number, childCount: number, flexLine: FlexLine) {
if (childIndex === childCount - 1 && flexLine.itemCount !== 0) {
if (childIndex === childCount - 1 && flexLine.layoutVisibleItemCount !== 0) {
this._addFlexLine(flexLine);
}
}
Expand Down Expand Up @@ -1012,16 +1018,20 @@ export class FlexboxLayout extends FlexboxLayoutBase {
childLeft = paddingLeft + (width - insets.left - insets.right - flexLine._mainSize) / 2.0;
childRight = width - paddingRight - (width - insets.left - insets.right - flexLine._mainSize) / 2.0;
break;
case JustifyContent.SPACE_AROUND:
if (flexLine._itemCount !== 0) {
spaceBetweenItem = (width - insets.left - insets.right - flexLine.mainSize) / flexLine._itemCount;
case JustifyContent.SPACE_AROUND: {
const visibleCount = flexLine.layoutVisibleItemCount;
if (visibleCount !== 0) {
spaceBetweenItem = (width - insets.left - insets.right - flexLine.mainSize) / visibleCount;
}
childLeft = paddingLeft + spaceBetweenItem / 2.0;
childRight = width - paddingRight - spaceBetweenItem / 2.0;
break;
}
case JustifyContent.SPACE_BETWEEN: {
const visibleCount = flexLine.layoutVisibleItemCount;
const denominator = visibleCount !== 1 ? visibleCount - 1 : 1.0;

childLeft = paddingLeft;
const denominator = flexLine.itemCount !== 1 ? flexLine.itemCount - 1 : 1.0;
spaceBetweenItem = (width - insets.left - insets.right - flexLine.mainSize) / denominator;
childRight = width - paddingRight;
break;
Expand Down Expand Up @@ -1156,16 +1166,20 @@ export class FlexboxLayout extends FlexboxLayoutBase {
childTop = paddingTop + (height - insets.top - insets.bottom - flexLine._mainSize) / 2.0;
childBottom = height - paddingBottom - (height - insets.top - insets.bottom - flexLine._mainSize) / 2.0;
break;
case JustifyContent.SPACE_AROUND:
if (flexLine._itemCount !== 0) {
spaceBetweenItem = (height - insets.top - insets.bottom - flexLine._mainSize) / flexLine.itemCount;
case JustifyContent.SPACE_AROUND: {
const visibleCount = flexLine.layoutVisibleItemCount;
if (visibleCount !== 0) {
spaceBetweenItem = (height - insets.top - insets.bottom - flexLine._mainSize) / visibleCount;
}
childTop = paddingTop + spaceBetweenItem / 2.0;
childBottom = height - paddingBottom - spaceBetweenItem / 2.0;
break;
}
case JustifyContent.SPACE_BETWEEN: {
const visibleCount = flexLine.layoutVisibleItemCount;
const denominator = visibleCount !== 1 ? visibleCount - 1 : 1.0;

childTop = paddingTop;
const denominator = flexLine.itemCount !== 1 ? flexLine.itemCount - 1 : 1.0;
spaceBetweenItem = (height - insets.top - insets.bottom - flexLine.mainSize) / denominator;
childBottom = height - paddingBottom;
break;
Expand Down
10 changes: 10 additions & 0 deletions packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/FlexLine.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,9 @@ public class FlexLine {
*/
int mItemCount;

/** Holds the count of the views whose visibilities are gone */
int mGoneItemCount;

/**
* @see {@link #getTotalFlexGrow()}
*/
Expand Down Expand Up @@ -151,6 +154,13 @@ public int getItemCount() {
return mItemCount;
}

/**
* @return the count of the views whose visibilities are not gone in this flex line.
*/
public int getLayoutVisibleItemCount() {
return mItemCount - mGoneItemCount;
}

/**
* @return the sum of the flexGrow properties of the children included in this flex line
*/
Expand Down
72 changes: 52 additions & 20 deletions .../ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/FlexboxLayout.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -583,6 +583,7 @@ private void measureHorizontal(int widthMeasureSpec, int heightMeasureSpec) {
continue;
} else if (child.getVisibility() == View.GONE) {
flexLine.mItemCount++;
flexLine.mGoneItemCount++;
addFlexLineIfLastFlexItem(i, childCount, flexLine);
continue;
}
Expand Down Expand Up @@ -627,7 +628,7 @@ private void measureHorizontal(int widthMeasureSpec, int heightMeasureSpec) {
if (isWrapRequired(widthMode, widthSize, flexLine.mMainSize,
child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin, lp,
i, indexInFlexLine)) {
if (flexLine.mItemCount > 0) {
if (flexLine.getLayoutVisibleItemCount() > 0) {
addFlexLine(flexLine);
}

Expand Down Expand Up @@ -681,17 +682,18 @@ private void measureHorizontal(int widthMeasureSpec, int heightMeasureSpec) {
for (int i = viewIndex; i < viewIndex + flexLine.mItemCount; i++) {
View child = getReorderedChildAt(i);
LayoutParams lp = (LayoutParams) child.getLayoutParams();

if (mFlexWrap != FLEX_WRAP_WRAP_REVERSE) {
int marginTop = flexLine.mMaxBaseline - child.getBaseline();
marginTop = Math.max(marginTop, lp.topMargin);
largestHeightInLine = Math.max(largestHeightInLine,
child.getHeight() + marginTop + lp.bottomMargin);
child.getMeasuredHeight() + marginTop + lp.bottomMargin);
} else {
int marginBottom = flexLine.mMaxBaseline - child.getMeasuredHeight() +
child.getBaseline();
marginBottom = Math.max(marginBottom, lp.bottomMargin);
largestHeightInLine = Math.max(largestHeightInLine,
child.getHeight() + lp.topMargin + marginBottom);
child.getMeasuredHeight() + lp.topMargin + marginBottom);
}
}
flexLine.mCrossSize = largestHeightInLine;
Expand Down Expand Up @@ -745,6 +747,7 @@ private void measureVertical(int widthMeasureSpec, int heightMeasureSpec) {
continue;
} else if (child.getVisibility() == View.GONE) {
flexLine.mItemCount++;
flexLine.mGoneItemCount++;
addFlexLineIfLastFlexItem(i, childCount, flexLine);
continue;
}
Expand Down Expand Up @@ -790,7 +793,7 @@ private void measureVertical(int widthMeasureSpec, int heightMeasureSpec) {
if (isWrapRequired(heightMode, heightSize, flexLine.mMainSize,
child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin, lp,
i, indexInFlexLine)) {
if (flexLine.mItemCount > 0) {
if (flexLine.getLayoutVisibleItemCount() > 0) {
addFlexLine(flexLine);
}

Expand Down Expand Up @@ -862,7 +865,7 @@ private void checkSizeConstraints(View view) {
}

private void addFlexLineIfLastFlexItem(int childIndex, int childCount, FlexLine flexLine) {
if (childIndex == childCount - 1 && flexLine.mItemCount != 0) {
if (childIndex == childCount - 1 && flexLine.getLayoutVisibleItemCount() != 0) {
// Add the flex line if this item is the last item
addFlexLine(flexLine);
}
Expand Down Expand Up @@ -1661,20 +1664,25 @@ private void layoutHorizontal(boolean isRtl, int left, int top, int right, int b
childLeft = paddingLeft + (width - flexLine.mMainSize) / 2f;
childRight = width - paddingRight - (width - flexLine.mMainSize) / 2f;
break;
case JUSTIFY_CONTENT_SPACE_AROUND:
if (flexLine.mItemCount != 0) {
case JUSTIFY_CONTENT_SPACE_AROUND: {
int visibleCount = flexLine.getLayoutVisibleItemCount();
if (visibleCount != 0) {
spaceBetweenItem = (width - flexLine.mMainSize)
/ (float) flexLine.mItemCount;
/ (float) visibleCount;
}
childLeft = paddingLeft + spaceBetweenItem / 2f;
childRight = width - paddingRight - spaceBetweenItem / 2f;
break;
case JUSTIFY_CONTENT_SPACE_BETWEEN:
}
case JUSTIFY_CONTENT_SPACE_BETWEEN: {
int visibleCount = flexLine.getLayoutVisibleItemCount();
float denominator = visibleCount != 1 ? visibleCount - 1 : 1f;

childLeft = paddingLeft;
float denominator = flexLine.mItemCount != 1 ? flexLine.mItemCount - 1 : 1f;
spaceBetweenItem = (width - flexLine.mMainSize) / denominator;
childRight = width - paddingRight;
break;
}
default:
throw new IllegalStateException(
"Invalid justifyContent is set: " + mJustifyContent);
Expand Down Expand Up @@ -1878,20 +1886,25 @@ private void layoutVertical(boolean isRtl, boolean fromBottomToTop, int left, in
childTop = paddingTop + (height - flexLine.mMainSize) / 2f;
childBottom = height - paddingBottom - (height - flexLine.mMainSize) / 2f;
break;
case JUSTIFY_CONTENT_SPACE_AROUND:
if (flexLine.mItemCount != 0) {
case JUSTIFY_CONTENT_SPACE_AROUND: {
int visibleCount = flexLine.getLayoutVisibleItemCount();
if (visibleCount != 0) {
spaceBetweenItem = (height - flexLine.mMainSize)
/ (float) flexLine.mItemCount;
/ (float) visibleCount;
}
childTop = paddingTop + spaceBetweenItem / 2f;
childBottom = height - paddingBottom - spaceBetweenItem / 2f;
break;
case JUSTIFY_CONTENT_SPACE_BETWEEN:
}
case JUSTIFY_CONTENT_SPACE_BETWEEN: {
int visibleCount = flexLine.getLayoutVisibleItemCount();
float denominator = visibleCount != 1 ? visibleCount - 1 : 1f;

childTop = paddingTop;
float denominator = flexLine.mItemCount != 1 ? flexLine.mItemCount - 1 : 1f;
spaceBetweenItem = (height - flexLine.mMainSize) / denominator;
childBottom = height - paddingBottom;
break;
}
default:
throw new IllegalStateException(
"Invalid justifyContent is set: " + mJustifyContent);
Expand Down Expand Up @@ -2085,6 +2098,11 @@ private void drawDividersHorizontal(Canvas canvas, boolean isRtl, boolean fromBo
FlexLine flexLine = mFlexLines.get(i);
for (int j = 0; j < flexLine.mItemCount; j++) {
View view = getReorderedChildAt(currentViewIndex);

if (view == null || view.getVisibility() == View.GONE) {
continue;
}

LayoutParams lp = (LayoutParams) view.getLayoutParams();

// Judge if the beginning or middle divider is needed
Expand Down Expand Up @@ -2165,6 +2183,11 @@ private void drawDividersVertical(Canvas canvas, boolean isRtl, boolean fromBott
// Draw horizontal dividers if needed
for (int j = 0; j < flexLine.mItemCount; j++) {
View view = getReorderedChildAt(currentViewIndex);

if (view == null || view.getVisibility() == View.GONE) {
continue;
}

LayoutParams lp = (LayoutParams) view.getLayoutParams();

// Judge if the beginning or middle divider is needed
Expand Down Expand Up @@ -2332,11 +2355,20 @@ public void setAlignContent(@AlignContent int alignContent) {
}

/**
* @return the flex lines composing this flex container. This method returns an unmodifiable
* list. Thus any changes of the returned list are not supported.
* @return the flex lines composing this flex container. This method returns a copy of the
* original list excluding a dummy flex line (flex line that doesn't have any flex items in it
* but used for the alignment along the cross axis).
* Thus any changes of the returned list are not reflected to the original list.
*/
public List<FlexLine> getFlexLines() {
return Collections.unmodifiableList(mFlexLines);
List<FlexLine> result = new ArrayList<>(mFlexLines.size());
for (FlexLine flexLine : mFlexLines) {
if (flexLine.getLayoutVisibleItemCount() == 0) {
continue;
}
result.add(flexLine);
}
return result;
}

/**
Expand Down Expand Up @@ -2535,7 +2567,7 @@ private boolean hasDividerBeforeFlexLine(int flexLineIndex) {

private boolean allFlexLinesAreDummyBefore(int flexLineIndex) {
for (int i = 0; i < flexLineIndex; i++) {
if (mFlexLines.get(i).mItemCount > 0) {
if (mFlexLines.get(i).getLayoutVisibleItemCount() > 0) {
return false;
}
}
Expand All @@ -2554,7 +2586,7 @@ private boolean hasEndDividerAfterFlexLine(int flexLineIndex) {
}

for (int i = flexLineIndex + 1; i < mFlexLines.size(); i++) {
if (mFlexLines.get(i).mItemCount > 0) {
if (mFlexLines.get(i).getLayoutVisibleItemCount() > 0) {
return false;
}
}
Expand Down