iOS:add FlexLayoutNode

doric-demo/src/FlexDemo.ts

@@ -0,0 +1,78 @@
+
+import { Group, Panel, text, gravity, Color, LayoutSpec, vlayout, hlayout, scroller, IVLayout, IHLayout, layoutConfig, stack, Gravity, flexlayout } from "doric";
+import { FlexDirection, Wrap, Justify, Align } from "doric/lib/src/util/flexbox";
+
+const colors = [
+    "#f0932b",
+    "#eb4d4b",
+    "#6ab04c",
+    "#e056fd",
+    "#686de0",
+    "#30336b",
+]
+
+function box(idx = 0) {
+    return stack([], {
+        flexConfig: {
+            width: 20,
+            height: 20,
+        },
+        backgroundColor: Color.parse(colors[idx || 0])
+    })
+}
+
+function boxStr(str: string, idx = 0) {
+    return text({
+        width: 20,
+        height: 20,
+        text: str,
+        textColor: Color.WHITE,
+        layoutConfig: layoutConfig().just(),
+        backgroundColor: Color.parse(colors[idx || 0])
+    })
+}
+
+function label(str: string) {
+    return text({
+        text: str,
+        textSize: 16,
+    })
+}
+
+@Entry
+class LayoutDemo extends Panel {
+    build(root: Group) {
+        flexlayout(
+            [
+                box(0),
+                box(1),
+                box(2),
+                box(3),
+                box(4),
+                box(0),
+                box(1),
+                box(2),
+                box(3),
+                box(4),
+                box(0),
+                box(1),
+                box(2),
+                box(3),
+                box(4),
+            ],
+            {
+                layoutConfig: layoutConfig().most(),
+                backgroundColor: Color.GRAY,
+                flexConfig: {
+                    flexDirection: FlexDirection.ROW,
+                    width: 200,
+                    height: 200,
+                    justifyContent: Justify.CENTER,
+                    alignContent: Align.CENTER,
+                    flexWrap: Wrap.WRAP,
+                }
+            }
+        )
+            .in(root)
+    }
+}

doric-iOS/Pod/Classes/Shader/DoricFlexNode.m

@@ -20,7 +20,7 @@
 #import <YogaKit/UIView+Yoga.h>
 #import "DoricFlexNode.h"
 #import "DoricExtensions.h"
-#import "YGLayout.h"
+#import "UIView+Yoga.h"
 
 @interface DoricFlexView : UIView
 @end
