import { Group, Panel, Text, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, slider, slideItem, scroller, IVLayout, IHLayout, layoutConfig } from "doric"; const colors = [ "#f0932b", "#eb4d4b", "#6ab04c", "#e056fd", "#686de0", "#30336b", ] function box(idx = 0) { return (new Stack).also(it => { it.width = it.height = 20 it.backgroundColor = Color.parse(colors[idx || 0]) }) } function boxStr(str: string, idx = 0) { return (new Text).also(it => { it.width = it.height = 20 it.text = str it.textColor = Color.parse('#ffffff') it.backgroundColor = Color.parse(colors[idx || 0]) }) } function label(str: string) { return text({ text: str, textSize: 16, }) } @Entry class LayoutDemo extends Panel { build(rootView: Group) { scroller( hlayout([ vlayout([ label("Horizontal Layout(Align to Top)"), hlayout([ box().apply({ height: 20 }), box().apply({ height: 40 }), box().apply({ height: 60 }), box().apply({ height: 40 }), box().apply({ height: 20 }), ]).also(it => { it.space = 20 }), label("Horizontal Layout(Align to Bottom)"), hlayout([ box().apply({ height: 20 }), box().apply({ height: 40 }), box().apply({ height: 60 }), box().apply({ height: 40 }), box().apply({ height: 20 }), ]).also(it => { it.space = 20 it.gravity = gravity().bottom() }), label("Horizontal Layout(Align to Center)"), hlayout([ box().apply({ height: 20 }), box().apply({ height: 40 }), box().apply({ height: 60 }), box().apply({ height: 40 }), box().apply({ height: 20 }), ]).also(it => { it.space = 20 it.gravity = gravity().center() }), label("Horizontal Layout(Weight)"), hlayout( [ boxStr('weight=1', 3).apply({ layoutConfig: { widthSpec: LayoutSpec.JUST, heightSpec: LayoutSpec.JUST, weight: 1, } }), box(2), box(4), ], { width: 200, height: 30, layoutConfig: { widthSpec: LayoutSpec.JUST, heightSpec: LayoutSpec.JUST, }, backgroundColor: Color.parse('#eeeeee'), gravity: gravity().center(), }), hlayout( [ box(3), boxStr('weight=1', 2).apply({ layoutConfig: { widthSpec: LayoutSpec.JUST, heightSpec: LayoutSpec.JUST, weight: 1, } }), box(4), ], { width: 200, height: 30, layoutConfig: { widthSpec: LayoutSpec.JUST, heightSpec: LayoutSpec.JUST, }, backgroundColor: Color.parse('#eeeeee'), gravity: gravity().center(), } ), hlayout( [ box(3), box(2), boxStr('weight=1', 4).apply({ layoutConfig: { widthSpec: LayoutSpec.JUST, heightSpec: LayoutSpec.JUST, weight: 1, } }), ], { width: 200, height: 30, layoutConfig: { widthSpec: LayoutSpec.JUST, heightSpec: LayoutSpec.JUST, }, backgroundColor: Color.parse('#eeeeee'), gravity: gravity().center(), } ), hlayout([ boxStr('weight=1', 3).apply({ layoutConfig: { widthSpec: LayoutSpec.JUST, heightSpec: LayoutSpec.JUST, weight: 1, } }), boxStr('weight=1', 2).apply({ layoutConfig: { widthSpec: LayoutSpec.JUST, heightSpec: LayoutSpec.JUST, weight: 1, } }), box(4), ], { width: 200, height: 30, layoutConfig: { widthSpec: LayoutSpec.JUST, heightSpec: LayoutSpec.JUST, }, backgroundColor: Color.parse('#eeeeee'), gravity: gravity().center(), } ), hlayout([ boxStr('weight=1', 3).apply({ layoutConfig: { widthSpec: LayoutSpec.JUST, heightSpec: LayoutSpec.JUST, weight: 1, } }), boxStr('weight=1', 2).apply({ layoutConfig: { widthSpec: LayoutSpec.JUST, heightSpec: LayoutSpec.JUST, weight: 1, } }), boxStr('weight=1', 4).apply({ layoutConfig: { widthSpec: LayoutSpec.JUST, heightSpec: LayoutSpec.JUST, weight: 1, } }), ]).apply({ width: 200, height: 30, layoutConfig: { widthSpec: LayoutSpec.JUST, heightSpec: LayoutSpec.JUST, }, backgroundColor: Color.parse('#eeeeee'), gravity: gravity().center(), } as IHLayout), ]).also(it => { it.space = 20 it.gravity = gravity().center() }), vlayout([ label("Vertical Layout(Algin to Left)"), vlayout([ box(1).apply({ width: 20 }), box(1).apply({ width: 40 }), box(1).apply({ width: 60 }), box(1).apply({ width: 40 }), box(1).apply({ width: 20 }), ]).apply({ space: 20 } as IVLayout), label("Vertical Layout(Algin to Right)"), vlayout([ box(1).apply({ width: 20 }), box(1).apply({ width: 40 }), box(1).apply({ width: 60 }), box(1).apply({ width: 40 }), box(1).apply({ width: 20 }), ]).apply({ space: 20, gravity: gravity().right(), } as IVLayout), label("Vertical Layout(Algin to Center)"), vlayout([ box(1).apply({ width: 20 }), box(1).apply({ width: 40 }), box(1).apply({ width: 60 }), box(1).apply({ width: 40 }), box(1).apply({ width: 20 }), ]).apply({ space: 20, gravity: gravity().center(), } as IVLayout), label("Vertical Layout(Weight)"), hlayout([ vlayout([ boxStr('weight=1', 3).apply({ layoutConfig: { widthSpec: LayoutSpec.MOST, heightSpec: LayoutSpec.JUST, weight: 1, }, }), box(2).apply({ layoutConfig: { widthSpec: LayoutSpec.MOST, heightSpec: LayoutSpec.JUST, } }), box(4).apply({ layoutConfig: { widthSpec: LayoutSpec.MOST, heightSpec: LayoutSpec.JUST, } }), ]).apply({ width: 100, height: 200, layoutConfig: { widthSpec: LayoutSpec.JUST, heightSpec: LayoutSpec.JUST, }, backgroundColor: Color.parse('#eeeeee'), gravity: gravity().center(), } as IVLayout), vlayout([ box(3).apply({ layoutConfig: { widthSpec: LayoutSpec.MOST, heightSpec: LayoutSpec.JUST, }, }), boxStr('weight=1', 2).apply({ layoutConfig: { widthSpec: LayoutSpec.MOST, heightSpec: LayoutSpec.JUST, weight: 1, } }), box(4).apply({ layoutConfig: { widthSpec: LayoutSpec.MOST, heightSpec: LayoutSpec.JUST, } }), ]).apply({ width: 100, height: 200, layoutConfig: { widthSpec: LayoutSpec.JUST, heightSpec: LayoutSpec.JUST, }, backgroundColor: Color.parse('#eeeeee'), gravity: gravity().center(), } as IVLayout), vlayout([ box(3).apply({ layoutConfig: { widthSpec: LayoutSpec.MOST, heightSpec: LayoutSpec.JUST, }, }), box(2).apply({ layoutConfig: { widthSpec: LayoutSpec.MOST, heightSpec: LayoutSpec.JUST, }, }), boxStr('weight=1', 4).apply({ layoutConfig: { widthSpec: LayoutSpec.MOST, heightSpec: LayoutSpec.JUST, weight: 1, } }), ]).apply({ width: 100, height: 200, layoutConfig: { widthSpec: LayoutSpec.JUST, heightSpec: LayoutSpec.JUST, }, backgroundColor: Color.parse('#eeeeee'), gravity: gravity().center(), } as IVLayout), vlayout([ boxStr('weight=1', 3).apply({ layoutConfig: { widthSpec: LayoutSpec.MOST, heightSpec: LayoutSpec.JUST, weight: 1, }, }), boxStr('weight=1', 2).apply({ layoutConfig: { widthSpec: LayoutSpec.MOST, heightSpec: LayoutSpec.JUST, weight: 1, } }), box(4).apply({ layoutConfig: { widthSpec: LayoutSpec.MOST, heightSpec: LayoutSpec.JUST, } }), ]).apply({ width: 100, height: 200, layoutConfig: { widthSpec: LayoutSpec.JUST, heightSpec: LayoutSpec.JUST, }, backgroundColor: Color.parse('#eeeeee'), gravity: gravity().center(), } as IVLayout), vlayout([ boxStr('weight=1', 3).apply({ layoutConfig: { widthSpec: LayoutSpec.MOST, heightSpec: LayoutSpec.JUST, weight: 1, }, }), boxStr('weight=1', 2).apply({ layoutConfig: { widthSpec: LayoutSpec.MOST, heightSpec: LayoutSpec.JUST, weight: 1, } }), boxStr('weight=1', 4).apply({ layoutConfig: { widthSpec: LayoutSpec.MOST, heightSpec: LayoutSpec.JUST, weight: 1, } }), ]).apply({ width: 100, height: 200, layoutConfig: { widthSpec: LayoutSpec.JUST, heightSpec: LayoutSpec.JUST, }, backgroundColor: Color.parse('#eeeeee'), gravity: gravity().center(), } as IVLayout), ]).also(it => { it.space = 20 }), ]).also(it => { it.space = 20 it.gravity = gravity().left() }) ]).also(it => { it.space = 20 }), ).also(it => { it.layoutConfig = layoutConfig().most() }) .in(rootView) } }