javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-16 20:11:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3408 from NativeScript/cankov/modules30-flexbox

Browse Source 
Cankov/modules30 flexbox
This commit is contained in:
Panayot Cankov
2017-01-04 17:05:59 +02:00
committed by GitHub
parent 177222f548 9bf411b7f6
commit ebbf202a01
8 changed files with 205 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
tests/app/testRunner.ts
View File

@ -62,7 +62,7 @@ allTests["WRAPLAYOUT"] = require("./ui/layouts/wrap-layout-tests");
allTests["ABSOLUTELAYOUT"] = require("./ui/layouts/absolute-layout-tests");
allTests["GRIDLAYOUT"] = require("./ui/layouts/grid-layout-tests");
allTests["STACKLAYOUT"] = require("./ui/layouts/stack-layout-tests");
// allTests["FLEXBOXLAYOUT"] = require("./ui/layouts/flexbox-layout-tests");
allTests["FLEXBOXLAYOUT"] = require("./ui/layouts/flexbox-layout-tests");
// allTests["STYLE-PROPERTIES"] = require("./ui/styling/style-properties-tests");
// allTests["FRAME"] = require("./ui/frame/frame-tests");
// allTests["VIEW"] = require("./ui/view/view-tests");

74
tns-core-modules/ui/core/view-common.ts
View File