@@ -34,22 +34,25 @@ - (CGSize)sizeThatFits:(CGSize)size {
 @implementation DoricFlexNode
 - (UIView *)build {
     return [[DoricFlexView new] also:^(DoricFlexView *it) {
-        it.yoga.isEnabled = YES;
+        [it configureLayoutWithBlock:^(YGLayout * _Nonnull layout) {
+            layout.isEnabled = YES;
+        }];
     }];
 }
 
 - (void)blendView:(UIView *)view forPropName:(NSString *)name propValue:(id)prop {
     if ([name isEqualToString:@"flexConfig"]) {
-        if ([prop isKindOfClass:[NSDictionary class]]) {
+        [self blendYoga:view.yoga from:prop];
-            [((DoricFlexNode *) self.superNode) blendSubNode:self flexConfig:prop];
-        }
     } else {
         [super blendView:view forPropName:name propValue:prop];
     }
 }
 
 - (void)blendSubNode:(DoricViewNode *)subNode flexConfig:(NSDictionary *)flexConfig {
-
+    [subNode.view configureLayoutWithBlock:^(YGLayout * _Nonnull layout) {
+        layout.isEnabled = YES;
+    }];
+    [self blendYoga:subNode.view.yoga from:flexConfig];
 }
 
 - (void)blendYoga:(YGLayout *)yoga from:(NSDictionary *)flexConfig {
@@ -65,55 +68,135 @@ - (void)blendYoga:(YGLayout *)yoga name:(NSString *)name value:(id)value {
         yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
     } else if ([name isEqualToString:@"justifyContent"]) {
         yoga.justifyContent = (YGJustify) [(NSNumber *) value integerValue];
-    }else if ([name isEqualToString:@"alignContent"]) {
+    } else if ([name isEqualToString:@"alignContent"]) {
         yoga.alignContent = (YGAlign) [(NSNumber *) value integerValue];
-    }else if ([name isEqualToString:@"justifyContent"]) {
+    } else if ([name isEqualToString:@"alignItems"]) {
-        yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
+        yoga.alignItems = (YGAlign) [(NSNumber *) value integerValue];
-    }else if ([name isEqualToString:@"justifyContent"]) {
+    } else if ([name isEqualToString:@"alignSelf"]) {
-        yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
+        yoga.alignSelf = (YGAlign) [(NSNumber *) value integerValue];
-    }else if ([name isEqualToString:@"justifyContent"]) {
+    } else if ([name isEqualToString:@"positionType"]) {
-        yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
+        yoga.position = (YGPositionType) [(NSNumber *) value integerValue];
-    }else if ([name isEqualToString:@"justifyContent"]) {
+    } else if ([name isEqualToString:@"flexWrap"]) {
-        yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
+        yoga.flexWrap = (YGWrap) [(NSNumber *) value integerValue];
-    }else if ([name isEqualToString:@"justifyContent"]) {
+    } else if ([name isEqualToString:@"overFlow"]) {
-        yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
+        yoga.overflow = (YGOverflow) [(NSNumber *) value integerValue];
-    }else if ([name isEqualToString:@"justifyContent"]) {
+    } else if ([name isEqualToString:@"display"]) {
-        yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
+        yoga.display = (YGDisplay) [(NSNumber *) value integerValue];
-    }else if ([name isEqualToString:@"justifyContent"]) {
+    } else if ([name isEqualToString:@"flex"]) {
-        yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
+        yoga.flex = [(NSNumber *) value floatValue];
-    }else if ([name isEqualToString:@"justifyContent"]) {
+    } else if ([name isEqualToString:@"flexGrow"]) {
-        yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
+        yoga.flexGrow = [(NSNumber *) value floatValue];
-    }else if ([name isEqualToString:@"justifyContent"]) {
+    } else if ([name isEqualToString:@"flexShrink"]) {
-        yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
+        yoga.flexShrink = [(NSNumber *) value floatValue];
-    }else if ([name isEqualToString:@"justifyContent"]) {
+    } else if ([name isEqualToString:@"flexBasis"]) {
-        yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
+        yoga.flexBasis = [self translateYGValueFromProperty:value];
-    }else if ([name isEqualToString:@"justifyContent"]) {
+    } else if ([name isEqualToString:@"marginLeft"]) {
-        yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
+        yoga.marginLeft = [self translateYGValueFromProperty:value];
-    }else if ([name isEqualToString:@"justifyContent"]) {
+    } else if ([name isEqualToString:@"marginRight"]) {
-        yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
+        yoga.marginRight = [self translateYGValueFromProperty:value];
-    }else if ([name isEqualToString:@"justifyContent"]) {
+    } else if ([name isEqualToString:@"marginTop"]) {
-        yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
+        yoga.marginTop = [self translateYGValueFromProperty:value];
-    }else if ([name isEqualToString:@"justifyContent"]) {
+    } else if ([name isEqualToString:@"marginBottom"]) {
-        yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
+        yoga.marginBottom = [self translateYGValueFromProperty:value];
-    }else if ([name isEqualToString:@"justifyContent"]) {
+    } else if ([name isEqualToString:@"marginStart"]) {
-        yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
+        yoga.marginStart = [self translateYGValueFromProperty:value];
-    }else if ([name isEqualToString:@"justifyContent"]) {
+    } else if ([name isEqualToString:@"marginEnd"]) {
-        yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
+        yoga.marginEnd = [self translateYGValueFromProperty:value];
-    }else if ([name isEqualToString:@"justifyContent"]) {
+    } else if ([name isEqualToString:@"marginHorizontal"]) {
-        yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
+        yoga.marginHorizontal = [self translateYGValueFromProperty:value];
-    }else if ([name isEqualToString:@"justifyContent"]) {
+    } else if ([name isEqualToString:@"marginVertical"]) {
-        yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
+        yoga.marginVertical = [self translateYGValueFromProperty:value];
-    }else if ([name isEqualToString:@"justifyContent"]) {
+    } else if ([name isEqualToString:@"margin"]) {
-        yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
+        yoga.margin = [self translateYGValueFromProperty:value];
-    }else if ([name isEqualToString:@"justifyContent"]) {
+    } else if ([name isEqualToString:@"paddingLeft"]) {
-        yoga.flexDirection = (YGFlexDirection) [(NSNumber *) value integerValue];
+        yoga.paddingLeft = [self translateYGValueFromProperty:value];
+    } else if ([name isEqualToString:@"paddingRight"]) {
+        yoga.paddingRight = [self translateYGValueFromProperty:value];
+    } else if ([name isEqualToString:@"paddingTop"]) {
+        yoga.paddingTop = [self translateYGValueFromProperty:value];
+    } else if ([name isEqualToString:@"paddingBottom"]) {
+        yoga.paddingBottom = [self translateYGValueFromProperty:value];
+    } else if ([name isEqualToString:@"paddingStart"]) {
+        yoga.paddingStart = [self translateYGValueFromProperty:value];
+    } else if ([name isEqualToString:@"paddingEnd"]) {
+        yoga.paddingEnd = [self translateYGValueFromProperty:value];
+    } else if ([name isEqualToString:@"paddingHorizontal"]) {
+        yoga.paddingHorizontal = [self translateYGValueFromProperty:value];
+    } else if ([name isEqualToString:@"paddingVertical"]) {
+        yoga.paddingVertical = [self translateYGValueFromProperty:value];
+    } else if ([name isEqualToString:@"padding"]) {
+        yoga.padding = [self translateYGValueFromProperty:value];
+    } else if ([name isEqualToString:@"borderLeftWidth"]) {
+        yoga.borderLeftWidth = [(NSNumber *) value floatValue];
+    } else if ([name isEqualToString:@"borderRightWidth"]) {
+        yoga.borderRightWidth = [(NSNumber *) value floatValue];
+    } else if ([name isEqualToString:@"borderTopWidth"]) {
+        yoga.borderTopWidth = [(NSNumber *) value floatValue];
+    } else if ([name isEqualToString:@"borderBottomWidth"]) {
+        yoga.borderBottomWidth = [(NSNumber *) value floatValue];
+    } else if ([name isEqualToString:@"borderStartWidth"]) {
+        yoga.borderStartWidth = [(NSNumber *) value floatValue];
+    } else if ([name isEqualToString:@"borderEndWidth"]) {
+        yoga.borderEndWidth = [(NSNumber *) value floatValue];
+    } else if ([name isEqualToString:@"borderWidth"]) {
+        yoga.borderWidth = [(NSNumber *) value floatValue];
+    } else if ([name isEqualToString:@"left"]) {
+        yoga.left = [self translateYGValueFromProperty:value];
+    } else if ([name isEqualToString:@"right"]) {
+        yoga.right = [self translateYGValueFromProperty:value];
+    } else if ([name isEqualToString:@"top"]) {
+        yoga.top = [self translateYGValueFromProperty:value];
+    } else if ([name isEqualToString:@"bottom"]) {
+        yoga.bottom = [self translateYGValueFromProperty:value];
+    } else if ([name isEqualToString:@"start"]) {
+        yoga.start = [self translateYGValueFromProperty:value];
+    } else if ([name isEqualToString:@"end"]) {
+        yoga.end = [self translateYGValueFromProperty:value];
+    } else if ([name isEqualToString:@"width"]) {
+        yoga.width = [self translateYGValueFromProperty:value];
+    } else if ([name isEqualToString:@"height"]) {
+        yoga.height = [self translateYGValueFromProperty:value];
+    } else if ([name isEqualToString:@"minWidth"]) {
+        yoga.minWidth = [self translateYGValueFromProperty:value];
+    } else if ([name isEqualToString:@"minHeight"]) {
+        yoga.minHeight = [self translateYGValueFromProperty:value];
+    } else if ([name isEqualToString:@"maxWidth"]) {
+        yoga.maxWidth = [self translateYGValueFromProperty:value];
+    } else if ([name isEqualToString:@"maxHeight"]) {
+        yoga.maxHeight = [self translateYGValueFromProperty:value];
+    } else if ([name isEqualToString:@"aspectRatio"]) {
+        yoga.aspectRatio = [(NSNumber *) value floatValue];
+    } else {
+        NSLog(@"Should not exists in flex box:%@,%@", name, value);
     }
-
 }
 
+- (YGValue)translateYGValueFromProperty:(id)prop {
+    if ([prop isKindOfClass:[NSDictionary class]]) {
+        NSNumber *type = prop[@"type"];
+        NSNumber *value = prop[@"value"];
+        switch (type.integerValue) {
+            case YGUnitPoint:
+                return YGPointValue(value.floatValue);
+            case YGUnitPercent:
+                return YGPercentValue(value.floatValue);
+            case YGUnitUndefined:
+                return YGValueUndefined;
+            default:
+                return YGValueAuto;
+        }
+    } else if ([prop isKindOfClass:[NSNumber class]]) {
+        return YGPointValue([prop floatValue]);
+    } else {
+        return YGValueAuto;
+    }
+}
 
 - (void)requestLayout {
     [super requestLayout];
+    for (UIView *view in self.view.subviews) {
+        [view.doricLayout apply];
+    }
     [self.view.yoga applyLayoutPreservingOrigin:NO];
 }
-@end
+@end

doric-js/bundle/doric-lib.es5.js

@@ -376,7 +376,6 @@ var View = /** @class */ (function () {
     View.prototype.getLocationOnScreen = function (context) {
         return this.nativeChannel(context, "getLocationOnScreen")();
     };
-    /**----------transform----------*/
     View.prototype.doAnimation = function (context, animation) {
         var _this = this;
         return this.nativeChannel(context, "doAnimation")(animation.toModel()).then(function (args) {
@@ -466,6 +465,10 @@ var View = /** @class */ (function () {
         Property,
         __metadata("design:type", Number)
     ], View.prototype, "rotation", void 0);
+    __decorate([
+        Property,
+        __metadata("design:type", Object)
+    ], View.prototype, "flexConfig", void 0);
     return View;
 }());
 var Superview = /** @class */ (function (_super) {
@@ -865,6 +868,36 @@ function vlayout(views, config) {
     }
     return ret;
 }
+var FlexLayout = /** @class */ (function (_super) {
+    __extends$1(FlexLayout, _super);
+    function FlexLayout() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return FlexLayout;
+}(Group));
+function flexlayout(views, config) {
+    var e_4, _a;
+    var ret = new FlexLayout;
+    try {
+        for (var views_4 = __values$1(views), views_4_1 = views_4.next(); !views_4_1.done; views_4_1 = views_4.next()) {
+            var v = views_4_1.value;
+            ret.addChild(v);
+        }
+    }
+    catch (e_4_1) { e_4 = { error: e_4_1 }; }
+    finally {
+        try {
+            if (views_4_1 && !views_4_1.done && (_a = views_4.return)) { _a.call(views_4); }
+        }
+        finally { if (e_4) { throw e_4.error; } }
+    }
+    if (config) {
+        for (var key in config) {
+            Reflect.set(ret, key, Reflect.get(config, key, config), ret);
+        }
+    }
+    return ret;
+}
 
 var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -3185,6 +3218,7 @@ exports.CENTER_X = CENTER_X;
 exports.CENTER_Y = CENTER_Y;
 exports.Color = Color;
 exports.Draggable = Draggable;
+exports.FlexLayout = FlexLayout;
 exports.FlowLayout = FlowLayout;
 exports.FlowLayoutItem = FlowLayoutItem;
 exports.Gravity = Gravity;
@@ -3225,6 +3259,7 @@ exports.ViewModel = ViewModel;
 exports.animate = animate;
 exports.coordinator = coordinator;
 exports.draggable = draggable;
+exports.flexlayout = flexlayout;
 exports.flowItem = flowItem;
 exports.flowlayout = flowlayout;
 exports.gravity = gravity;

doric-js/bundle/doric-lib.js

@@ -292,7 +292,6 @@ class View {
     getLocationOnScreen(context) {
         return this.nativeChannel(context, "getLocationOnScreen")();
     }
-    /**----------transform----------*/
     doAnimation(context, animation) {
         return this.nativeChannel(context, "doAnimation")(animation.toModel()).then((args) => {
             for (let key in args) {
@@ -382,6 +381,10 @@ __decorate([
     Property,
     __metadata("design:type", Number)
 ], View.prototype, "rotation", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Object)
+], View.prototype, "flexConfig", void 0);
 class Superview extends View {
     subviewById(id) {
         for (let v of this.allSubviews()) {
@@ -647,6 +650,20 @@ function vlayout(views, config) {
     }
     return ret;
 }
+class FlexLayout extends Group {
+}
+function flexlayout(views, config) {
+    const ret = new FlexLayout;
+    for (let v of views) {
+        ret.addChild(v);
+    }
+    if (config) {
+        for (let key in config) {
+            Reflect.set(ret, key, Reflect.get(config, key, config), ret);
+        }
+    }
+    return ret;
+}
 
 var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -2413,6 +2430,7 @@ exports.CENTER_X = CENTER_X;
 exports.CENTER_Y = CENTER_Y;
 exports.Color = Color;
 exports.Draggable = Draggable;
+exports.FlexLayout = FlexLayout;
 exports.FlowLayout = FlowLayout;
 exports.FlowLayoutItem = FlowLayoutItem;
 exports.Gravity = Gravity;
@@ -2453,6 +2471,7 @@ exports.ViewModel = ViewModel;
 exports.animate = animate;
 exports.coordinator = coordinator;
 exports.draggable = draggable;
+exports.flexlayout = flexlayout;
 exports.flowItem = flowItem;
 exports.flowlayout = flowlayout;
 exports.gravity = gravity;

doric-js/bundle/doric-vm.js

@@ -1751,7 +1751,6 @@ class View {
     getLocationOnScreen(context) {
         return this.nativeChannel(context, "getLocationOnScreen")();
     }
-    /**----------transform----------*/
     doAnimation(context, animation) {
         return this.nativeChannel(context, "doAnimation")(animation.toModel()).then((args) => {
             for (let key in args) {
@@ -1841,6 +1840,10 @@ __decorate([
     Property,
     __metadata("design:type", Number)
 ], View.prototype, "rotation", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Object)
+], View.prototype, "flexConfig", void 0);
 class Superview extends View {
     subviewById(id) {
         for (let v of this.allSubviews()) {
@@ -2106,6 +2109,20 @@ function vlayout(views, config) {
     }
     return ret;
 }
+class FlexLayout extends Group {
+}
+function flexlayout(views, config) {
+    const ret = new FlexLayout;
+    for (let v of views) {
+        ret.addChild(v);
+    }
+    if (config) {
+        for (let key in config) {
+            Reflect.set(ret, key, Reflect.get(config, key, config), ret);
+        }
+    }
+    return ret;
+}
 
 var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -4007,6 +4024,7 @@ exports.CENTER_X = CENTER_X;
 exports.CENTER_Y = CENTER_Y;
 exports.Color = Color;
 exports.Draggable = Draggable;
+exports.FlexLayout = FlexLayout;
 exports.FlowLayout = FlowLayout;
 exports.FlowLayoutItem = FlowLayoutItem;
 exports.Gravity = Gravity;
@@ -4047,6 +4065,7 @@ exports.ViewModel = ViewModel;
 exports.animate = animate;
 exports.coordinator = coordinator;
 exports.draggable = draggable;
+exports.flexlayout = flexlayout;
 exports.flowItem = flowItem;
 exports.flowlayout = flowlayout;
 exports.gravity = gravity;

doric-js/index.d.ts

@@ -125,6 +125,7 @@ declare module 'doric/lib/src/ui/view' {
     import { BridgeContext } from "doric/lib/src/runtime/global";
     import { LayoutConfig } from 'doric/lib/src/util/layoutconfig';
     import { IAnimation } from "doric/lib/src/ui/animation";
+    import { FlexConfig } from "doric/lib/src/util/flexbox";
     export function Property(target: Object, propKey: string): void;
     export interface IView {
             width?: number;
@@ -178,6 +179,10 @@ declare module 'doric/lib/src/ui/view' {
                 * rotation*PI
                 */
             rotation?: number;
+            /**
+                * Only affected when its superview or itself is FlexLayout.
+                */
+            flexConfig?: FlexConfig;
     }
     export type NativeViewModel = {
             id: string;
@@ -267,6 +272,7 @@ declare module 'doric/lib/src/ui/view' {
             pivotY?: number;
             rotation?: number;
             /**----------transform----------*/
+            flexConfig?: FlexConfig;
             doAnimation(context: BridgeContext, animation: IAnimation): Promise<void>;
     }
     export abstract class Superview extends View {
@@ -457,6 +463,9 @@ declare module 'doric/lib/src/widget/layouts' {
     export function stack(views: View[], config?: IStack): Stack;
     export function hlayout(views: View[], config?: IHLayout): HLayout;
     export function vlayout(views: View[], config?: IVLayout): VLayout;
+    export class FlexLayout extends Group {
+    }
+    export function flexlayout(views: View[], config: IView): FlexLayout;
     export {};
 }
 
@@ -1301,3 +1310,127 @@ declare module 'doric/lib/src/pattern/mvvm' {
     }
 }
 
+declare module 'doric/lib/src/util/flexbox' {
+    import { Modeling } from "doric/lib/src/util/types";
+    enum ValueType {
+        Undefined = 0,
+        Point = 1,
+        Percent = 2,
+        Auto = 3
+    }
+    export class FlexTypedValue implements Modeling {
+        type: ValueType;
+        value: number;
+        static Auto: FlexTypedValue;
+        static percent(v: number): FlexTypedValue;
+        static point(v: number): FlexTypedValue;
+        toModel(): {
+            type: ValueType;
+            value: number;
+        };
+    }
+    export enum FlexDirection {
+        COLUMN = 0,
+        COLUMN_REVERSE = 1,
+        ROW = 2,
+        ROW_REVERSE = 3
+    }
+    export enum Align {
+        AUTO = 0,
+        FLEX_START = 1,
+        CENTER = 2,
+        FLEX_END = 3,
+        STRETCH = 4,
+        BASELINE = 5,
+        SPACE_BETWEEN = 6,
+        SPACE_AROUND = 7
+    }
+    export enum Justify {
+        FLEX_START = 0,
+        CENTER = 1,
+        FLEX_END = 2,
+        SPACE_BETWEEN = 3,
+        SPACE_AROUND = 4,
+        SPACE_EVENLY = 5
+    }
+    export enum Direction {
+        INHERIT = 0,
+        LTR = 1,
+        RTL = 2
+    }
+    export enum PositionType {
+        RELATIVE = 0,
+        ABSOLUTE = 1
+    }
+    export enum Wrap {
+        NO_WRAP = 0,
+        WRAP = 1,
+        WRAP_REVERSE = 2
+    }
+    export enum OverFlow {
+        VISIBLE = 0,
+        HIDDEN = 1,
+        SCROLL = 2
+    }
+    export enum Display {
+        FLEX = 0,
+        NONE = 1
+    }
+    export type FlexValue = FlexTypedValue | number;
+    export interface FlexConfig {
+        direction?: Direction;
+        flexDirection?: FlexDirection;
+        justifyContent?: Justify;
+        alignContent?: Align;
+        alignItems?: Align;
+        alignSelf?: Align;
+        positionType?: PositionType;
+        flexWrap?: Wrap;
+        overFlow?: OverFlow;
+        display?: Display;
+        flex?: number;
+        flexGrow?: number;
+        flexShrink?: number;
+        flexBasis?: FlexValue;
+        marginLeft?: FlexValue;
+        marginRight?: FlexValue;
+        marginTop?: FlexValue;
+        marginBottom?: FlexValue;
+        marginStart?: FlexValue;
+        marginEnd?: FlexValue;
+        marginHorizontal?: FlexValue;
+        marginVertical?: FlexValue;
+        margin?: FlexValue;
+        paddingLeft?: FlexValue;
+        paddingRight?: FlexValue;
+        paddingTop?: FlexValue;
+        paddingBottom?: FlexValue;
+        paddingStart?: FlexValue;
+        paddingEnd?: FlexValue;
+        paddingHorizontal?: FlexValue;
+        paddingVertical?: FlexValue;
+        padding?: FlexValue;
+        borderLeftWidth?: number;
+        borderRightWidth?: number;
+        borderTopWidth?: number;
+        borderBottomWidth?: number;
+        borderStartWidth?: number;
+        borderEndWidth?: number;
+        borderWidth?: number;
+        left?: FlexValue;
+        right?: FlexValue;
+        top?: FlexValue;
+        bottom?: FlexValue;
+        start?: FlexValue;
+        end?: FlexValue;
+        width?: FlexValue;
+        height?: FlexValue;
+        minWidth?: FlexValue;
+        minHeight?: FlexValue;
+        maxWidth?: FlexValue;
+        maxHeight?: FlexValue;
+        aspectRatio?: number;
+    }
+    export {};
+}
+

doric-js/lib/src/ui/view.d.ts

@@ -3,6 +3,7 @@ import { Modeling, Model } from "../util/types";
 import { BridgeContext } from "../runtime/global";
 import { LayoutConfig } from '../util/layoutconfig';
 import { IAnimation } from "./animation";
+import { FlexConfig } from "../util/flexbox";
 export declare function Property(target: Object, propKey: string): void;
 export interface IView {
     width?: number;
@@ -56,6 +57,11 @@ export interface IView {
      * rotation*PI
      */
     rotation?: number;
+    /**----------transform----------*/
+    /**
+     * Only affected when its superview or itself is FlexLayout.
+     */
+    flexConfig?: FlexConfig;
 }
 export declare type NativeViewModel = {
     id: string;
@@ -149,6 +155,7 @@ export declare abstract class View implements Modeling, IView {
     pivotY?: number;
     rotation?: number;
     /**----------transform----------*/
+    flexConfig?: FlexConfig;
     doAnimation(context: BridgeContext, animation: IAnimation): Promise<void>;
 }
 export declare abstract class Superview extends View {

doric-js/lib/src/ui/view.js

@@ -177,7 +177,6 @@ export class View {
     getLocationOnScreen(context) {
         return this.nativeChannel(context, "getLocationOnScreen")();
     }
-    /**----------transform----------*/
     doAnimation(context, animation) {
         return this.nativeChannel(context, "doAnimation")(animation.toModel()).then((args) => {
             for (let key in args) {
@@ -267,6 +266,10 @@ __decorate([
     Property,
     __metadata("design:type", Number)
 ], View.prototype, "rotation", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Object)
+], View.prototype, "flexConfig", void 0);
 export class Superview extends View {
     subviewById(id) {
         for (let v of this.allSubviews()) {

doric-js/lib/src/util/flexbox.d.ts

@@ -0,0 +1,121 @@
+import { Modeling } from "./types";
+declare enum ValueType {
+    Undefined = 0,
+    Point = 1,
+    Percent = 2,
+    Auto = 3
+}
+export declare class FlexTypedValue implements Modeling {
+    type: ValueType;
+    value: number;
+    static Auto: FlexTypedValue;
+    static percent(v: number): FlexTypedValue;
+    static point(v: number): FlexTypedValue;
+    toModel(): {
+        type: ValueType;
+        value: number;
+    };
+}
+export declare enum FlexDirection {
+    COLUMN = 0,
+    COLUMN_REVERSE = 1,
+    ROW = 2,
+    ROW_REVERSE = 3
+}
+export declare enum Align {
+    AUTO = 0,
+    FLEX_START = 1,
+    CENTER = 2,
+    FLEX_END = 3,
+    STRETCH = 4,
+    BASELINE = 5,
+    SPACE_BETWEEN = 6,
+    SPACE_AROUND = 7
+}
+export declare enum Justify {
+    FLEX_START = 0,
+    CENTER = 1,
+    FLEX_END = 2,
+    SPACE_BETWEEN = 3,
+    SPACE_AROUND = 4,
+    SPACE_EVENLY = 5
+}
+export declare enum Direction {
+    INHERIT = 0,
+    LTR = 1,
+    RTL = 2
+}
+export declare enum PositionType {
+    RELATIVE = 0,
+    ABSOLUTE = 1
+}
+export declare enum Wrap {
+    NO_WRAP = 0,
+    WRAP = 1,
+    WRAP_REVERSE = 2
+}
+export declare enum OverFlow {
+    VISIBLE = 0,
+    HIDDEN = 1,
+    SCROLL = 2
+}
+export declare enum Display {
+    FLEX = 0,
+    NONE = 1
+}
+export declare type FlexValue = FlexTypedValue | number;
+export interface FlexConfig {
+    direction?: Direction;
+    flexDirection?: FlexDirection;
+    justifyContent?: Justify;
+    alignContent?: Align;
+    alignItems?: Align;
+    alignSelf?: Align;
+    positionType?: PositionType;
+    flexWrap?: Wrap;
+    overFlow?: OverFlow;
+    display?: Display;
+    flex?: number;
+    flexGrow?: number;
+    flexShrink?: number;
+    flexBasis?: FlexValue;
+    marginLeft?: FlexValue;
+    marginRight?: FlexValue;
+    marginTop?: FlexValue;
+    marginBottom?: FlexValue;
+    marginStart?: FlexValue;
+    marginEnd?: FlexValue;
+    marginHorizontal?: FlexValue;
+    marginVertical?: FlexValue;
+    margin?: FlexValue;
+    paddingLeft?: FlexValue;
+    paddingRight?: FlexValue;
+    paddingTop?: FlexValue;
+    paddingBottom?: FlexValue;
+    paddingStart?: FlexValue;
+    paddingEnd?: FlexValue;
+    paddingHorizontal?: FlexValue;
+    paddingVertical?: FlexValue;
+    padding?: FlexValue;
+    borderLeftWidth?: number;
+    borderRightWidth?: number;
+    borderTopWidth?: number;
+    borderBottomWidth?: number;
+    borderStartWidth?: number;
+    borderEndWidth?: number;
+    borderWidth?: number;
+    left?: FlexValue;
+    right?: FlexValue;
+    top?: FlexValue;
+    bottom?: FlexValue;
+    start?: FlexValue;
+    end?: FlexValue;
+    width?: FlexValue;
+    height?: FlexValue;
+    minWidth?: FlexValue;
+    minHeight?: FlexValue;
+    maxWidth?: FlexValue;
+    maxHeight?: FlexValue;
+    aspectRatio?: number;
+}
+export {};

doric-js/lib/src/util/flexbox.js

@@ -0,0 +1,87 @@
+var ValueType;
+(function (ValueType) {
+    ValueType[ValueType["Undefined"] = 0] = "Undefined";
+    ValueType[ValueType["Point"] = 1] = "Point";
+    ValueType[ValueType["Percent"] = 2] = "Percent";
+    ValueType[ValueType["Auto"] = 3] = "Auto";
+})(ValueType || (ValueType = {}));
+export class FlexTypedValue {
+    constructor() {
+        this.type = ValueType.Auto;
+        this.value = 0;
+    }
+    static percent(v) {
+        const ret = new FlexTypedValue;
+        ret.type = ValueType.Percent;
+        ret.value = v;
+        return ret;
+    }
+    static point(v) {
+        const ret = new FlexTypedValue;
+        ret.type = ValueType.Point;
+        ret.value = v;
+        return ret;
+    }
+    toModel() {
+        return {
+            type: this.type,
+            value: this.value,
+        };
+    }
+}
+FlexTypedValue.Auto = new FlexTypedValue;
+export var FlexDirection;
+(function (FlexDirection) {
+    FlexDirection[FlexDirection["COLUMN"] = 0] = "COLUMN";
+    FlexDirection[FlexDirection["COLUMN_REVERSE"] = 1] = "COLUMN_REVERSE";
+    FlexDirection[FlexDirection["ROW"] = 2] = "ROW";
+    FlexDirection[FlexDirection["ROW_REVERSE"] = 3] = "ROW_REVERSE";
+})(FlexDirection || (FlexDirection = {}));
+export var Align;
+(function (Align) {
+    Align[Align["AUTO"] = 0] = "AUTO";
+    Align[Align["FLEX_START"] = 1] = "FLEX_START";
+    Align[Align["CENTER"] = 2] = "CENTER";
+    Align[Align["FLEX_END"] = 3] = "FLEX_END";
+    Align[Align["STRETCH"] = 4] = "STRETCH";
+    Align[Align["BASELINE"] = 5] = "BASELINE";
+    Align[Align["SPACE_BETWEEN"] = 6] = "SPACE_BETWEEN";
+    Align[Align["SPACE_AROUND"] = 7] = "SPACE_AROUND";
+})(Align || (Align = {}));
+export var Justify;
+(function (Justify) {
+    Justify[Justify["FLEX_START"] = 0] = "FLEX_START";
+    Justify[Justify["CENTER"] = 1] = "CENTER";
+    Justify[Justify["FLEX_END"] = 2] = "FLEX_END";
+    Justify[Justify["SPACE_BETWEEN"] = 3] = "SPACE_BETWEEN";
+    Justify[Justify["SPACE_AROUND"] = 4] = "SPACE_AROUND";
+    Justify[Justify["SPACE_EVENLY"] = 5] = "SPACE_EVENLY";
+})(Justify || (Justify = {}));
+export var Direction;
+(function (Direction) {
+    Direction[Direction["INHERIT"] = 0] = "INHERIT";
+    Direction[Direction["LTR"] = 1] = "LTR";
+    Direction[Direction["RTL"] = 2] = "RTL";
+})(Direction || (Direction = {}));
+export var PositionType;
+(function (PositionType) {
+    PositionType[PositionType["RELATIVE"] = 0] = "RELATIVE";
+    PositionType[PositionType["ABSOLUTE"] = 1] = "ABSOLUTE";
+})(PositionType || (PositionType = {}));
+export var Wrap;
+(function (Wrap) {
+    Wrap[Wrap["NO_WRAP"] = 0] = "NO_WRAP";
+    Wrap[Wrap["WRAP"] = 1] = "WRAP";
+    Wrap[Wrap["WRAP_REVERSE"] = 2] = "WRAP_REVERSE";
+})(Wrap || (Wrap = {}));
+export var OverFlow;
+(function (OverFlow) {
+    OverFlow[OverFlow["VISIBLE"] = 0] = "VISIBLE";
+    OverFlow[OverFlow["HIDDEN"] = 1] = "HIDDEN";
+    OverFlow[OverFlow["SCROLL"] = 2] = "SCROLL";
+})(OverFlow || (OverFlow = {}));
+export var Display;
+(function (Display) {
+    Display[Display["FLEX"] = 0] = "FLEX";
+    Display[Display["NONE"] = 1] = "NONE";
+})(Display || (Display = {}));

doric-js/lib/src/widget/layouts.d.ts

@@ -25,4 +25,7 @@ export declare class HLayout extends LinearLayout implements IHLayout {
 export declare function stack(views: View[], config?: IStack): Stack;
 export declare function hlayout(views: View[], config?: IHLayout): HLayout;
 export declare function vlayout(views: View[], config?: IVLayout): VLayout;
+export declare class FlexLayout extends Group {
+}
+export declare function flexlayout(views: View[], config: IView): FlexLayout;
 export {};

doric-js/lib/src/widget/layouts.js

@@ -82,3 +82,17 @@ export function vlayout(views, config) {
     }
     return ret;
 }
+export class FlexLayout extends Group {
+}
+export function flexlayout(views, config) {
+    const ret = new FlexLayout;
+    for (let v of views) {
+        ret.addChild(v);
+    }
+    if (config) {
+        for (let key in config) {
+            Reflect.set(ret, key, Reflect.get(config, key, config), ret);
+        }
+    }
+    return ret;
+}

doric-js/src/util/flexbox.ts

@@ -16,27 +16,28 @@
 import { Modeling } from "./types";
 
 enum ValueType {
-    Point = 0,
+    Undefined = 0,
-    Percent = 1,
+    Point = 1,
-    Auto = 2,
+    Percent = 2,
+    Auto = 3,
 }
 
-export class FlexValue implements Modeling {
+export class FlexTypedValue implements Modeling {
 
     type = ValueType.Auto
     value = 0
 
-    static Auto = new FlexValue
+    static Auto = new FlexTypedValue
 
     static percent(v: number) {
-        const ret = new FlexValue
+        const ret = new FlexTypedValue
         ret.type = ValueType.Percent
         ret.value = v
         return ret
     }
 
     static point(v: number) {
-        const ret = new FlexValue
+        const ret = new FlexTypedValue
         ret.type = ValueType.Point
         ret.value = v
         return ret
@@ -102,6 +103,7 @@ export enum Display {
     FLEX = 0,
     NONE = 1,
 }
+export type FlexValue = FlexTypedValue | number
 
 export interface FlexConfig {
     direction?: Direction
@@ -140,13 +142,13 @@ export interface FlexConfig {
     padding?: FlexValue
 
 
-    borderWidthLeft?: FlexValue
+    borderLeftWidth?: number
-    borderWidthRight?: FlexValue
+    borderRightWidth?: number
-    borderWidthTop?: FlexValue
+    borderTopWidth?: number
-    borderWidthBottom?: FlexValue
+    borderBottomWidth?: number
-    borderWidthStart?: FlexValue
+    borderStartWidth?: number
-    borderWidthEnd?: FlexValue
+    borderEndWidth?: number
-    borderWidth?: FlexValue
+    borderWidth?: number
 
     left?: FlexValue
     right?: FlexValue

doric-js/src/widget/layouts.ts

@@ -108,4 +108,5 @@ export function flexlayout(views: View[], config: IView) {
             Reflect.set(ret, key, Reflect.get(config, key, config), ret)
         }
     }
+    return ret
 }

doric-web/dist/index.js

@@ -1809,7 +1809,6 @@ class View {
     getLocationOnScreen(context) {
         return this.nativeChannel(context, "getLocationOnScreen")();
     }
-    /**----------transform----------*/
     doAnimation(context, animation) {
         return this.nativeChannel(context, "doAnimation")(animation.toModel()).then((args) => {
             for (let key in args) {
@@ -1899,6 +1898,10 @@ __decorate([
     Property,
     __metadata("design:type", Number)
 ], View.prototype, "rotation", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Object)
+], View.prototype, "flexConfig", void 0);
 class Superview extends View {
     subviewById(id) {
         for (let v of this.allSubviews()) {
@@ -2164,6 +2167,20 @@ function vlayout(views, config) {
     }
     return ret;
 }
+class FlexLayout extends Group {
+}
+function flexlayout(views, config) {
+    const ret = new FlexLayout;
+    for (let v of views) {
+        ret.addChild(v);
+    }
+    if (config) {
+        for (let key in config) {
+            Reflect.set(ret, key, Reflect.get(config, key, config), ret);
+        }
+    }
+    return ret;
+}
 
 var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -3930,6 +3947,7 @@ exports.CENTER_X = CENTER_X;
 exports.CENTER_Y = CENTER_Y;
 exports.Color = Color;
 exports.Draggable = Draggable;
+exports.FlexLayout = FlexLayout;
 exports.FlowLayout = FlowLayout;
 exports.FlowLayoutItem = FlowLayoutItem;
 exports.Gravity = Gravity;
@@ -3970,6 +3988,7 @@ exports.ViewModel = ViewModel;
 exports.animate = animate;
 exports.coordinator = coordinator;
 exports.draggable = draggable;
+exports.flexlayout = flexlayout;
 exports.flowItem = flowItem;
 exports.flowlayout = flowlayout;
 exports.gravity = gravity;