javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-06 17:28:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Dimitris-Rafail Katsampas
2025-07-21 01:45:10 +03:00
committed by GitHub
parent f820dc144d
commit cc189090a4
4 changed files with 89 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
packages/core/platforms/android/widgets-release.aar
View File

Binary file not shown.

40
packages/core/ui/layouts/flexbox-layout/index.ios.ts
View File

@ -67,6 +67,7 @@ class FlexLine {
_dividerLengthInMainSize = 0;
_crossSize = 0;
_itemCount = 0;
_goneItemCount = 0;
_totalFlexGrow = 0;
_totalFlexShrink = 0;
_maxBaseline = 0;
@ -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;
}
@ -249,6 +253,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
continue;
} else if (child.isCollapsed) {
flexLine._itemCount++;
flexLine._goneItemCount++;
this._addFlexLineIfLastFlexItem(i, childCount, flexLine);
continue;
}
@ -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);
}
@ -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;
@ -359,6 +364,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
continue;
} else if (child.isCollapsed) {
flexLine._itemCount++;
flexLine._goneItemCount++;
this._addFlexLineIfLastFlexItem(i, childCount, flexLine);
continue;
}
@ -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);
}
@ -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);
}
}
@ -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;
@ -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;

10
packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/FlexLine.java
View File

@ -70,6 +70,9 @@ public class FlexLine {
*/
int mItemCount;
/** Holds the count of the views whose visibilities are gone */
int mGoneItemCount;
/**
* @see {@link #getTotalFlexGrow()}
*/
@ -151,6 +154,13 @@ public class FlexLine {
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
*/

72
packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/FlexboxLayout.java
View File

@ -583,6 +583,7 @@ public class FlexboxLayout extends LayoutBase {
continue;
} else if (child.getVisibility() == View.GONE) {
flexLine.mItemCount++;
flexLine.mGoneItemCount++;
addFlexLineIfLastFlexItem(i, childCount, flexLine);
continue;
}
@ -627,7 +628,7 @@ public class FlexboxLayout extends LayoutBase {
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);
}
@ -681,17 +682,18 @@ public class FlexboxLayout extends LayoutBase {
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;
@ -745,6 +747,7 @@ public class FlexboxLayout extends LayoutBase {
continue;
} else if (child.getVisibility() == View.GONE) {
flexLine.mItemCount++;
flexLine.mGoneItemCount++;
addFlexLineIfLastFlexItem(i, childCount, flexLine);
continue;
}
@ -790,7 +793,7 @@ public class FlexboxLayout extends LayoutBase {
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);
}
@ -862,7 +865,7 @@ public class FlexboxLayout extends LayoutBase {
}
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);
}
@ -1661,20 +1664,25 @@ public class FlexboxLayout extends LayoutBase {
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);
@ -1878,20 +1886,25 @@ public class FlexboxLayout extends LayoutBase {
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);
@ -2085,6 +2098,11 @@ public class FlexboxLayout extends LayoutBase {
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
@ -2165,6 +2183,11 @@ public class FlexboxLayout extends LayoutBase {
// 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
@ -2332,11 +2355,20 @@ public class FlexboxLayout extends LayoutBase {
}
/**
* @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;
}
/**
@ -2535,7 +2567,7 @@ public class FlexboxLayout extends LayoutBase {
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;
}
}
@ -2554,7 +2586,7 @@ public class FlexboxLayout extends LayoutBase {
}
for (int i = flexLineIndex + 1; i < mFlexLines.size(); i++) {
if (mFlexLines.get(i).mItemCount > 0) {
if (mFlexLines.get(i).getLayoutVisibleItemCount() > 0) {
return false;
}
}