tianzixuan/Doric
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

update demo

Browse Source
This commit is contained in:
pengfei.zhou 2019-12-14 16:32:04 +08:00
parent 74ee52ed09
commit 02615bc17e
22 changed files with 223 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/AnimatorDemo.ts
View File

@ -9,7 +9,7 @@ function thisLabel(str: string) {
backgroundColor: colors[0], backgroundColor: colors[0],
textSize: 15, textSize: 15,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().just(),
}) })
} }
@ -173,11 +173,11 @@ class AnimatorDemo extends Panel {
stack([ stack([
view, view,
]).apply({ ]).apply({
layoutConfig: layoutConfig().atmost(), layoutConfig: layoutConfig().most(),
backgroundColor: colors[1].alpha(0.3 * 255), backgroundColor: colors[1].alpha(0.3 * 255),
}), }),
]).apply({ ]).apply({
layoutConfig: layoutConfig().atmost(), layoutConfig: layoutConfig().most(),
gravity: gravity().center(), gravity: gravity().center(),
space: 10, space: 10,
} as IVLayout).in(rootView) } as IVLayout).in(rootView)

6
src/ComplicatedAnimations.ts
View File

@ -9,7 +9,7 @@ function thisLabel(str: string) {
backgroundColor: colors[0], backgroundColor: colors[0],
textSize: 10, textSize: 10,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().just(),
}) })
} }
@ -190,11 +190,11 @@ class AnimationDemo extends Panel {
v.scaleX = 1.5 v.scaleX = 1.5
}) })
]).apply({ ]).apply({
layoutConfig: layoutConfig().atmost(), layoutConfig: layoutConfig().most(),
backgroundColor: colors[1].alpha(0.3 * 255), backgroundColor: colors[1].alpha(0.3 * 255),
}), }),
]).apply({ ]).apply({
layoutConfig: layoutConfig().atmost(), layoutConfig: layoutConfig().most(),
gravity: gravity().center(), gravity: gravity().center(),
space: 10, space: 10,
} as IVLayout).in(rootView) } as IVLayout).in(rootView)

8
src/ComplicatedDemo.ts
View File