@ -12,6 +12,9 @@ import { observe as gestureObserve, GesturesObserver, GestureTypes, GestureEvent
import { Font, parseFont, FontStyle, FontWeight } from "ui/styling/font";
import { fontSizeConverter } from "../styling/converters";
// Only types:
import { Order, FlexGrow, FlexShrink, FlexWrapBefore, AlignSelf } from "ui/layouts/flexbox-layout"
// TODO: Remove this and start using string as source (for android).
import { fromFileOrResource, fromBase64, fromUrl } from "image-source";
import { isDataURI, isFileOrResourcePath, layout } from "utils/utils";
@ -61,6 +64,12 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
rowSpan: number;
colSpan: number;
order: Order;
flexGrow: FlexGrow;
flexShrink: FlexShrink;
flexWrapBefore: FlexWrapBefore;
alignSelf: AlignSelf;
public static loadedEvent = "loaded";
public static unloadedEvent = "unloaded";
@ -69,10 +78,14 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
_currentWidthMeasureSpec: number;
_currentHeightMeasureSpec: number;
private _oldLeft: number;
private _oldTop: number;
private _oldRight: number;
private _oldBottom: number;
_oldLeft: number;
_oldTop: number;
_oldRight: number;
_oldBottom: number;
_minWidthNative: Length;
_minHeightNative: Length;
private _isLayoutValid: boolean;
private _cssType: string;
@ -662,14 +675,13 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
let measureHeight = 0;
if (child && !child.isCollapsed) {
let density = layout.getDisplayDensity();
let width = layout.getMeasureSpecSize(widthMeasureSpec);
let widthMode = layout.getMeasureSpecMode(widthMeasureSpec);
let height = layout.getMeasureSpecSize(heightMeasureSpec);
let heightMode = layout.getMeasureSpecMode(heightMeasureSpec);
updateChildLayoutParams(child, parent, density);
child._updateEffectiveLayoutValues(parent);
let style = child.style;
let horizontalMargins = child.effectiveMarginLeft + child.effectiveMarginRight;
@ -871,8 +883,36 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
public _setValue(): never {
throw new Error("The View._setValue is obsolete. There is a new property system.")
}
_updateEffectiveLayoutValues(parent: ViewDefinition): void {
const density = layout.getDisplayDensity();
const style = this.style;
let parentWidthMeasureSpec = parent._currentWidthMeasureSpec;
let parentWidthMeasureSize = layout.getMeasureSpecSize(parentWidthMeasureSpec);
let parentWidthMeasureMode = layout.getMeasureSpecMode(parentWidthMeasureSpec);
let parentAvailableWidth = parentWidthMeasureMode === layout.UNSPECIFIED ? -1 : parentWidthMeasureSize;
this.effectiveWidth = PercentLength.toDevicePixels(style.width, -2, parentAvailableWidth)
this.effectiveMarginLeft = PercentLength.toDevicePixels(style.marginLeft, 0, parentAvailableWidth);
this.effectiveMarginRight = PercentLength.toDevicePixels(style.marginRight, 0, parentAvailableWidth);
let parentHeightMeasureSpec = parent._currentHeightMeasureSpec;
let parentHeightMeasureSize = layout.getMeasureSpecSize(parentHeightMeasureSpec);
let parentHeightMeasureMode = layout.getMeasureSpecMode(parentHeightMeasureSpec);
let parentAvailableHeight = parentHeightMeasureMode === layout.UNSPECIFIED ? -1 : parentHeightMeasureSize;
this.effectiveHeight = PercentLength.toDevicePixels(style.height, -2, parentAvailableHeight);
this.effectiveMarginTop = PercentLength.toDevicePixels(style.marginTop, 0, parentAvailableHeight);
this.effectiveMarginBottom = PercentLength.toDevicePixels(style.marginBottom, 0, parentAvailableHeight);
}
}
ViewCommon.prototype._oldLeft = 0;
ViewCommon.prototype._oldTop = 0;
ViewCommon.prototype._oldRight = 0;
ViewCommon.prototype._oldBottom = 0;
ViewCommon.prototype.effectiveMinWidth = 0;
ViewCommon.prototype.effectiveMinHeight = 0;
ViewCommon.prototype.effectiveWidth = 0;
@ -890,28 +930,6 @@ ViewCommon.prototype.effectiveBorderRightWidth = 0;
ViewCommon.prototype.effectiveBorderBottomWidth = 0;
ViewCommon.prototype.effectiveBorderLeftWidth = 0;
function updateChildLayoutParams(child: ViewCommon, parent: ViewCommon, density: number): void {
let style = child.style;
let parentWidthMeasureSpec = parent._currentWidthMeasureSpec;
let parentWidthMeasureSize = layout.getMeasureSpecSize(parentWidthMeasureSpec);
let parentWidthMeasureMode = layout.getMeasureSpecMode(parentWidthMeasureSpec);
let parentAvailableWidth = parentWidthMeasureMode === layout.UNSPECIFIED ? -1 : parentWidthMeasureSize;
child.effectiveWidth = PercentLength.toDevicePixels(style.width, -2, parentAvailableWidth)
child.effectiveMarginLeft = PercentLength.toDevicePixels(style.marginLeft, 0, parentAvailableWidth);
child.effectiveMarginRight = PercentLength.toDevicePixels(style.marginRight, 0, parentAvailableWidth);
let parentHeightMeasureSpec = parent._currentHeightMeasureSpec;
let parentHeightMeasureSize = layout.getMeasureSpecSize(parentHeightMeasureSpec);
let parentHeightMeasureMode = layout.getMeasureSpecMode(parentHeightMeasureSpec);
let parentAvailableHeight = parentHeightMeasureMode === layout.UNSPECIFIED ? -1 : parentHeightMeasureSize;
child.effectiveHeight = PercentLength.toDevicePixels(style.height, -2, parentAvailableHeight);
child.effectiveMarginTop = PercentLength.toDevicePixels(style.marginTop, 0, parentAvailableHeight);
child.effectiveMarginBottom = PercentLength.toDevicePixels(style.marginBottom, 0, parentAvailableHeight);
}
function equalsCommon(a: Length, b: Length): boolean;
function equalsCommon(a: PercentLength, b: PercentLength): boolean;
function equalsCommon(a: PercentLength, b: PercentLength): boolean {

39
tns-core-modules/ui/core/view.android.ts
View File

@ -1,7 +1,8 @@
import { PercentLength, Point, CustomLayoutView as CustomLayoutViewDefinition } from "ui/core/view";
import { ad as androidBackground } from "ui/styling/background";
import {
ViewCommon, layout, isEnabledProperty, originXProperty, originYProperty, automationTextProperty, isUserInteractionEnabledProperty, visibilityProperty, opacityProperty, minWidthProperty, minHeightProperty,
ViewCommon, layout, isEnabledProperty, originXProperty, originYProperty, automationTextProperty, isUserInteractionEnabledProperty, visibilityProperty, opacityProperty,
minWidthProperty, minHeightProperty, Length,
widthProperty, heightProperty, marginLeftProperty, marginTopProperty,
marginRightProperty, marginBottomProperty, horizontalAlignmentProperty, verticalAlignmentProperty,
rotateProperty, scaleXProperty, scaleYProperty,
@ -447,6 +448,22 @@ export class View extends ViewCommon {
androidBackground.onBackgroundOrBorderPropertyChanged(this);
}
}
set [minWidthProperty.native](value: Length) {
if (this.parent instanceof CustomLayoutView && this.parent.nativeView) {
this.parent._setChildMinWidthNative(this);
} else {
this._minWidthNative = this.minWidth;
}
}
set [minHeightProperty.native](value: Length) {
if (this.parent instanceof CustomLayoutView && this.parent.nativeView) {
this.parent._setChildMinHeightNative(this);
} else {
this._minHeightNative = this.minHeight;
}
}
}
type NativeSetter = { (view: android.view.View, value: number): void };
@ -534,13 +551,13 @@ createNativePercentLengthProperty({
});
createNativePercentLengthProperty({
key: minWidthProperty.native,
key: "_minWidthNative",
getPixels: ViewHelper.getMinWidth,
setPixels: ViewHelper.setMinWidth
});
createNativePercentLengthProperty({
key: minHeightProperty.native,
key: "_minHeightNative",
getPixels: ViewHelper.getMinHeight,
setPixels: ViewHelper.setMinHeight
});
@ -568,12 +585,28 @@ export class CustomLayoutView extends View implements CustomLayoutViewDefinition
traceWrite(`${this}.nativeView.addView(${child}.nativeView, ${atIndex})`, traceCategories.VisualTreeEvents);
}
this._nativeView.addView(child.nativeView, atIndex);
if (child instanceof View) {
this._updateNativeLayoutParams(child);
}
return true;
}
return false;
}
public _updateNativeLayoutParams(child: View): void {
this._setChildMinWidthNative(child);
this._setChildMinHeightNative(child);
}
public _setChildMinWidthNative(child: View): void {
child._minWidthNative = child.minWidth;
}
public _setChildMinHeightNative(child: View): void {
child._minHeightNative = child.minHeight;
}
public _removeViewFromNativeVisualTree(child: ViewCommon): void {
super._removeViewFromNativeVisualTree(child);

13
tns-core-modules/ui/core/view.d.ts vendored
View File

@ -569,6 +569,14 @@ declare module "ui/core/view" {
_nativeView: any;
_setNativeViewFrame(nativeView: any, frame: any): void;
// _onStylePropertyChanged(property: dependencyObservable.Property): void;
_updateEffectiveLayoutValues(parent: View): void;
_currentWidthMeasureSpec: number;
_currentHeightMeasureSpec: number;
_minWidthNative: Length;
_minHeightNative: Length;
//@endprivate
public effectiveMinWidth: number;
@ -603,6 +611,11 @@ declare module "ui/core/view" {
* Base class for all UI components that implements custom layouts.
*/
export class CustomLayoutView extends View {
//@private
_updateNativeLayoutParams(child: View): void;
_setChildMinWidthNative(child: View): void;
_setChildMinHeightNative(child: View): void;
//@endprivate
}
/**

118
tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout-common.ts
View File

@ -231,7 +231,7 @@ export abstract class FlexboxLayoutBase extends LayoutBase {
export const flexDirectionProperty = new CssProperty<Style, FlexDirection>({ name: "flexDirection", cssName: "flex-direction", defaultValue: FlexDirection.ROW, affectsLayout: isIOS, valueConverter: FlexDirection.parse });
flexDirectionProperty.register(Style);
export const flexWrapProperty = new CssProperty<Style, FlexWrap>({ name: "flexWrap", cssName: "flex-wrap", defaultValue: FlexWrap.NOWRAP, affectsLayout: isIOS, valueConverter: FlexWrap.parse });
export const flexWrapProperty = new CssProperty<Style, FlexWrap>({ name: "flexWrap", cssName: "flex-wrap", defaultValue: "nowrap", affectsLayout: isIOS, valueConverter: FlexWrap.parse });
flexWrapProperty.register(Style);
export const justifyContentProperty = new CssProperty<Style, JustifyContent>({ name: "justifyContent", cssName: "justify-content", defaultValue: JustifyContent.FLEX_START, affectsLayout: isIOS, valueConverter: JustifyContent.parse });
@ -245,84 +245,68 @@ alignContentProperty.register(Style);
export const orderProperty = new CssProperty<Style, Order>({ name: "order", cssName: "order", defaultValue: ORDER_DEFAULT, valueConverter: Order.parse });
orderProperty.register(Style);
Object.defineProperty(View.prototype, "order", {
get(this: View): Order {
return this.style.order;
},
set(this: View, value: Order) {
this.style.order = value;
},
enumerable: true,
configurable: true
});
export const flexGrowProperty = new CssProperty<Style, FlexGrow>({ name: "flexGrow", cssName: "flex-grow", defaultValue: FLEX_GROW_DEFAULT, valueConverter: FlexGrow.parse });
flexGrowProperty.register(Style);
Object.defineProperty(View.prototype, "flexGrow", {
get(this: View): FlexGrow {
return this.style.flexGrow;
},
set(this: View, value: FlexGrow) {
this.style.flexGrow = value;
},
enumerable: true,
configurable: true
});
export const flexShrinkProperty = new CssProperty<Style, FlexShrink>({ name: "flexShrink", cssName: "flex-shrink", defaultValue: FLEX_SHRINK_DEFAULT, valueConverter: FlexShrink.parse });
flexShrinkProperty.register(Style);
Object.defineProperty(View.prototype, "flexShrink", {
get(this: View): FlexShrink {
return this.style.flexShrink;
},
set(this: View, value: FlexShrink) {
this.style.flexShrink = value;
},
enumerable: true,
configurable: true
});
export const flexWrapBeforeProperty = new CssProperty<Style, FlexWrapBefore>({ name: "flexWrapBefore", cssName: "flex-wrap-before", defaultValue: false, valueConverter: FlexWrapBefore.parse });
flexWrapBeforeProperty.register(Style);
Object.defineProperty(View.prototype, "flexWrapBefore", {
get(this: View): FlexWrapBefore {
return this.style.flexWrapBefore;
},
set(this: View, value: FlexWrapBefore) {
this.style.flexWrapBefore = value;
},
enumerable: true,
configurable: true
});
export const alignSelfProperty = new CssProperty<Style, AlignSelf>({ name: "alignSelf", cssName: "align-self", defaultValue: AlignSelf.AUTO, valueConverter: AlignSelf.parse });
alignSelfProperty.register(Style);
// These support setting attached properties through XML. Delete if we stop supporting them.
// they could be set in XML through style -- <button style.order="1" />
const orderProperty1 = new Property<View, Order>({ name: "order", defaultValue: ORDER_DEFAULT, valueConverter: Order.parse });
orderProperty1.register(View);
const flexGrowProperty1 = new Property<View, FlexGrow>({ name: "flexGrow", defaultValue: FLEX_GROW_DEFAULT, valueConverter: FlexGrow.parse });
flexGrowProperty1.register(View);
const flexShrinkProperty1 = new Property<View, FlexShrink>({ name: "flexShrink", defaultValue: FLEX_SHRINK_DEFAULT, valueConverter: FlexShrink.parse });
flexShrinkProperty1.register(View);
const flexWrapBeforeProperty1 = new Property<View, FlexWrapBefore>({ name: "flexWrapBefore", defaultValue: false, valueConverter: FlexWrapBefore.parse });
flexWrapBeforeProperty1.register(View);
const alignSelfProperty1 = new Property<View, AlignSelf>({ name: "alignSelf", defaultValue: AlignSelf.AUTO, valueConverter: AlignSelf.parse });
alignSelfProperty1.register(View);
// registerSpecialProperty("order", (instance, propertyValue) => {
// FlexboxLayoutBase.setOrder(instance, !isNaN(+propertyValue) && +propertyValue);
// });
// registerSpecialProperty("flexGrow", (instance, propertyValue) => {
// FlexboxLayoutBase.setFlexGrow(instance, !isNaN(+propertyValue) && +propertyValue);
// });
// registerSpecialProperty("flexShrink", (instance, propertyValue) => {
// FlexboxLayoutBase.setFlexShrink(instance, !isNaN(+propertyValue) && +propertyValue);
// });
// registerSpecialProperty("alignSelf", (instance, propertyValue) => {
// FlexboxLayoutBase.setAlignSelf(instance, propertyValue);
// });
// registerSpecialProperty("flexWrapBefore", (instance, propertyValue) => {
// FlexboxLayoutBase.setFlexWrapBefore(instance, isString(propertyValue) ? FlexWrapBefore.parse(propertyValue) : propertyValue);
// });
// const flexboxGuard = <T>(handler: (flexbox: FlexboxLayoutBase, newValue: any) => void) => (view: View, newValue: any) => view instanceof FlexboxLayoutBase ? handler(view, newValue) : void 0;
// style.registerHandler(flexDirectionProperty, new style.StylePropertyChangedHandler(
// flexboxGuard((flexbox, newValue) => flexbox._setNativeFlexDirection(newValue)),
// flexboxGuard((flexbox, newValue) => flexbox._setNativeFlexDirection(FlexDirection.ROW))), "FlexboxLayout");
// style.registerHandler(flexWrapProperty, new style.StylePropertyChangedHandler(
// flexboxGuard((flexbox, newValue) => flexbox._setNativeFlexWrap(newValue)),
// flexboxGuard((flexbox, newValue) => flexbox._setNativeFlexWrap(FlexWrap.NOWRAP))), "FlexboxLayout");
// style.registerHandler(justifyContentProperty, new style.StylePropertyChangedHandler(
// flexboxGuard((flexbox, newValue) => flexbox._setNativeJustifyContent(newValue)),
// flexboxGuard((flexbox, newValue) => flexbox._setNativeJustifyContent(JustifyContent.FLEX_START))), "FlexboxLayout");
// style.registerHandler(alignItemsProperty, new style.StylePropertyChangedHandler(
// flexboxGuard((flexbox, newValue) => flexbox._setNativeAlignItems(newValue)),
// flexboxGuard((flexbox, newValue) => flexbox._setNativeAlignItems(AlignItems.STRETCH))), "FlexboxLayout");
// style.registerHandler(alignContentProperty, new style.StylePropertyChangedHandler(
// flexboxGuard((flexbox, newValue) => flexbox._setNativeAlignContent(newValue)),
// flexboxGuard((flexbox, newValue) => flexbox._setNativeAlignContent(AlignContent.STRETCH))), "FlexboxLayout");
// style.registerHandler(orderProperty, new style.StylePropertyChangedHandler(
// (view, value) => flexbox._onNativeOrderPropertyChanged(view, value),
// (view, value) => flexbox._onNativeOrderPropertyChanged(view, 1)), "View");
// style.registerHandler(flexGrowProperty, new style.StylePropertyChangedHandler(
// (view, value) => flexbox._onNativeFlexGrowPropertyChanged(view, value),
// (view, value) => flexbox._onNativeFlexGrowPropertyChanged(view, 0)), "View");
// style.registerHandler(flexShrinkProperty, new style.StylePropertyChangedHandler(
// (view, value) => flexbox._onNativeFlexShrinkPropertyChanged(view, value),
// (view, value) => flexbox._onNativeFlexShrinkPropertyChanged(view, 1)), "View");
// style.registerHandler(flexWrapBeforeProperty, new style.StylePropertyChangedHandler(
// (view, value) => flexbox._onNativeFlexWrapBeforePropertyChanged(view, value),
// (view, value) => flexbox._onNativeFlexWrapBeforePropertyChanged(view, false)), "View");
// style.registerHandler(alignSelfProperty, new style.StylePropertyChangedHandler(
// (view, value) => flexbox._onNativeAlignSelfPropertyChanged(view, value),
// (view, value) => flexbox._onNativeAlignSelfPropertyChanged(view, AlignSelf.AUTO)), "View");
Object.defineProperty(View.prototype, "alignSelf", {
get(this: View): AlignSelf {
return this.style.alignSelf;
},
set(this: View, value: AlignSelf) {
this.style.alignSelf = value;
},
enumerable: true,
configurable: true
});
// flex-flow: <flex-direction> || <flex-wrap>
const flexFlowProperty = new ShorthandProperty<Style, string>({

46
tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout.android.ts
View File

@ -1,9 +1,12 @@
import {
FlexDirection, FlexWrap, JustifyContent, AlignItems, AlignContent,
FlexboxLayoutBase, View, layout,
FlexboxLayoutBase, View, ViewBase, layout,
widthProperty, heightProperty, minWidthProperty, minHeightProperty,
marginTopProperty, marginRightProperty, marginBottomProperty, marginLeftProperty,
Length,
orderProperty, Order,
flexGrowProperty, FlexGrow,
flexShrinkProperty, FlexShrink,
flexGrowProperty, FlexGrow,
flexShrinkProperty, FlexShrink,
flexWrapBeforeProperty, FlexWrapBefore,
alignSelfProperty, AlignSelf,
flexDirectionProperty, flexWrapProperty, justifyContentProperty, alignItemsProperty, alignContentProperty
@ -173,15 +176,34 @@ export class FlexboxLayout extends FlexboxLayoutBase {
set [alignContentProperty.native](alignContent: AlignContent) {
this.android.setAlignContent(alignContentMap[alignContent]);
}
}
export function _setAndroidLayoutParams(lp: org.nativescript.widgets.FlexboxLayout.LayoutParams, view: View) {
lp.order = FlexboxLayout.getOrder(view);
lp.flexGrow = FlexboxLayout.getFlexGrow(view);
lp.flexShrink = FlexboxLayout.getFlexShrink(view);
lp.alignSelf = alignSelfMap[FlexboxLayout.getAlignSelf(view)];
lp.wrapBefore = FlexboxLayout.getFlexWrapBefore(view);
public _updateNativeLayoutParams(child: View): void {
super._updateNativeLayoutParams(child);
lp.minWidth = layout.toDevicePixels(view.effectiveMinWidth);
lp.minHeight = layout.toDevicePixels(view.effectiveMinHeight);
const lp = <org.nativescript.widgets.FlexboxLayout.LayoutParams>child.nativeView.getLayoutParams();
lp.order = child.order;
lp.flexGrow = child.flexGrow;
lp.flexShrink = child.flexShrink;
lp.wrapBefore = child.flexWrapBefore;
lp.alignSelf = alignSelfMap[child.alignSelf];
child.nativeView.setLayoutParams(lp);
}
public _setChildMinWidthNative(child: View): void {
child._minWidthNative = 0;
const lp = child.nativeView.getLayoutParams();
if (lp instanceof org.nativescript.widgets.FlexboxLayout.LayoutParams) {
lp.minWidth = Length.toDevicePixels(child.minWidth, 0);
child.nativeView.setLayoutParams(lp);
}
}
public _setChildMinHeightNative(child: View): void {
child._minHeightNative = 0;
const lp = child.nativeView.getLayoutParams();
if (lp instanceof org.nativescript.widgets.FlexboxLayout.LayoutParams) {
lp.minHeight = Length.toDevicePixels(child.minHeight, 0);
child.nativeView.setLayoutParams(lp);
}
}
}

14
tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout.d.ts vendored
View File

@ -18,6 +18,20 @@ declare module "ui/styling/style" {
}
}
declare module "ui/core/view" {
import {
Order, FlexGrow, FlexShrink, FlexWrapBefore, AlignSelf
} from "ui/layouts/flexbox-layout"
interface View {
order: Order;
flexGrow: FlexGrow;
flexShrink: FlexShrink;
flexWrapBefore: FlexWrapBefore;
alignSelf: AlignSelf;
}
}
declare module "ui/layouts/flexbox-layout" {
import { LayoutBase, View, Style, CssProperty } from "ui/layouts/layout-base";

10
tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout.ios.ts
View File

@ -263,6 +263,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
continue;
}
child._updateEffectiveLayoutValues(this);
let lp = child; // child.style;
if (FlexboxLayout.getAlignSelf(child) === AlignSelf.STRETCH) {
flexLine._indicesAlignSelfStretch.push(i);
@ -377,6 +378,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
continue;
}
child._updateEffectiveLayoutValues(this);
const lp = child; // .style;
if (FlexboxLayout.getAlignSelf(child) === AlignSelf.STRETCH) {
flexLine._indicesAlignSelfStretch.push(i);
@ -442,6 +444,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
let childHeight = view.getMeasuredHeight();
let minWidth = view.effectiveMinWidth;
view.effectiveMinWidth = 0;
if (view.getMeasuredWidth() < minWidth) {
needsMeasure = true;
childWidth = minWidth;
@ -451,6 +454,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
}
let minHeight = view.effectiveMinHeight;
view.effectiveMinHeight = 0;
if (childHeight < minHeight) {
needsMeasure = true;
childHeight = minHeight;
@ -461,6 +465,8 @@ export class FlexboxLayout extends FlexboxLayoutBase {
if (needsMeasure) {
view.measure(makeMeasureSpec(childWidth, EXACTLY), makeMeasureSpec(childHeight, EXACTLY));
}
view.effectiveMinWidth = minWidth;
view.effectiveMinHeight = minHeight;
}
private _addFlexLineIfLastFlexItem(childIndex: number, childCount: number, flexLine: FlexLine) {
@ -607,6 +613,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
let rawCalculatedWidth = child.getMeasuredWidth() - unitShrink * flexShrink + accumulatedRoundError;
let roundedCalculatedWidth = Math.round(rawCalculatedWidth);
let minWidth = child.effectiveMinWidth;
child.effectiveMinWidth = 0;
if (roundedCalculatedWidth < minWidth) {
needsReshrink = true;
roundedCalculatedWidth = minWidth;
@ -616,6 +623,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
accumulatedRoundError = rawCalculatedWidth - roundedCalculatedWidth;
}
child.measure(makeMeasureSpec(roundedCalculatedWidth, EXACTLY), makeMeasureSpec(child.getMeasuredHeight(), EXACTLY));
child.effectiveMinWidth = minWidth;
}
flexLine._mainSize += child.getMeasuredWidth() + lp.effectiveMarginLeft + lp.effectiveMarginRight;
} else {
@ -624,6 +632,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
let rawCalculatedHeight = child.getMeasuredHeight() - unitShrink * flexShrink + accumulatedRoundError;
let roundedCalculatedHeight = Math.round(rawCalculatedHeight);
const minHeight = child.effectiveMinHeight;
child.effectiveMinHeight = 0;
if (roundedCalculatedHeight < minHeight) {
needsReshrink = true;
roundedCalculatedHeight = minHeight;
@ -633,6 +642,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
accumulatedRoundError = rawCalculatedHeight - roundedCalculatedHeight;
}
child.measure(makeMeasureSpec(child.getMeasuredWidth(), EXACTLY), makeMeasureSpec(roundedCalculatedHeight, EXACTLY));
child.effectiveMinHeight = minHeight;
}
flexLine._mainSize += child.getMeasuredHeight() + lp.effectiveMarginTop + lp.effectiveMarginBottom;
}