@ -14,7 +14,7 @@ class MyDemo extends Panel {
header: pullable( header: pullable(
stack([]).apply({ stack([]).apply({
backgroundColor: Color.RED, backgroundColor: Color.RED,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().just(),
width: 100, width: 100,
height: 30, height: 30,
}), }),
@ -32,7 +32,7 @@ class MyDemo extends Panel {
renderItem: (idx) => { renderItem: (idx) => {
return listItem(text({ return listItem(text({
text: `Item :${idx}`, text: `Item :${idx}`,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().just(),
width: root.width, width: root.width,
height: 50, height: 50,
textColor: Color.WHITE, textColor: Color.WHITE,
@ -42,14 +42,14 @@ class MyDemo extends Panel {
}).apply({ }).apply({
}), }),
}).apply({ }).apply({
layoutConfig: layoutConfig().atmost(), layoutConfig: layoutConfig().most(),
}).also(v => { }).also(v => {
v.top = 200 v.top = 200
}), }),
headerImage = image({ headerImage = image({
imageUrl: "https://img.zcool.cn/community/01e75b5da933daa801209e1ffa4649.jpg@1280w_1l_2o_100sh.jpg", imageUrl: "https://img.zcool.cn/community/01e75b5da933daa801209e1ffa4649.jpg@1280w_1l_2o_100sh.jpg",
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().just(),
width: root.width, width: root.width,
height: 200, height: 200,
scaleType: ScaleType.ScaleAspectFill, scaleType: ScaleType.ScaleAspectFill,

12
src/Counter.ts
View File

@ -12,8 +12,8 @@ class CounterView extends ViewHolder {
textSize: 40, textSize: 40,
layoutConfig: { layoutConfig: {
alignment: Gravity.Center, alignment: Gravity.Center,
widthSpec: LayoutSpec.WRAP_CONTENT, widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.WRAP_CONTENT, heightSpec: LayoutSpec.FIT,
}, },
}).also(it => { this.number = it }), }).also(it => { this.number = it }),
text({ text({
@ -26,8 +26,8 @@ class CounterView extends ViewHolder {
corners: 5, corners: 5,
layoutConfig: { layoutConfig: {
alignment: Gravity.Center, alignment: Gravity.Center,
widthSpec: LayoutSpec.WRAP_CONTENT, widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.WRAP_CONTENT, heightSpec: LayoutSpec.FIT,
}, },
padding: { padding: {
left: 10, left: 10,
@ -69,8 +69,8 @@ class CounterView extends ViewHolder {
root.addChild((new Image).also(iv => { root.addChild((new Image).also(iv => {
iv.imageUrl = "https://misc.aotu.io/ONE-SUNDAY/SteamEngine.png" iv.imageUrl = "https://misc.aotu.io/ONE-SUNDAY/SteamEngine.png"
iv.layoutConfig = { iv.layoutConfig = {
widthSpec: LayoutSpec.WRAP_CONTENT, widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.WRAP_CONTENT, heightSpec: LayoutSpec.FIT,
} }
})) }))
} }

34
src/EffectsDemo.ts
View File

@ -50,7 +50,7 @@ class EffectsDemo extends Panel {
width: 5, width: 5,
color: colors[3] color: colors[3]
}, },
layoutConfig: layoutConfig().exactly().m({ layoutConfig: layoutConfig().just().configMargin({
left: 5, left: 5,
right: 5, right: 5,
bottom: 5, bottom: 5,
@ -65,7 +65,7 @@ class EffectsDemo extends Panel {
width: 100, width: 100,
height: 100, height: 100,
corners: 10, corners: 10,
layoutConfig: layoutConfig().exactly().m({ layoutConfig: layoutConfig().just().configMargin({
bottom: 10 bottom: 10
}) })
}),]).apply({ }),]).apply({
@ -84,7 +84,7 @@ class EffectsDemo extends Panel {
offsetY: 3, offsetY: 3,
radius: 5, radius: 5,
}, },
layoutConfig: layoutConfig().exactly().m({ layoutConfig: layoutConfig().just().configMargin({
bottom: 10 bottom: 10
}) })
}),]).apply({ }),]).apply({
@ -103,7 +103,7 @@ class EffectsDemo extends Panel {
color: colors[3] color: colors[3]
}, },
corners: 10, corners: 10,
layoutConfig: layoutConfig().exactly().m({ layoutConfig: layoutConfig().just().configMargin({
left: 5, left: 5,
right: 5, right: 5,
bottom: 5, bottom: 5,
@ -128,7 +128,7 @@ class EffectsDemo extends Panel {
offsetY: 3, offsetY: 3,
radius: 5, radius: 5,
}, },
layoutConfig: layoutConfig().exactly().m({ layoutConfig: layoutConfig().just().configMargin({
bottom: 10 bottom: 10
}) })
}),]).apply({ }),]).apply({
@ -148,7 +148,7 @@ class EffectsDemo extends Panel {
offsetY: 3, offsetY: 3,
radius: 5, radius: 5,
}, },
layoutConfig: layoutConfig().exactly().m({ layoutConfig: layoutConfig().just().configMargin({
bottom: 10 bottom: 10
}) })
}),]).apply({ }),]).apply({
@ -172,7 +172,7 @@ class EffectsDemo extends Panel {
offsetY: 3, offsetY: 3,
radius: 5, radius: 5,
}, },
layoutConfig: layoutConfig().exactly().m({ layoutConfig: layoutConfig().just().configMargin({
left: 5, left: 5,
right: 5, right: 5,
bottom: 5, bottom: 5,
@ -196,7 +196,7 @@ class EffectsDemo extends Panel {
offsetY: 0, offsetY: 0,
radius: 10, radius: 10,
}, },
layoutConfig: layoutConfig().exactly().m({ layoutConfig: layoutConfig().just().configMargin({
left: 10, left: 10,
right: 10, right: 10,
bottom: 10, bottom: 10,
@ -218,7 +218,7 @@ class EffectsDemo extends Panel {
offsetY: 5, offsetY: 5,
radius: 5, radius: 5,
}, },
layoutConfig: layoutConfig().exactly().m({ layoutConfig: layoutConfig().just().configMargin({
left: 10, left: 10,
right: 10, right: 10,
bottom: 10, bottom: 10,
@ -240,7 +240,7 @@ class EffectsDemo extends Panel {
offsetY: 5, offsetY: 5,
radius: 5, radius: 5,
}, },
layoutConfig: layoutConfig().exactly().m({ layoutConfig: layoutConfig().just().configMargin({
left: 10, left: 10,
right: 10, right: 10,
bottom: 10, bottom: 10,
@ -262,7 +262,7 @@ class EffectsDemo extends Panel {
offsetY: 5, offsetY: 5,
radius: 5, radius: 5,
}, },
layoutConfig: layoutConfig().exactly().m({ layoutConfig: layoutConfig().just().configMargin({
left: 10, left: 10,
right: 10, right: 10,
bottom: 10, bottom: 10,
@ -279,7 +279,7 @@ class EffectsDemo extends Panel {
width: 100, width: 100,
height: 100, height: 100,
corners: 50, corners: 50,
layoutConfig: layoutConfig().exactly().m({ layoutConfig: layoutConfig().just().configMargin({
left: 5, left: 5,
right: 5, right: 5,
bottom: 5, bottom: 5,
@ -296,7 +296,7 @@ class EffectsDemo extends Panel {
corners: { corners: {
leftTop: 50, leftTop: 50,
}, },
layoutConfig: layoutConfig().exactly().m({ layoutConfig: layoutConfig().just().configMargin({
left: 5, left: 5,
right: 5, right: 5,
bottom: 5, bottom: 5,
@ -313,7 +313,7 @@ class EffectsDemo extends Panel {
corners: { corners: {
rightTop: 50, rightTop: 50,
}, },
layoutConfig: layoutConfig().exactly().m({ layoutConfig: layoutConfig().just().configMargin({
left: 5, left: 5,
right: 5, right: 5,
bottom: 5, bottom: 5,
@ -330,7 +330,7 @@ class EffectsDemo extends Panel {
corners: { corners: {
leftBottom: 50, leftBottom: 50,
}, },
layoutConfig: layoutConfig().exactly().m({ layoutConfig: layoutConfig().just().configMargin({
left: 5, left: 5,
right: 5, right: 5,
bottom: 5, bottom: 5,
@ -347,7 +347,7 @@ class EffectsDemo extends Panel {
corners: { corners: {
rightBottom: 50, rightBottom: 50,
}, },
layoutConfig: layoutConfig().exactly().m({ layoutConfig: layoutConfig().just().configMargin({
left: 5, left: 5,
right: 5, right: 5,
bottom: 5, bottom: 5,
@ -361,7 +361,7 @@ class EffectsDemo extends Panel {
it.space = 20 it.space = 20
}), }),
).also(it => { ).also(it => {
it.layoutConfig = layoutConfig().atmost() it.layoutConfig = layoutConfig().most()
}).in(rootView) }).in(rootView)
} }
} }

10
src/FlowLayoutDemo.ts
View File

@ -16,7 +16,7 @@ const imageUrls = [
class FlowDemo extends Panel { class FlowDemo extends Panel {
build(rootView: Group): void { build(rootView: Group): void {
flowlayout({ flowlayout({
layoutConfig: layoutConfig().atmost(), layoutConfig: layoutConfig().most(),
itemCount: 100, itemCount: 100,
columnCount: 3, columnCount: 3,
columnSpace: 10, columnSpace: 10,
@ -25,13 +25,13 @@ class FlowDemo extends Panel {
return new FlowLayoutItem().apply({ return new FlowLayoutItem().apply({
backgroundColor: colors[idx % colors.length], backgroundColor: colors[idx % colors.length],
height: 50 + (idx % 3) * 20, height: 50 + (idx % 3) * 20,
layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST), layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
}).also(it => { }).also(it => {
it.addChild(text({ it.addChild(text({
text: `${idx}`, text: `${idx}`,
textColor: Color.WHITE, textColor: Color.WHITE,
textSize: 20, textSize: 20,
layoutConfig: layoutConfig().wrap().a(Gravity.Center) layoutConfig: layoutConfig().fit().configAligmnet(Gravity.Center)
})) }))
}) })
}, },
@ -45,13 +45,13 @@ class FlowDemo extends Panel {
it.loadMoreView = new FlowLayoutItem().apply({ it.loadMoreView = new FlowLayoutItem().apply({
backgroundColor: colors[500 % colors.length], backgroundColor: colors[500 % colors.length],
height: 50, height: 50,
layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST), layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
}).also(it => { }).also(it => {
it.addChild(text({ it.addChild(text({
text: 'load more', text: 'load more',
textColor: Color.WHITE, textColor: Color.WHITE,
textSize: 20, textSize: 20,
layoutConfig: layoutConfig().wrap().a(Gravity.Center) layoutConfig: layoutConfig().fit().configAligmnet(Gravity.Center)
})) }))
}) })
}) })

14
src/ImageDemo.ts
View File

@ -10,7 +10,7 @@ class ImageDemo extends Panel {
scroller(vlayout([ scroller(vlayout([
text({ text({
text: "Image Demo", text: "Image Demo",
layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST), layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
backgroundColor: colors[5], backgroundColor: colors[5],
@ -59,7 +59,7 @@ class ImageDemo extends Panel {
color: Color.GRAY, color: Color.GRAY,
}, },
scaleType: ScaleType.ScaleToFill, scaleType: ScaleType.ScaleToFill,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().just(),
loadCallback: (ret) => { loadCallback: (ret) => {
} }
}), }),
@ -73,7 +73,7 @@ class ImageDemo extends Panel {
color: Color.GRAY, color: Color.GRAY,
}, },
scaleType: ScaleType.ScaleAspectFit, scaleType: ScaleType.ScaleAspectFit,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().just(),
}), }),
label('ScaleAspectFill'), label('ScaleAspectFill'),
image({ image({
@ -85,7 +85,7 @@ class ImageDemo extends Panel {
color: Color.GRAY, color: Color.GRAY,
}, },
scaleType: ScaleType.ScaleAspectFill, scaleType: ScaleType.ScaleAspectFill,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().just(),
}), }),
label('ImageBase64'), label('ImageBase64'),
image({ image({
@ -97,14 +97,14 @@ class ImageDemo extends Panel {
color: Color.GRAY, color: Color.GRAY,
}, },
scaleType: ScaleType.ScaleAspectFill, scaleType: ScaleType.ScaleAspectFill,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().just(),
}), }),
]).apply({ ]).apply({
layoutConfig: layoutConfig().atmost().h(LayoutSpec.WRAP_CONTENT), layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
gravity: gravity().center(), gravity: gravity().center(),
space: 10, space: 10,
} as IVLayout)).apply({ } as IVLayout)).apply({
layoutConfig: layoutConfig().atmost(), layoutConfig: layoutConfig().most(),
}).in(rootView) }).in(rootView)
} }
} }

8
src/InputDemo.ts
View File

@ -7,7 +7,7 @@ class InputDemo extends Panel {
vlayout([ vlayout([
title("Input Demo"), title("Input Demo"),
(new Input).also(it => { (new Input).also(it => {
it.layoutConfig = layoutConfig().exactly().h(LayoutSpec.WRAP_CONTENT) it.layoutConfig = layoutConfig().just().configHeight(LayoutSpec.FIT)
it.width = 300 it.width = 300
it.multiline = false it.multiline = false
it.hintText = "HintText" it.hintText = "HintText"
@ -20,7 +20,7 @@ class InputDemo extends Panel {
} }
}), }),
(new Input).also(it => { (new Input).also(it => {
it.layoutConfig = layoutConfig().wrap() it.layoutConfig = layoutConfig().fit()
it.hintText = "HintText" it.hintText = "HintText"
it.hintTextColor = colors[2] it.hintTextColor = colors[2]
it.textAlignment = Gravity.Left it.textAlignment = Gravity.Left
@ -36,10 +36,10 @@ class InputDemo extends Panel {
]) ])
.also(it => { .also(it => {
it.space = 10 it.space = 10
it.layoutConfig = layoutConfig().atmost().h(LayoutSpec.WRAP_CONTENT) it.layoutConfig = layoutConfig().most().configHeight(LayoutSpec.FIT)
})) }))
.apply({ .apply({
layoutConfig: layoutConfig().atmost() layoutConfig: layoutConfig().most()
}) })
.in(root) .in(root)
} }

134
src/LayoutDemo.ts
View File

@ -103,8 +103,8 @@ class LayoutDemo extends Panel {
hlayout([ hlayout([
boxStr('weight=1', 3).apply({ boxStr('weight=1', 3).apply({
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.EXACTLY, widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
weight: 1, weight: 1,
} }
}), }),
@ -114,8 +114,8 @@ class LayoutDemo extends Panel {
width: 200, width: 200,
height: 30, height: 30,
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.EXACTLY, widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
}, },
backgroundColor: Color.parse('#eeeeee'), backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(), gravity: gravity().center(),
@ -124,8 +124,8 @@ class LayoutDemo extends Panel {
box(3), box(3),
boxStr('weight=1', 2).apply({ boxStr('weight=1', 2).apply({
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.EXACTLY, widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
weight: 1, weight: 1,
} }
}), }),
@ -134,8 +134,8 @@ class LayoutDemo extends Panel {
width: 200, width: 200,
height: 30, height: 30,
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.EXACTLY, widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
}, },
backgroundColor: Color.parse('#eeeeee'), backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(), gravity: gravity().center(),
@ -145,8 +145,8 @@ class LayoutDemo extends Panel {
box(2), box(2),
boxStr('weight=1', 4).apply({ boxStr('weight=1', 4).apply({
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.EXACTLY, widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
weight: 1, weight: 1,
} }
}), }),
@ -154,8 +154,8 @@ class LayoutDemo extends Panel {
width: 200, width: 200,
height: 30, height: 30,
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.EXACTLY, widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
}, },
backgroundColor: Color.parse('#eeeeee'), backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(), gravity: gravity().center(),
@ -163,15 +163,15 @@ class LayoutDemo extends Panel {
hlayout([ hlayout([
boxStr('weight=1', 3).apply({ boxStr('weight=1', 3).apply({
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.EXACTLY, widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
weight: 1, weight: 1,
} }
}), }),
boxStr('weight=1', 2).apply({ boxStr('weight=1', 2).apply({
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.EXACTLY, widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
weight: 1, weight: 1,
} }
}), }),
@ -180,8 +180,8 @@ class LayoutDemo extends Panel {
width: 200, width: 200,
height: 30, height: 30,
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.EXACTLY, widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
}, },
backgroundColor: Color.parse('#eeeeee'), backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(), gravity: gravity().center(),
@ -189,22 +189,22 @@ class LayoutDemo extends Panel {
hlayout([ hlayout([
boxStr('weight=1', 3).apply({ boxStr('weight=1', 3).apply({
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.EXACTLY, widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
weight: 1, weight: 1,
} }
}), }),
boxStr('weight=1', 2).apply({ boxStr('weight=1', 2).apply({
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.EXACTLY, widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
weight: 1, weight: 1,
} }
}), }),
boxStr('weight=1', 4).apply({ boxStr('weight=1', 4).apply({
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.EXACTLY, widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
weight: 1, weight: 1,
} }
}), }),
@ -212,8 +212,8 @@ class LayoutDemo extends Panel {
width: 200, width: 200,
height: 30, height: 30,
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.EXACTLY, widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
}, },
backgroundColor: Color.parse('#eeeeee'), backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(), gravity: gravity().center(),
@ -291,29 +291,29 @@ class LayoutDemo extends Panel {
vlayout([ vlayout([
boxStr('weight=1', 3).apply({ boxStr('weight=1', 3).apply({
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.AT_MOST, widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
weight: 1, weight: 1,
}, },
}), }),
box(2).apply({ box(2).apply({
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.AT_MOST, widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
} }
}), }),
box(4).apply({ box(4).apply({
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.AT_MOST, widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
} }
}), }),
]).apply({ ]).apply({
width: 100, width: 100,
height: 200, height: 200,
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.EXACTLY, widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
}, },
backgroundColor: Color.parse('#eeeeee'), backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(), gravity: gravity().center(),
@ -321,29 +321,29 @@ class LayoutDemo extends Panel {
vlayout([ vlayout([
box(3).apply({ box(3).apply({
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.AT_MOST, widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
}, },
}), }),
boxStr('weight=1', 2).apply({ boxStr('weight=1', 2).apply({
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.AT_MOST, widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
weight: 1, weight: 1,
} }
}), }),
box(4).apply({ box(4).apply({
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.AT_MOST, widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
} }
}), }),
]).apply({ ]).apply({
width: 100, width: 100,
height: 200, height: 200,
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.EXACTLY, widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
}, },
backgroundColor: Color.parse('#eeeeee'), backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(), gravity: gravity().center(),
@ -351,20 +351,20 @@ class LayoutDemo extends Panel {
vlayout([ vlayout([
box(3).apply({ box(3).apply({
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.AT_MOST, widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
}, },
}), }),
box(2).apply({ box(2).apply({
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.AT_MOST, widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
}, },
}), }),
boxStr('weight=1', 4).apply({ boxStr('weight=1', 4).apply({
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.AT_MOST, widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
weight: 1, weight: 1,
} }
}), }),
@ -372,8 +372,8 @@ class LayoutDemo extends Panel {
width: 100, width: 100,
height: 200, height: 200,
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.EXACTLY, widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
}, },
backgroundColor: Color.parse('#eeeeee'), backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(), gravity: gravity().center(),
@ -381,30 +381,30 @@ class LayoutDemo extends Panel {
vlayout([ vlayout([
boxStr('weight=1', 3).apply({ boxStr('weight=1', 3).apply({
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.AT_MOST, widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
weight: 1, weight: 1,
}, },
}), }),
boxStr('weight=1', 2).apply({ boxStr('weight=1', 2).apply({
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.AT_MOST, widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
weight: 1, weight: 1,
} }
}), }),
box(4).apply({ box(4).apply({
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.AT_MOST, widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
} }
}), }),
]).apply({ ]).apply({
width: 100, width: 100,
height: 200, height: 200,
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.EXACTLY, widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
}, },
backgroundColor: Color.parse('#eeeeee'), backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(), gravity: gravity().center(),
@ -412,22 +412,22 @@ class LayoutDemo extends Panel {
vlayout([ vlayout([
boxStr('weight=1', 3).apply({ boxStr('weight=1', 3).apply({
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.AT_MOST, widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
weight: 1, weight: 1,
}, },
}), }),
boxStr('weight=1', 2).apply({ boxStr('weight=1', 2).apply({
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.AT_MOST, widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
weight: 1, weight: 1,
} }
}), }),
boxStr('weight=1', 4).apply({ boxStr('weight=1', 4).apply({
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.AT_MOST, widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
weight: 1, weight: 1,
} }
}), }),
@ -435,8 +435,8 @@ class LayoutDemo extends Panel {
width: 100, width: 100,
height: 200, height: 200,
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.EXACTLY, widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
}, },
backgroundColor: Color.parse('#eeeeee'), backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(), gravity: gravity().center(),
@ -453,7 +453,7 @@ class LayoutDemo extends Panel {
it.space = 20 it.space = 20
}), }),
).also(it => { ).also(it => {
it.layoutConfig = layoutConfig().atmost() it.layoutConfig = layoutConfig().most()
}) })
.in(rootView) .in(rootView)
} }

30
src/ListDemo.ts
View File

@ -9,8 +9,8 @@ class ListPanel extends Panel {
text({ text({
text: "ListDemo", text: "ListDemo",
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.AT_MOST, widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
}, },
textSize: 30, textSize: 30,
textColor: Color.parse("#535c68"), textColor: Color.parse("#535c68"),
@ -33,7 +33,7 @@ class ListPanel extends Panel {
} }
it.loadMoreView = listItem(text({ it.loadMoreView = listItem(text({
text: "Loading", text: "Loading",
layoutConfig: layoutConfig().atmost().h(LayoutSpec.EXACTLY).a(Gravity.Center), layoutConfig: layoutConfig().most().configHeight(LayoutSpec.JUST).configAligmnet(Gravity.Center),
height: 50, height: 50,
})) }))
it.renderItem = (idx: number) => { it.renderItem = (idx: number) => {
@ -42,8 +42,8 @@ class ListPanel extends Panel {
hlayout([ hlayout([
text({ text({
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.WRAP_CONTENT, widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
alignment: gravity().center(), alignment: gravity().center(),
}, },
text: `Cell At Line ${idx}`, text: `Cell At Line ${idx}`,
@ -59,8 +59,8 @@ class ListPanel extends Panel {
}).also(it => { }).also(it => {
counter = it counter = it
it.layoutConfig = { it.layoutConfig = {
widthSpec: LayoutSpec.WRAP_CONTENT, widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.WRAP_CONTENT, heightSpec: LayoutSpec.FIT,
margin: { margin: {
left: 10, left: 10,
} }
@ -68,8 +68,8 @@ class ListPanel extends Panel {
}) })
]).also(it => { ]).also(it => {
it.layoutConfig = { it.layoutConfig = {
widthSpec: LayoutSpec.AT_MOST, widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.WRAP_CONTENT, heightSpec: LayoutSpec.FIT,
margin: { margin: {
bottom: 2, bottom: 2,
} }
@ -83,8 +83,8 @@ class ListPanel extends Panel {
}) })
).also(it => { ).also(it => {
it.layoutConfig = { it.layoutConfig = {
widthSpec: LayoutSpec.AT_MOST, widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.WRAP_CONTENT, heightSpec: LayoutSpec.FIT,
} }
it.onClick = () => { it.onClick = () => {
log(`Click item at ${idx}`) log(`Click item at ${idx}`)
@ -107,16 +107,16 @@ class ListPanel extends Panel {
itemCount: 0, itemCount: 0,
renderItem: () => new ListItem, renderItem: () => new ListItem,
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.AT_MOST, widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.AT_MOST, heightSpec: LayoutSpec.MOST,
}, },
}), }),
}), }),
]).also(it => { ]).also(it => {
it.layoutConfig = { it.layoutConfig = {
widthSpec: LayoutSpec.AT_MOST, widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.AT_MOST, heightSpec: LayoutSpec.MOST,
} }
it.backgroundColor = Color.WHITE it.backgroundColor = Color.WHITE
}).in(rootView) }).in(rootView)

24
src/ModalDemo.ts
View File

@ -7,7 +7,7 @@ class ModalDemo extends Panel {
scroller(vlayout([ scroller(vlayout([
text({ text({
text: "Modal", text: "Modal",
layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST), layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
backgroundColor: colors[1], backgroundColor: colors[1],
@ -21,7 +21,7 @@ class ModalDemo extends Panel {
backgroundColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().just(),
onClick: () => { onClick: () => {
modal(context).toast('This is a toast.') modal(context).toast('This is a toast.')
} }
@ -33,7 +33,7 @@ class ModalDemo extends Panel {
backgroundColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().just(),
onClick: () => { onClick: () => {
modal(context).toast('This is a toast.', Gravity.Top) modal(context).toast('This is a toast.', Gravity.Top)
} }
@ -46,14 +46,14 @@ class ModalDemo extends Panel {
backgroundColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().just(),
onClick: () => { onClick: () => {
modal(context).toast('This is a toast.', Gravity.Center) modal(context).toast('This is a toast.', Gravity.Center)
} }
} as IText), } as IText),
text({ text({
text: "Alert", text: "Alert",
layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST), layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
backgroundColor: colors[2], backgroundColor: colors[2],
@ -66,7 +66,7 @@ class ModalDemo extends Panel {
backgroundColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().just(),
onClick: () => { onClick: () => {
modal(context).alert({ modal(context).alert({
msg: 'This is alert.', msg: 'This is alert.',
@ -79,7 +79,7 @@ class ModalDemo extends Panel {
} as IText), } as IText),
text({ text({
text: "Confirm", text: "Confirm",
layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST), layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
backgroundColor: colors[3], backgroundColor: colors[3],
@ -92,7 +92,7 @@ class ModalDemo extends Panel {
backgroundColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().just(),
onClick: () => { onClick: () => {
modal(context).confirm({ modal(context).confirm({
msg: 'This is Confirm.', msg: 'This is Confirm.',
@ -110,7 +110,7 @@ class ModalDemo extends Panel {
} as IText), } as IText),
text({ text({
text: "Prompt", text: "Prompt",
layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST), layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
backgroundColor: colors[4], backgroundColor: colors[4],
@ -123,7 +123,7 @@ class ModalDemo extends Panel {
backgroundColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().just(),
onClick: () => { onClick: () => {
modal(context).prompt({ modal(context).prompt({
msg: 'This is Prompt.', msg: 'This is Prompt.',
@ -140,11 +140,11 @@ class ModalDemo extends Panel {
} }
} as IText), } as IText),
]).apply({ ]).apply({
layoutConfig: layoutConfig().atmost().h(LayoutSpec.WRAP_CONTENT), layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
gravity: Gravity.Center, gravity: Gravity.Center,
space: 10, space: 10,
} as IVLayout)).apply({ } as IVLayout)).apply({
layoutConfig: layoutConfig().atmost(), layoutConfig: layoutConfig().most(),
}).in(rootView) }).in(rootView)
} }
} }

14
src/NavbarDemo.ts
View File

@ -12,7 +12,7 @@ class NavbarDemo extends Panel {
backgroundColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().just(),
onClick: () => { onClick: () => {
navbar(context).isHidden().then(e => modal(context).alert(`Navbar isHidden:${e}`)).catch(e => { navbar(context).isHidden().then(e => modal(context).alert(`Navbar isHidden:${e}`)).catch(e => {
modal(context).alert(e) modal(context).alert(e)
@ -25,7 +25,7 @@ class NavbarDemo extends Panel {
backgroundColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().just(),
onClick: () => { onClick: () => {
navbar(context).isHidden() navbar(context).isHidden()
.then(e => navbar(context).setHidden(!e)) .then(e => navbar(context).setHidden(!e))
@ -40,7 +40,7 @@ class NavbarDemo extends Panel {
backgroundColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().just(),
onClick: () => { onClick: () => {
navbar(context).setTitle('Setted Title') navbar(context).setTitle('Setted Title')
.catch(e => { .catch(e => {
@ -54,7 +54,7 @@ class NavbarDemo extends Panel {
backgroundColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().just(),
onClick: () => { onClick: () => {
navbar(context).setBgColor(Color.YELLOW) navbar(context).setBgColor(Color.YELLOW)
.catch(e => { .catch(e => {
@ -68,17 +68,17 @@ class NavbarDemo extends Panel {
backgroundColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().just(),
onClick: () => { onClick: () => {
navigator(context).pop() navigator(context).pop()
} }
} as IText), } as IText),
]).apply({ ]).apply({
layoutConfig: layoutConfig().atmost().h(LayoutSpec.WRAP_CONTENT), layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
gravity: gravity().center(), gravity: gravity().center(),
space: 10, space: 10,
} as IVLayout)).apply({ } as IVLayout)).apply({
layoutConfig: layoutConfig().atmost(), layoutConfig: layoutConfig().most(),
}).in(rootView) }).in(rootView)
} }
} }

10
src/NavigatorDemo.ts
View File

@ -9,7 +9,7 @@ class NaivgatorDemo extends Panel {
scroller(vlayout([ scroller(vlayout([
text({ text({
text: "Navigator Demo", text: "Navigator Demo",
layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST), layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
backgroundColor: colors[1], backgroundColor: colors[1],
@ -26,7 +26,7 @@ class NaivgatorDemo extends Panel {
backgroundColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly().w(LayoutSpec.AT_MOST), layoutConfig: layoutConfig().just().configWidth(LayoutSpec.MOST),
onClick: () => { onClick: () => {
navigator(context).push(`assets://demo/${e}.js`, { navigator(context).push(`assets://demo/${e}.js`, {
alias: `${e}.js`, alias: `${e}.js`,
@ -43,17 +43,17 @@ class NaivgatorDemo extends Panel {
backgroundColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().just(),
onClick: () => { onClick: () => {
navigator(context).pop() navigator(context).pop()
}, },
} as IText), } as IText),
]).apply({ ]).apply({
layoutConfig: layoutConfig().atmost().h(LayoutSpec.WRAP_CONTENT), layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
gravity: gravity().center(), gravity: gravity().center(),
space: 10, space: 10,
} as IVLayout)).apply({ } as IVLayout)).apply({
layoutConfig: layoutConfig().atmost(), layoutConfig: layoutConfig().most(),
}).in(root) }).in(root)
} }

6
src/NetworkDemo.ts
View File

@ -12,7 +12,7 @@ class NetworkDemo extends Panel {
backgroundColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().just(),
onClick: () => { onClick: () => {
network(context).get('https://m.baidu.com').then( network(context).get('https://m.baidu.com').then(
e => { e => {
@ -24,11 +24,11 @@ class NetworkDemo extends Panel {
} }
} as IText), } as IText),
]).apply({ ]).apply({
layoutConfig: layoutConfig().atmost().h(LayoutSpec.WRAP_CONTENT), layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
gravity: gravity().center(), gravity: gravity().center(),
space: 10, space: 10,
} as IVLayout)).apply({ } as IVLayout)).apply({
layoutConfig: layoutConfig().atmost(), layoutConfig: layoutConfig().most(),
}).in(rootView) }).in(rootView)
} }
} }

8
src/PopoverDemo.ts
View File

@ -12,14 +12,14 @@ class PopoverDemo extends Panel {
backgroundColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().just(),
onClick: () => { onClick: () => {
popover(context).show(text({ popover(context).show(text({
width: 200, width: 200,
height: 50, height: 50,
backgroundColor: colors[0], backgroundColor: colors[0],
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly().a(Gravity.Center), layoutConfig: layoutConfig().just().configAligmnet(Gravity.Center),
text: "This is PopOver Window", text: "This is PopOver Window",
}).also(v => { }).also(v => {
let idx = 0 let idx = 0
@ -34,11 +34,11 @@ class PopoverDemo extends Panel {
} }
} as IText), } as IText),
]).apply({ ]).apply({
layoutConfig: layoutConfig().atmost().h(LayoutSpec.WRAP_CONTENT), layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
gravity: gravity().center(), gravity: gravity().center(),
space: 10, space: 10,
} as IVLayout)).apply({ } as IVLayout)).apply({
layoutConfig: layoutConfig().atmost(), layoutConfig: layoutConfig().most(),
}).in(rootView) }).in(rootView)
} }
} }

14
src/RefreshableDemo.ts
View File

@ -6,7 +6,7 @@ class RefreshableDemo extends Panel {
build(rootView: Group): void { build(rootView: Group): void {
let refreshImage: Image let refreshImage: Image
let refreshView = refreshable({ let refreshView = refreshable({
layoutConfig: layoutConfig().atmost(), layoutConfig: layoutConfig().most(),
onRefresh: () => { onRefresh: () => {
log('onRefresh') log('onRefresh')
setTimeout(() => { setTimeout(() => {
@ -16,7 +16,7 @@ class RefreshableDemo extends Panel {
header: pullable( header: pullable(
stack([ stack([
image({ image({
layoutConfig: layoutConfig().exactly().m({ top: 50, bottom: 10, }), layoutConfig: layoutConfig().just().configMargin({ top: 50, bottom: 10, }),
width: 30, width: 30,
height: 30, height: 30,
imageBase64: icon_refresh, imageBase64: icon_refresh,
@ -43,7 +43,7 @@ class RefreshableDemo extends Panel {
backgroundColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().just(),
onClick: () => { onClick: () => {
refreshView.setRefreshing(context, true) refreshView.setRefreshing(context, true)
} }
@ -54,7 +54,7 @@ class RefreshableDemo extends Panel {
backgroundColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().just(),
onClick: () => { onClick: () => {
refreshView.setRefreshing(context, false) refreshView.setRefreshing(context, false)
} }
@ -66,7 +66,7 @@ class RefreshableDemo extends Panel {
backgroundColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().just(),
onClick: () => { onClick: () => {
refreshView.setRefreshable(context, true) refreshView.setRefreshable(context, true)
} }
@ -78,13 +78,13 @@ class RefreshableDemo extends Panel {
backgroundColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().just(),
onClick: () => { onClick: () => {
refreshView.setRefreshable(context, false) refreshView.setRefreshable(context, false)
} }
} as IText), } as IText),
]).apply({ ]).apply({
layoutConfig: layoutConfig().atmost().h(LayoutSpec.WRAP_CONTENT), layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
gravity: gravity().centerX(), gravity: gravity().centerX(),
space: 10, space: 10,
} as IVLayout)) } as IVLayout))

6
src/ScrollerDemo.ts
View File

@ -9,7 +9,7 @@ class ScrollerPanel extends Panel {
scroller( scroller(
vlayout(new Array(100).fill(1).map(e => label('Scroll Content'))) vlayout(new Array(100).fill(1).map(e => label('Scroll Content')))
).apply({ ).apply({
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().just(),
width: 300, width: 300,
height: 500, height: 500,
backgroundColor: Color.RED, backgroundColor: Color.RED,
@ -17,7 +17,7 @@ class ScrollerPanel extends Panel {
scroller( scroller(
vlayout(new Array(100).fill(1).map(e => label('Scroll Content'))) vlayout(new Array(100).fill(1).map(e => label('Scroll Content')))
).apply({ ).apply({
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().just(),
width: 300, width: 300,
height: 500, height: 500,
backgroundColor: Color.BLUE, backgroundColor: Color.BLUE,
@ -25,7 +25,7 @@ class ScrollerPanel extends Panel {
]) ])
) )
.apply({ .apply({
layoutConfig: layoutConfig().atmost().h(LayoutSpec.EXACTLY), layoutConfig: layoutConfig().most().configHeight(LayoutSpec.JUST),
height: 500, height: 500,
backgroundColor: Color.YELLOW, backgroundColor: Color.YELLOW,
}) })

14
src/SliderDemo.ts
View File

@ -19,8 +19,8 @@ class SliderPanel extends Panel {
text({ text({
text: "Gallery", text: "Gallery",
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.AT_MOST, widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
}, },
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
@ -34,7 +34,7 @@ class SliderPanel extends Panel {
return slideItem(image({ return slideItem(image({
imageUrl: imageUrls[idx % imageUrls.length], imageUrl: imageUrls[idx % imageUrls.length],
scaleType: ScaleType.ScaleAspectFit, scaleType: ScaleType.ScaleAspectFit,
layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST).h(LayoutSpec.AT_MOST).a(gravity().center()), layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST).configHeight(LayoutSpec.MOST).configAligmnet(gravity().center()),
})).also(it => { })).also(it => {
let start = idx let start = idx
it.onClick = () => { it.onClick = () => {
@ -43,15 +43,15 @@ class SliderPanel extends Panel {
}) })
}, },
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.AT_MOST, widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.WRAP_CONTENT, heightSpec: LayoutSpec.FIT,
weight: 1, weight: 1,
}, },
}), }),
]).also(it => { ]).also(it => {
it.layoutConfig = { it.layoutConfig = {
widthSpec: LayoutSpec.AT_MOST, widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.AT_MOST, heightSpec: LayoutSpec.MOST,
} }
})) }))
} }

44
src/Snake.ts
View File

@ -155,8 +155,8 @@ class SnakeView extends ViewHolder {
margin: { margin: {
top: 20 top: 20
}, },
widthSpec: LayoutSpec.WRAP_CONTENT, widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.WRAP_CONTENT, heightSpec: LayoutSpec.FIT,
}, },
}), }),
(new Stack).also(panel => { (new Stack).also(panel => {
@ -169,14 +169,14 @@ class SnakeView extends ViewHolder {
textSize: 30, textSize: 30,
textColor: Color.parse("#ffffff"), textColor: Color.parse("#ffffff"),
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.WRAP_CONTENT, widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.WRAP_CONTENT, heightSpec: LayoutSpec.FIT,
}, },
}).also(it => this.start = it), }).also(it => this.start = it),
]).also(it => { ]).also(it => {
it.layoutConfig = { it.layoutConfig = {
widthSpec: LayoutSpec.WRAP_CONTENT, widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.WRAP_CONTENT, heightSpec: LayoutSpec.FIT,
} }
}), }),
@ -190,14 +190,14 @@ class SnakeView extends ViewHolder {
textAlignment: new Gravity().center(), textAlignment: new Gravity().center(),
backgroundColor: Color.parse('#ffff00'), backgroundColor: Color.parse('#ffff00'),
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.EXACTLY, widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
}, },
}).also(it => this.up = it) }).also(it => this.up = it)
]).also(it => { ]).also(it => {
it.layoutConfig = { it.layoutConfig = {
widthSpec: LayoutSpec.WRAP_CONTENT, widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.WRAP_CONTENT, heightSpec: LayoutSpec.FIT,
} }
}), }),
hlayout([ hlayout([
@ -209,8 +209,8 @@ class SnakeView extends ViewHolder {
textAlignment: new Gravity().center(), textAlignment: new Gravity().center(),
backgroundColor: Color.parse('#ffff00'), backgroundColor: Color.parse('#ffff00'),
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.EXACTLY, widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
}, },
}).also(it => this.left = it), }).also(it => this.left = it),
text({ text({
@ -221,8 +221,8 @@ class SnakeView extends ViewHolder {
textAlignment: new Gravity().center(), textAlignment: new Gravity().center(),
backgroundColor: Color.parse('#ffff00'), backgroundColor: Color.parse('#ffff00'),
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.EXACTLY, widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
}, },
}).also(it => this.down = it), }).also(it => this.down = it),
text({ text({
@ -233,14 +233,14 @@ class SnakeView extends ViewHolder {
textAlignment: new Gravity().center(), textAlignment: new Gravity().center(),
backgroundColor: Color.parse('#ffff00'), backgroundColor: Color.parse('#ffff00'),
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.EXACTLY, widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.EXACTLY, heightSpec: LayoutSpec.JUST,
}, },
}).also(it => this.right = it), }).also(it => this.right = it),
]).also(it => { ]).also(it => {
it.layoutConfig = { it.layoutConfig = {
widthSpec: LayoutSpec.WRAP_CONTENT, widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.WRAP_CONTENT, heightSpec: LayoutSpec.FIT,
} }
it.space = 10 it.space = 10
}), }),
@ -249,16 +249,16 @@ class SnakeView extends ViewHolder {
controlArea.space = 10 controlArea.space = 10
controlArea.layoutConfig = { controlArea.layoutConfig = {
alignment: new Gravity().centerX(), alignment: new Gravity().centerX(),
widthSpec: LayoutSpec.WRAP_CONTENT, widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.WRAP_CONTENT, heightSpec: LayoutSpec.FIT,
} }
}), }),
]).also(it => { ]).also(it => {
it.space = 20 it.space = 20
it.layoutConfig = { it.layoutConfig = {
alignment: new Gravity().centerX().top(), alignment: new Gravity().centerX().top(),
widthSpec: LayoutSpec.AT_MOST, widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.AT_MOST, heightSpec: LayoutSpec.MOST,
} }
it.gravity = new Gravity().centerX() it.gravity = new Gravity().centerX()
}).in(root) }).in(root)

26
src/StickDemo.ts
View File

@ -4,7 +4,7 @@ import { title, colors } from "./utils";
function tab(idx: number, title: string, sliderView: Slider) { function tab(idx: number, title: string, sliderView: Slider) {
return text({ return text({
text: title, text: title,
layoutConfig: layoutConfig().exactly().wg(1), layoutConfig: layoutConfig().just().configWeight(1),
height: 41, height: 41,
onClick: () => { onClick: () => {
sliderView.slidePage(context, 0, true) sliderView.slidePage(context, 0, true)
@ -27,13 +27,13 @@ class StickDemo extends Panel {
vlayout([ vlayout([
stack([ stack([
image({ image({
layoutConfig: layoutConfig().atmost(), layoutConfig: layoutConfig().most(),
imageUrl: "https://p.upyun.com/demo/webp/webp/jpg-0.webp", imageUrl: "https://p.upyun.com/demo/webp/webp/jpg-0.webp",
scaleType: ScaleType.ScaleAspectFill, scaleType: ScaleType.ScaleAspectFill,
}), }),
]).apply({ ]).apply({
layoutConfig: layoutConfig().atmost().h(LayoutSpec.EXACTLY), layoutConfig: layoutConfig().most().configHeight(LayoutSpec.JUST),
height: 200, height: 200,
backgroundColor: colors[0], backgroundColor: colors[0],
}), }),
@ -42,7 +42,7 @@ class StickDemo extends Panel {
...this.tabs = [0, 1, 2].map(idx => { ...this.tabs = [0, 1, 2].map(idx => {
return text({ return text({
text: `Tab ${idx}`, text: `Tab ${idx}`,
layoutConfig: layoutConfig().exactly().wg(1), layoutConfig: layoutConfig().just().configWeight(1),
height: 41, height: 41,
onClick: () => { onClick: () => {
this.sliderView.slidePage(context, idx, true) this.sliderView.slidePage(context, idx, true)
@ -50,12 +50,12 @@ class StickDemo extends Panel {
}) })
}) })
]).apply({ ]).apply({
layoutConfig: layoutConfig().atmost(), layoutConfig: layoutConfig().most(),
gravity: Gravity.Center, gravity: Gravity.Center,
} as IHLayout), } as IHLayout),
this.indicator, this.indicator,
]).apply({ ]).apply({
layoutConfig: layoutConfig().atmost().h(LayoutSpec.EXACTLY), layoutConfig: layoutConfig().most().configHeight(LayoutSpec.JUST),
height: 57, height: 57,
}), }),
@ -66,7 +66,7 @@ class StickDemo extends Panel {
} }
[0, 1, 2].map(idx => { [0, 1, 2].map(idx => {
return flowlayout({ return flowlayout({
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().just(),
width: root.width, width: root.width,
height: root.height - 57, height: root.height - 57,
itemCount: 100, itemCount: 100,
@ -77,13 +77,13 @@ class StickDemo extends Panel {
return new FlowLayoutItem().apply({ return new FlowLayoutItem().apply({
backgroundColor: colors[itemIdx % colors.length], backgroundColor: colors[itemIdx % colors.length],
height: 50, height: 50,
layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST), layoutConfig: layoutConfig().configWidth(LayoutSpec.JUST),
}).also(it => { }).also(it => {
it.addChild(text({ it.addChild(text({
text: `In Page ${idx},${itemIdx}`, text: `In Page ${idx},${itemIdx}`,
textColor: Color.WHITE, textColor: Color.WHITE,
textSize: 20, textSize: 20,
layoutConfig: layoutConfig().wrap().a(Gravity.Center) layoutConfig: layoutConfig().fit().configAligmnet(Gravity.Center)
}).also(v => { }).also(v => {
v.onClick = () => { v.onClick = () => {
v.text = "Clicked" v.text = "Clicked"
@ -96,16 +96,16 @@ class StickDemo extends Panel {
v.addSlideItem(e) v.addSlideItem(e)
}) })
}).apply({ }).apply({
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().just(),
width: root.width, width: root.width,
height: root.height - 57, height: root.height - 57,
}), }),
]) ])
.also(it => { .also(it => {
it.layoutConfig = layoutConfig().atmost().h(LayoutSpec.WRAP_CONTENT) it.layoutConfig = layoutConfig().most().configHeight(LayoutSpec.FIT)
})) }))
.apply({ .apply({
layoutConfig: layoutConfig().atmost() layoutConfig: layoutConfig().most()
}) })
.in(root) .in(root)
this.indicator.centerX = this.getRootView().width / this.tabs.length / 2 this.indicator.centerX = this.getRootView().width / this.tabs.length / 2
@ -120,7 +120,7 @@ class StickDemo extends Panel {
e.textColor = Color.BLACK e.textColor = Color.BLACK
} }
}) })
this.indicator.layoutConfig = layoutConfig().exactly().a(Gravity.Bottom).m({ bottom: 13 }) this.indicator.layoutConfig = layoutConfig().just().configAligmnet(Gravity.Bottom).configMargin({ bottom: 13 })
animate(context)({ animate(context)({
animations: () => { animations: () => {
this.indicator.centerX = this.getRootView().width / this.tabs.length * (page + 0.5) this.indicator.centerX = this.getRootView().width / this.tabs.length * (page + 0.5)

14
src/StorageDemo.ts
View File

@ -17,7 +17,7 @@ class StorageDemo extends Panel {
scroller(vlayout([ scroller(vlayout([
text({ text({
text: "Storage Demo", text: "Storage Demo",
layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST), layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
backgroundColor: colors[1], backgroundColor: colors[1],
@ -26,7 +26,7 @@ class StorageDemo extends Panel {
}), }),
label('Stored'), label('Stored'),
text({ text({
layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST), layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
textSize: 20, textSize: 20,
textColor: Color.WHITE, textColor: Color.WHITE,
backgroundColor: colors[3], backgroundColor: colors[3],
@ -39,7 +39,7 @@ class StorageDemo extends Panel {
backgroundColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().just(),
onClick: () => { onClick: () => {
storage(context).getItem(storedKey, zone).then(e => { storage(context).getItem(storedKey, zone).then(e => {
modal(context).prompt({ modal(context).prompt({
@ -60,7 +60,7 @@ class StorageDemo extends Panel {
backgroundColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().just(),
onClick: () => { onClick: () => {
storage(context).remove(storedKey, zone).then(e => { storage(context).remove(storedKey, zone).then(e => {
this.update() this.update()
@ -73,7 +73,7 @@ class StorageDemo extends Panel {
backgroundColor: colors[0], backgroundColor: colors[0],
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
layoutConfig: layoutConfig().exactly(), layoutConfig: layoutConfig().just(),
onClick: () => { onClick: () => {
storage(context).clear(zone).then(e => { storage(context).clear(zone).then(e => {
this.update() this.update()
@ -81,11 +81,11 @@ class StorageDemo extends Panel {
}, },
} as IText), } as IText),
]).apply({ ]).apply({
layoutConfig: layoutConfig().atmost().h(LayoutSpec.WRAP_CONTENT), layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
gravity: gravity().center(), gravity: gravity().center(),
space: 10, space: 10,
} as IVLayout)).apply({ } as IVLayout)).apply({
layoutConfig: layoutConfig().atmost(), layoutConfig: layoutConfig().most(),
}).in(root) }).in(root)
this.update() this.update()
} }

4
src/utils.ts
View File

@ -39,7 +39,7 @@ export function boxStr(str: string, idx = 0) {
export function title(str: string) { export function title(str: string) {
return text({ return text({
text: str, text: str,
layoutConfig: layoutConfig().w(LayoutSpec.AT_MOST), layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
textSize: 30, textSize: 30,
textColor: Color.WHITE, textColor: Color.WHITE,
backgroundColor: colors[1], backgroundColor: colors[1],
@ -53,7 +53,7 @@ export function rotatedArrow() {
return pullable( return pullable(
stack([ stack([
image({ image({
layoutConfig: layoutConfig().exactly().m({ top: 50, bottom: 10, }), layoutConfig: layoutConfig().just().configMargin({ top: 50, bottom: 10, }),
width: 30, width: 30,
height: 30, height: 30,
imageBase64: icon_refresh, imageBase64: icon_refresh,