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

demo:optimize demo code

Browse Source
This commit is contained in:
pengfei.zhou 2020-01-06 10:43:18 +08:00 committed by osborn
parent 3b82935b24
commit 05b5c69080
25 changed files with 1860 additions and 1656 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
doric-demo/src/AnimatorDemo.ts
View File

@ -22,12 +22,13 @@ class AnimatorDemo extends Panel {
} }
const view2 = box(3) const view2 = box(3)
let idx = 0 let idx = 0
vlayout([ vlayout(
[
title("Animator Demo"), title("Animator Demo"),
vlayout( vlayout(
[ [
hlayout([ hlayout(
thisLabel('Reset').apply({ [thisLabel('Reset').apply({
onClick: () => { onClick: () => {
animate(context)({ animate(context)({
animations: () => { animations: () => {
@ -49,9 +50,11 @@ class AnimatorDemo extends Panel {
modal(context).toast(`${e}`) modal(context).toast(`${e}`)
}) })
} }
}), }),],
]).apply({ space: 10 } as IHLayout), { space: 10 }
hlayout([ ),
hlayout(
[
thisLabel('X').apply({ thisLabel('X').apply({
onClick: () => { onClick: () => {
animate(context)({ animate(context)({
@ -96,8 +99,11 @@ class AnimatorDemo extends Panel {
}) })
} }
}), }),
]).apply({ space: 10 } as IHLayout), ],
hlayout([ { space: 10 }
),
hlayout(
[
thisLabel('BgColor').apply({ thisLabel('BgColor').apply({
onClick: () => { onClick: () => {
animate(context)({ animate(context)({
@ -136,7 +142,9 @@ class AnimatorDemo extends Panel {
}); });
} }
}), }),
]).apply({ space: 10 } as IHLayout), ],
{ space: 10 }
),
hlayout([ hlayout([
thisLabel('scaleX').apply({ thisLabel('scaleX').apply({
@ -168,18 +176,23 @@ class AnimatorDemo extends Panel {
} }
}), }),
]).apply({ space: 10 } as IHLayout), ]).apply({ space: 10 } as IHLayout),
] ],
).apply({ space: 10 } as IVLayout), { space: 10 }
stack([ ),
stack(
[
view, view,
]).apply({ ],
{
layoutConfig: layoutConfig().most(), layoutConfig: layoutConfig().most(),
backgroundColor: colors[1].alpha(0.3 * 255), backgroundColor: colors[1].alpha(0.3 * 255),
}), }),
]).apply({ ],
{
layoutConfig: layoutConfig().most(), layoutConfig: layoutConfig().most(),
gravity: gravity().center(), gravity: gravity().center(),
space: 10, space: 10,
} as IVLayout).in(rootView) }
).in(rootView)
} }
} }

51
doric-demo/src/ComplicatedAnimations.ts
View File

@ -21,11 +21,13 @@ class AnimationDemo extends Panel {
view.onClick = () => { view.onClick = () => {
modal(context).toast('Clicked') modal(context).toast('Clicked')
} }
vlayout([ vlayout(
[
title("Complicated Animation"), title("Complicated Animation"),
vlayout( vlayout(
[ [
hlayout([ hlayout(
[
thisLabel('reset').apply({ thisLabel('reset').apply({
onClick: () => { onClick: () => {
const rotation = new RotationAnimation const rotation = new RotationAnimation
@ -53,8 +55,11 @@ class AnimationDemo extends Panel {
}) })
} }
}), }),
]).apply({ space: 10 } as IHLayout), ],
hlayout([ { space: 10 }
),
hlayout(
[
thisLabel('TranslationX').apply({ thisLabel('TranslationX').apply({
onClick: () => { onClick: () => {
const animation = new TranslationAnimation const animation = new TranslationAnimation
@ -104,8 +109,11 @@ class AnimationDemo extends Panel {
view.doAnimation(context, animation) view.doAnimation(context, animation)
} }
}), }),
]).apply({ space: 10 } as IHLayout), ],
hlayout([ { space: 10 }
),
hlayout(
[
thisLabel('group').apply({ thisLabel('group').apply({
onClick: () => { onClick: () => {
const rotation = new RotationAnimation const rotation = new RotationAnimation
@ -122,8 +130,11 @@ class AnimationDemo extends Panel {
view.doAnimation(context, animationSet) view.doAnimation(context, animationSet)
} }
}), }),
]).apply({ space: 10 } as IHLayout), ],
hlayout([ { space: 10 }
),
hlayout(
[
thisLabel('Default').apply({ thisLabel('Default').apply({
onClick: () => { onClick: () => {
const translation = new TranslationAnimation const translation = new TranslationAnimation
@ -174,10 +185,14 @@ class AnimationDemo extends Panel {
view.doAnimation(context, translation) view.doAnimation(context, translation)
} }
}), }),
]).apply({ space: 10 } as IHLayout), ],
] { space: 10 }
).apply({ space: 10 } as IVLayout), ),
stack([ ],
{ space: 10 }
),
stack(
[
view.also(v => { view.also(v => {
v.x = 20 v.x = 20
v.y = 0 v.y = 0
@ -189,14 +204,18 @@ class AnimationDemo extends Panel {
v.y = 40 v.y = 40
v.scaleX = 1.5 v.scaleX = 1.5
}) })
]).apply({ ],
{
layoutConfig: layoutConfig().most(), layoutConfig: layoutConfig().most(),
backgroundColor: colors[1].alpha(0.3 * 255), backgroundColor: colors[1].alpha(0.3 * 255),
}), }
]).apply({ ),
],
{
layoutConfig: layoutConfig().most(), layoutConfig: layoutConfig().most(),
gravity: gravity().center(), gravity: gravity().center(),
space: 10, space: 10,
} as IVLayout).in(rootView) }
).in(rootView)
} }
} }

2
doric-demo/src/ComplicatedDemo.ts
View File

@ -39,9 +39,7 @@ class MyDemo extends Panel {
backgroundColor: colors[idx % colors.length], backgroundColor: colors[idx % colors.length],
})) }))
} }
}).apply({
}), }),
}).apply({
layoutConfig: layoutConfig().most(), layoutConfig: layoutConfig().most(),
}).also(v => { }).also(v => {
v.top = 200 v.top = 200

9
doric-demo/src/Counter.ts
View File

@ -7,7 +7,8 @@ class CounterView extends ViewHolder {
number!: Text number!: Text
counter!: Text counter!: Text
build(root: Group) { build(root: Group) {
vlayout([ vlayout(
[
this.number = text({ this.number = text({
textSize: 40, textSize: 40,
}), }),
@ -16,11 +17,13 @@ class CounterView extends ViewHolder {
text: "Click To Count", text: "Click To Count",
textSize: 20, textSize: 20,
}), }),
]).apply({ ],
{
layoutConfig: layoutConfig().most(), layoutConfig: layoutConfig().most(),
gravity: Gravity.Center, gravity: Gravity.Center,
space: 20, space: 20,
} as IVLayout).in(root) }
).in(root)
} }
} }

197
doric-demo/src/EffectsDemo.ts
View File

@ -30,18 +30,24 @@ function label(str: string) {
class EffectsDemo extends Panel { class EffectsDemo extends Panel {
build(rootView: Group) { build(rootView: Group) {
scroller( scroller(
vlayout([ vlayout(
hlayout([ [
vlayout([ hlayout(
[
vlayout(
[
label("Origin view"), label("Origin view"),
box().apply({ box().apply({
width: 100, width: 100,
height: 100 height: 100
}),]).apply({ }),],
{
gravity: Gravity.Center, gravity: Gravity.Center,
space: 10, space: 10,
} as IVLayout), }
vlayout([ ),
vlayout(
[
label("Border"), label("Border"),
box().apply({ box().apply({
width: 100, width: 100,
@ -55,11 +61,14 @@ class EffectsDemo extends Panel {
right: 5, right: 5,
bottom: 5, bottom: 5,
}) })
}),]).apply({ }),
],
{
gravity: Gravity.Center, gravity: Gravity.Center,
space: 10, space: 10,
} as IVLayout), }),
vlayout([ vlayout(
[
label("Corner"), label("Corner"),
box().apply({ box().apply({
width: 100, width: 100,
@ -68,11 +77,15 @@ class EffectsDemo extends Panel {
layoutConfig: layoutConfig().just().configMargin({ layoutConfig: layoutConfig().just().configMargin({
bottom: 10 bottom: 10
}) })
}),]).apply({ }),
],
{
gravity: Gravity.Center, gravity: Gravity.Center,
space: 10, space: 10,
} as IVLayout), }
vlayout([ ),
vlayout(
[
label("Shadow"), label("Shadow"),
box().apply({ box().apply({
width: 100, width: 100,
@ -87,13 +100,20 @@ class EffectsDemo extends Panel {
layoutConfig: layoutConfig().just().configMargin({ layoutConfig: layoutConfig().just().configMargin({
bottom: 10 bottom: 10
}) })
}),]).apply({ }),
],
{
gravity: Gravity.Center, gravity: Gravity.Center,
space: 10, space: 10,
} as IVLayout), }
]).apply({ space: 20 } as IHLayout), ),
hlayout([ ],
vlayout([ { space: 20 }
),
hlayout(
[
vlayout(
[
label("Border,Corner"), label("Border,Corner"),
box().apply({ box().apply({
width: 100, width: 100,
@ -108,11 +128,14 @@ class EffectsDemo extends Panel {
right: 5, right: 5,
bottom: 5, bottom: 5,
}) })
}),]).apply({ }),],
{
gravity: Gravity.Center, gravity: Gravity.Center,
space: 10, space: 10,
} as IVLayout), }
vlayout([ ),
vlayout(
[
label("Border,Shadow"), label("Border,Shadow"),
box().apply({ box().apply({
width: 100, width: 100,
@ -131,11 +154,13 @@ class EffectsDemo extends Panel {
layoutConfig: layoutConfig().just().configMargin({ layoutConfig: layoutConfig().just().configMargin({
bottom: 10 bottom: 10
}) })
}),]).apply({ }),],
{
gravity: Gravity.Center, gravity: Gravity.Center,
space: 10, space: 10,
} as IVLayout), }),
vlayout([ vlayout(
[
label("Corner,Shadow"), label("Corner,Shadow"),
box().apply({ box().apply({
width: 100, width: 100,
@ -151,11 +176,13 @@ class EffectsDemo extends Panel {
layoutConfig: layoutConfig().just().configMargin({ layoutConfig: layoutConfig().just().configMargin({
bottom: 10 bottom: 10
}) })
}),]).apply({ }),],
{
gravity: Gravity.Center, gravity: Gravity.Center,
space: 10, space: 10,
} as IVLayout), }),
vlayout([ vlayout(
[
label("Border,Corner,Shadow"), label("Border,Corner,Shadow"),
box().apply({ box().apply({
width: 100, width: 100,
@ -177,13 +204,20 @@ class EffectsDemo extends Panel {
right: 5, right: 5,
bottom: 5, bottom: 5,
}) })
}),]).apply({ }),
],
{
gravity: Gravity.Center, gravity: Gravity.Center,
space: 10, space: 10,
} as IVLayout), }
]).apply({ space: 20 } as IHLayout), ),
hlayout([ ],
vlayout([ { space: 20 }
),
hlayout(
[
vlayout(
[
label("Shadow"), label("Shadow"),
box().apply({ box().apply({
width: 100, width: 100,
@ -201,11 +235,14 @@ class EffectsDemo extends Panel {
right: 10, right: 10,
bottom: 10, bottom: 10,
}) })
}),]).apply({ }),],
{
gravity: Gravity.Center, gravity: Gravity.Center,
space: 10, space: 10,
} as IVLayout), }
vlayout([ ),
vlayout(
[
label("Shadow,offset"), label("Shadow,offset"),
box().apply({ box().apply({
width: 100, width: 100,
@ -223,11 +260,14 @@ class EffectsDemo extends Panel {
right: 10, right: 10,
bottom: 10, bottom: 10,
}) })
}),]).apply({ }),
],
{
gravity: Gravity.Center, gravity: Gravity.Center,
space: 10, space: 10,
} as IVLayout), }),
vlayout([ vlayout(
[
label("Shadow,opacity"), label("Shadow,opacity"),
box().apply({ box().apply({
width: 100, width: 100,
@ -245,11 +285,14 @@ class EffectsDemo extends Panel {
right: 10, right: 10,
bottom: 10, bottom: 10,
}) })
}),]).apply({ }),
],
{
gravity: Gravity.Center, gravity: Gravity.Center,
space: 10, space: 10,
} as IVLayout), }),
vlayout([ vlayout(
[
label("Shadow,color"), label("Shadow,color"),
box().apply({ box().apply({
width: 100, width: 100,
@ -267,13 +310,19 @@ class EffectsDemo extends Panel {
right: 10, right: 10,
bottom: 10, bottom: 10,
}) })
}),]).apply({ }),
],
{
gravity: Gravity.Center, gravity: Gravity.Center,
space: 10, space: 10,
} as IVLayout), }),
]).apply({ space: 20 } as IHLayout), ],
hlayout([ { space: 20 }
vlayout([ ),
hlayout(
[
vlayout(
[
label("Corner round"), label("Corner round"),
box().apply({ box().apply({
width: 100, width: 100,
@ -284,11 +333,14 @@ class EffectsDemo extends Panel {
right: 5, right: 5,
bottom: 5, bottom: 5,
}) })
}),]).apply({ }),
],
{
gravity: Gravity.Center, gravity: Gravity.Center,
space: 10, space: 10,
} as IVLayout), }),
vlayout([ vlayout(
[
label("Corner left top"), label("Corner left top"),
box().apply({ box().apply({
width: 100, width: 100,
@ -301,11 +353,14 @@ class EffectsDemo extends Panel {
right: 5, right: 5,
bottom: 5, bottom: 5,
}) })
}),]).apply({ }),
],
{
gravity: Gravity.Center, gravity: Gravity.Center,
space: 10, space: 10,
} as IVLayout), }),
vlayout([ vlayout(
[
label("Corner right top"), label("Corner right top"),
box().apply({ box().apply({
width: 100, width: 100,
@ -318,11 +373,14 @@ class EffectsDemo extends Panel {
right: 5, right: 5,
bottom: 5, bottom: 5,
}) })
}),]).apply({ }),
],
{
gravity: Gravity.Center, gravity: Gravity.Center,
space: 10, space: 10,
} as IVLayout), }),
vlayout([ vlayout(
[
label("Corner left bottom"), label("Corner left bottom"),
box().apply({ box().apply({
width: 100, width: 100,
@ -335,11 +393,14 @@ class EffectsDemo extends Panel {
right: 5, right: 5,
bottom: 5, bottom: 5,
}) })
}),]).apply({ }),
],
{
gravity: Gravity.Center, gravity: Gravity.Center,
space: 10, space: 10,
} as IVLayout), }),
vlayout([ vlayout(
[
label("Corner right bottom"), label("Corner right bottom"),
box().apply({ box().apply({
width: 100, width: 100,
@ -352,16 +413,22 @@ class EffectsDemo extends Panel {
right: 5, right: 5,
bottom: 5, bottom: 5,
}) })
}),]).apply({ }),
],
{
gravity: Gravity.Center, gravity: Gravity.Center,
space: 10, space: 10,
} as IVLayout),
]).apply({ space: 20 } as IHLayout),
]).also(it => {
it.space = 20
}), }),
).also(it => { ],
it.layoutConfig = layoutConfig().most() { space: 20 }
}).in(rootView) ),
],
{
space: 20
}),
{
layoutConfig: layoutConfig().most()
}
).in(rootView)
} }
} }

37
doric-demo/src/FlowLayoutDemo.ts
View File

@ -14,45 +14,46 @@ const imageUrls = [
] ]
@Entry @Entry
class FlowDemo extends Panel { class FlowDemo extends Panel {
build(rootView: Group): void { build(rootView: Group) {
flowlayout({ const flowView = flowlayout({
layoutConfig: layoutConfig().most(), layoutConfig: layoutConfig().most(),
itemCount: 100, itemCount: 100,
columnCount: 3, columnCount: 3,
columnSpace: 10, columnSpace: 10,
rowSpace: 10, rowSpace: 10,
renderItem: (idx) => { renderItem: (idx) => {
return flowItem(text({ return flowItem(
text({
text: `${idx}`, text: `${idx}`,
textColor: Color.WHITE, textColor: Color.WHITE,
textSize: 20, textSize: 20,
layoutConfig: layoutConfig().fit().configAlignment(Gravity.Center) layoutConfig: layoutConfig().fit().configAlignment(Gravity.Center)
})).apply({ }),
{
backgroundColor: colors[idx % colors.length], backgroundColor: colors[idx % colors.length],
height: 50 + (idx % 3) * 20, height: 50 + (idx % 3) * 20,
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST), layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
}) })
}, },
}).also(it => { loadMore: true,
it.loadMore = true onLoadMore: () => {
it.onLoadMore = () => {
setTimeout(() => { setTimeout(() => {
it.itemCount += 20 flowView.itemCount += 20
}, 1000) }, 1000)
} },
it.loadMoreView = new FlowLayoutItem().apply({ loadMoreView: flowItem(
backgroundColor: colors[500 % colors.length], text({
height: 50,
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
}).also(it => {
it.addChild(text({
text: 'load more', text: 'load more',
textColor: Color.WHITE, textColor: Color.WHITE,
textSize: 20, textSize: 20,
layoutConfig: layoutConfig().fit().configAlignment(Gravity.Center) layoutConfig: layoutConfig().fit().configAlignment(Gravity.Center)
})) }),
{
backgroundColor: colors[500 % colors.length],
height: 50,
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
}) })
}) }).in(rootView)
.in(rootView)
} }
} }

44
doric-demo/src/Gobang.ts
View File

@ -232,7 +232,8 @@ class GoBangVH extends ViewHolder {
const borderWidth = gap const borderWidth = gap
this.gap = state.gap this.gap = state.gap
scroller( scroller(
vlayout([ vlayout(
[
text({ text({
text: "五子棋", text: "五子棋",
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST), layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
@ -242,8 +243,10 @@ class GoBangVH extends ViewHolder {
textAlignment: gravity().center(), textAlignment: gravity().center(),
height: 50, height: 50,
}), }),
stack([ stack(
stack([ [
stack(
[
...(new Array(count - 2)).fill(0).map((_, idx) => { ...(new Array(count - 2)).fill(0).map((_, idx) => {
return columLine().also(v => { return columLine().also(v => {
v.left = (idx + 1) * gap v.left = (idx + 1) * gap
@ -254,8 +257,8 @@ class GoBangVH extends ViewHolder {
v.top = (idx + 1) * gap v.top = (idx + 1) * gap
}) })
}), }),
]) ],
.apply({ {
layoutConfig: layoutConfig().just() layoutConfig: layoutConfig().just()
.configMargin({ top: borderWidth, left: borderWidth }), .configMargin({ top: borderWidth, left: borderWidth }),
width: boardSize, width: boardSize,
@ -273,13 +276,14 @@ class GoBangVH extends ViewHolder {
v.left = (colum - 0.5) * gap + borderWidth v.left = (colum - 0.5) * gap + borderWidth
}) })
}), }),
]).apply({ ],
{
layoutConfig: layoutConfig().just(), layoutConfig: layoutConfig().just(),
width: boardSize + 2 * borderWidth, width: boardSize + 2 * borderWidth,
height: boardSize + 2 * borderWidth, height: boardSize + 2 * borderWidth,
backgroundColor: Color.parse("#E6B080"), backgroundColor: Color.parse("#E6B080"),
}), }
),
this.gameMode = text({ this.gameMode = text({
text: "游戏模式", text: "游戏模式",
textSize: 20, textSize: 20,
@ -288,7 +292,8 @@ class GoBangVH extends ViewHolder {
height: 50, height: 50,
backgroundColor: colors[8], backgroundColor: colors[8],
}), }),
hlayout([ hlayout(
[
this.currentRole = text({ this.currentRole = text({
text: "当前:", text: "当前:",
textSize: 20, textSize: 20,
@ -305,9 +310,10 @@ class GoBangVH extends ViewHolder {
height: 50, height: 50,
backgroundColor: colors[2], backgroundColor: colors[2],
}), }),
]).apply({ ],
{
layoutConfig: layoutConfig().fit().configWidth(LayoutSpec.MOST), layoutConfig: layoutConfig().fit().configWidth(LayoutSpec.MOST),
} as IHLayout), }),
this.assistant = text({ this.assistant = text({
text: "提示", text: "提示",
textSize: 20, textSize: 20,
@ -316,11 +322,12 @@ class GoBangVH extends ViewHolder {
height: 50, height: 50,
backgroundColor: colors[3], backgroundColor: colors[3],
}), }),
]) ],
.apply({ {
layoutConfig: layoutConfig().fit(), layoutConfig: layoutConfig().fit(),
backgroundColor: Color.parse('#ecf0f1'), backgroundColor: Color.parse('#ecf0f1'),
} as IVLayout) }
)
).in(this.root) ).in(this.root)
} }
} }
@ -375,7 +382,8 @@ class GoBangVM extends ViewModel<GoBangState, GoBangVH>{
} }
}) })
vh.gameMode.onClick = () => { vh.gameMode.onClick = () => {
popover(context).show(vlayout([ popover(context).show(vlayout(
[
...[ ...[
{ {
label: "黑方:人 白方:人", label: "黑方:人 白方:人",
@ -405,14 +413,14 @@ class GoBangVM extends ViewModel<GoBangState, GoBangVH>{
popover(context).dismiss() popover(context).dismiss()
}, },
})) }))
]) ],
.apply({ {
layoutConfig: layoutConfig().most(), layoutConfig: layoutConfig().most(),
onClick: () => { onClick: () => {
popover(context).dismiss() popover(context).dismiss()
}, },
gravity: Gravity.Center, gravity: Gravity.Center,
} as IVLayout) })
) )
} }
vh.result.onClick = () => { vh.result.onClick = () => {

13
doric-demo/src/ImageDemo.ts
View File

@ -7,7 +7,9 @@ const imageUrl = 'https://img.zcool.cn/community/01e75b5da933daa801209e1ffa4649.
class ImageDemo extends Panel { class ImageDemo extends Panel {
build(rootView: Group): void { build(rootView: Group): void {
let imageView: Image let imageView: Image
scroller(vlayout([ scroller(
vlayout(
[
text({ text({
text: "Image Demo", text: "Image Demo",
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST), layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
@ -99,12 +101,15 @@ class ImageDemo extends Panel {
scaleType: ScaleType.ScaleAspectFill, scaleType: ScaleType.ScaleAspectFill,
layoutConfig: layoutConfig().just(), layoutConfig: layoutConfig().just(),
}), }),
]).apply({ ],
{
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT), layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
gravity: gravity().center(), gravity: gravity().center(),
space: 10, space: 10,
} as IVLayout)).apply({ }),
{
layoutConfig: layoutConfig().most(), layoutConfig: layoutConfig().most(),
}).in(rootView) }
).in(rootView)
} }
} }

20
doric-demo/src/InputDemo.ts
View File

@ -4,7 +4,8 @@ import { title, colors } from "./utils";
class InputDemo extends Panel { class InputDemo extends Panel {
build(root: Group) { build(root: Group) {
scroller( scroller(
vlayout([ vlayout(
[
title("Input Demo"), title("Input Demo"),
(new Input).also(it => { (new Input).also(it => {
it.layoutConfig = layoutConfig().just().configHeight(LayoutSpec.FIT) it.layoutConfig = layoutConfig().just().configHeight(LayoutSpec.FIT)
@ -33,15 +34,16 @@ class InputDemo extends Panel {
} }
it.backgroundColor = colors[1].alpha(0.3) it.backgroundColor = colors[1].alpha(0.3)
}), }),
]) ],
.also(it => { {
it.space = 10 space: 10,
it.layoutConfig = layoutConfig().most().configHeight(LayoutSpec.FIT) layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT)
})) }
.apply({ ),
{
layoutConfig: layoutConfig().most() layoutConfig: layoutConfig().most()
}) }
.in(root) ).in(root)
} }
} }

181
doric-demo/src/LayoutDemo.ts
View File

@ -1,5 +1,5 @@
import { Group, Panel, Text, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, slider, slideItem, scroller, IVLayout, IHLayout, layoutConfig } from "doric"; import { Group, Panel, text, gravity, Color, LayoutSpec, vlayout, hlayout, scroller, IVLayout, IHLayout, layoutConfig, stack, Gravity } from "doric";
const colors = [ const colors = [
"#f0932b", "#f0932b",
@ -11,33 +11,43 @@ const colors = [
] ]
function box(idx = 0) { function box(idx = 0) {
return (new Stack).also(it => { return stack([], {
it.width = it.height = 20 width: 20,
it.backgroundColor = Color.parse(colors[idx || 0]) height: 20,
layoutConfig: layoutConfig().just(),
backgroundColor: Color.parse(colors[idx || 0])
}) })
} }
function boxStr(str: string, idx = 0) { function boxStr(str: string, idx = 0) {
return (new Text).also(it => { return text({
it.width = it.height = 20 width: 20,
it.text = str height: 20,
it.textColor = Color.parse('#ffffff') text: str,
it.backgroundColor = Color.parse(colors[idx || 0]) textColor: Color.WHITE,
layoutConfig: layoutConfig().just(),
backgroundColor: Color.parse(colors[idx || 0])
}) })
} }
function label(str: string) { function label(str: string) {
return text({ return text({
text: str, text: str,
textSize: 16, textSize: 16,
}) })
} }
@Entry @Entry
class LayoutDemo extends Panel { class LayoutDemo extends Panel {
build(rootView: Group) { build(rootView: Group) {
scroller( scroller(
hlayout([ hlayout(
vlayout([ [
vlayout(
[
label("Horizontal Layout(Align to Top)"), label("Horizontal Layout(Align to Top)"),
hlayout([ hlayout(
[
box().apply({ box().apply({
height: 20 height: 20
}), }),
@ -53,11 +63,14 @@ class LayoutDemo extends Panel {
box().apply({ box().apply({
height: 20 height: 20
}), }),
]).also(it => { ],
it.space = 20 {
}), space: 20
}
),
label("Horizontal Layout(Align to Bottom)"), label("Horizontal Layout(Align to Bottom)"),
hlayout([ hlayout(
[
box().apply({ box().apply({
height: 20 height: 20
}), }),
@ -73,12 +86,14 @@ class LayoutDemo extends Panel {
box().apply({ box().apply({
height: 20 height: 20
}), }),
]).also(it => { ],
it.space = 20 {
it.gravity = gravity().bottom() space: 20,
gravity: Gravity.Bottom
}), }),
label("Horizontal Layout(Align to Center)"), label("Horizontal Layout(Align to Center)"),
hlayout([ hlayout(
[
box().apply({ box().apply({
height: 20 height: 20
}), }),
@ -94,10 +109,12 @@ class LayoutDemo extends Panel {
box().apply({ box().apply({
height: 20 height: 20
}), }),
]).also(it => { ],
it.space = 20 {
it.gravity = gravity().center() space: 20,
}), gravity: Gravity.Center
}
),
label("Horizontal Layout(Weight)"), label("Horizontal Layout(Weight)"),
hlayout( hlayout(
[ [
@ -167,7 +184,8 @@ class LayoutDemo extends Panel {
gravity: gravity().center(), gravity: gravity().center(),
} }
), ),
hlayout([ hlayout(
[
boxStr('weight=1', 3).apply({ boxStr('weight=1', 3).apply({
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.JUST, widthSpec: LayoutSpec.JUST,
@ -195,7 +213,8 @@ class LayoutDemo extends Panel {
gravity: gravity().center(), gravity: gravity().center(),
} }
), ),
hlayout([ hlayout(
[
boxStr('weight=1', 3).apply({ boxStr('weight=1', 3).apply({
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.JUST, widthSpec: LayoutSpec.JUST,
@ -217,7 +236,8 @@ class LayoutDemo extends Panel {
weight: 1, weight: 1,
} }
}), }),
]).apply({ ],
{
width: 200, width: 200,
height: 30, height: 30,
layoutConfig: { layoutConfig: {
@ -226,14 +246,18 @@ class LayoutDemo extends Panel {
}, },
backgroundColor: Color.parse('#eeeeee'), backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(), gravity: gravity().center(),
} as IHLayout),
]).also(it => {
it.space = 20
it.gravity = gravity().center()
}), }),
vlayout([ ],
{
space: 20,
gravity: Gravity.Center
}
),
vlayout(
[
label("Vertical Layout(Algin to Left)"), label("Vertical Layout(Algin to Left)"),
vlayout([ vlayout(
[
box(1).apply({ box(1).apply({
width: 20 width: 20
}), }),
@ -249,11 +273,13 @@ class LayoutDemo extends Panel {
box(1).apply({ box(1).apply({
width: 20 width: 20
}), }),
]).apply({ ],
{
space: 20 space: 20
} as IVLayout), }),
label("Vertical Layout(Algin to Right)"), label("Vertical Layout(Algin to Right)"),
vlayout([ vlayout(
[
box(1).apply({ box(1).apply({
width: 20 width: 20
}), }),
@ -269,12 +295,14 @@ class LayoutDemo extends Panel {
box(1).apply({ box(1).apply({
width: 20 width: 20
}), }),
]).apply({ ],
{
space: 20, space: 20,
gravity: gravity().right(), gravity: gravity().right(),
} as IVLayout), }),
label("Vertical Layout(Algin to Center)"), label("Vertical Layout(Algin to Center)"),
vlayout([ vlayout(
[
box(1).apply({ box(1).apply({
width: 20 width: 20
}), }),
@ -290,14 +318,16 @@ class LayoutDemo extends Panel {
box(1).apply({ box(1).apply({
width: 20 width: 20
}), }),
]).apply({ ],
{
space: 20, space: 20,
gravity: gravity().center(), gravity: gravity().center(),
} as IVLayout), }),
label("Vertical Layout(Weight)"), label("Vertical Layout(Weight)"),
hlayout([ hlayout(
[
vlayout([ vlayout(
[
boxStr('weight=1', 3).apply({ boxStr('weight=1', 3).apply({
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.MOST, widthSpec: LayoutSpec.MOST,
@ -317,7 +347,8 @@ class LayoutDemo extends Panel {
heightSpec: LayoutSpec.JUST, heightSpec: LayoutSpec.JUST,
} }
}), }),
]).apply({ ],
{
width: 100, width: 100,
height: 200, height: 200,
layoutConfig: { layoutConfig: {
@ -326,8 +357,9 @@ class LayoutDemo extends Panel {
}, },
backgroundColor: Color.parse('#eeeeee'), backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(), gravity: gravity().center(),
} as IVLayout), }),
vlayout([ vlayout(
[
box(3).apply({ box(3).apply({
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.MOST, widthSpec: LayoutSpec.MOST,
@ -347,7 +379,8 @@ class LayoutDemo extends Panel {
heightSpec: LayoutSpec.JUST, heightSpec: LayoutSpec.JUST,
} }
}), }),
]).apply({ ],
{
width: 100, width: 100,
height: 200, height: 200,
layoutConfig: { layoutConfig: {
@ -356,8 +389,9 @@ class LayoutDemo extends Panel {
}, },
backgroundColor: Color.parse('#eeeeee'), backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(), gravity: gravity().center(),
} as IVLayout), }),
vlayout([ vlayout(
[
box(3).apply({ box(3).apply({
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.MOST, widthSpec: LayoutSpec.MOST,
@ -377,7 +411,8 @@ class LayoutDemo extends Panel {
weight: 1, weight: 1,
} }
}), }),
]).apply({ ],
{
width: 100, width: 100,
height: 200, height: 200,
layoutConfig: { layoutConfig: {
@ -386,8 +421,9 @@ class LayoutDemo extends Panel {
}, },
backgroundColor: Color.parse('#eeeeee'), backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(), gravity: gravity().center(),
} as IVLayout), }),
vlayout([ vlayout(
[
boxStr('weight=1', 3).apply({ boxStr('weight=1', 3).apply({
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.MOST, widthSpec: LayoutSpec.MOST,
@ -408,7 +444,8 @@ class LayoutDemo extends Panel {
heightSpec: LayoutSpec.JUST, heightSpec: LayoutSpec.JUST,
} }
}), }),
]).apply({ ],
{
width: 100, width: 100,
height: 200, height: 200,
layoutConfig: { layoutConfig: {
@ -417,8 +454,9 @@ class LayoutDemo extends Panel {
}, },
backgroundColor: Color.parse('#eeeeee'), backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(), gravity: gravity().center(),
} as IVLayout), }),
vlayout([ vlayout(
[
boxStr('weight=1', 3).apply({ boxStr('weight=1', 3).apply({
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.MOST, widthSpec: LayoutSpec.MOST,
@ -440,7 +478,8 @@ class LayoutDemo extends Panel {
weight: 1, weight: 1,
} }
}), }),
]).apply({ ],
{
width: 100, width: 100,
height: 200, height: 200,
layoutConfig: { layoutConfig: {
@ -449,21 +488,23 @@ class LayoutDemo extends Panel {
}, },
backgroundColor: Color.parse('#eeeeee'), backgroundColor: Color.parse('#eeeeee'),
gravity: gravity().center(), gravity: gravity().center(),
} as IVLayout),
]).also(it => {
it.space = 20
}), }),
],
]).also(it => { {
it.space = 20 space: 20
it.gravity = gravity().left()
})
]).also(it => {
it.space = 20
}), }),
).also(it => { ],
it.layoutConfig = layoutConfig().most() {
space: 20,
gravity: Gravity.Left
}) })
.in(rootView) ],
{
space: 20
}),
{
layoutConfig: layoutConfig().most()
}
).in(rootView)
} }
} }

13
doric-demo/src/ListDemo.ts
View File

@ -5,7 +5,8 @@ class ListPanel extends Panel {
build(rootView: Group): void { build(rootView: Group): void {
let refreshView: Refreshable let refreshView: Refreshable
let offset = Math.ceil(Math.random() * colors.length) let offset = Math.ceil(Math.random() * colors.length)
vlayout([ vlayout(
[
text({ text({
text: "ListDemo", text: "ListDemo",
layoutConfig: { layoutConfig: {
@ -113,12 +114,10 @@ class ListPanel extends Panel {
}), }),
}), }),
]).also(it => { ],
it.layoutConfig = { {
widthSpec: LayoutSpec.MOST, layoutConfig: layoutConfig().most(),
heightSpec: LayoutSpec.MOST, backgroundColor: Color.WHITE
}
it.backgroundColor = Color.WHITE
}).in(rootView) }).in(rootView)
refreshView.backgroundColor = Color.YELLOW refreshView.backgroundColor = Color.YELLOW
} }

14
doric-demo/src/ModalDemo.ts
View File

@ -4,7 +4,9 @@ import { colors, label } from "./utils";
@Entry @Entry
class ModalDemo extends Panel { class ModalDemo extends Panel {
build(rootView: Group): void { build(rootView: Group): void {
scroller(vlayout([ scroller(
vlayout(
[
text({ text({
text: "Modal", text: "Modal",
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST), layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
@ -139,12 +141,16 @@ class ModalDemo extends Panel {
}) })
} }
} as IText), } as IText),
]).apply({ ],
{
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT), layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
gravity: Gravity.Center, gravity: Gravity.Center,
space: 10, space: 10,
} as IVLayout)).apply({ }
),
{
layoutConfig: layoutConfig().most(), layoutConfig: layoutConfig().most(),
}).in(rootView) }
).in(rootView)
} }
} }

21
doric-demo/src/ScrollerDemo.ts
View File

@ -7,28 +7,29 @@ class ScrollerPanel extends Panel {
scroller( scroller(
vlayout([ vlayout([
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({ {
layoutConfig: layoutConfig().just(), layoutConfig: layoutConfig().just(),
width: 300, width: 300,
height: 500, height: 500,
backgroundColor: Color.RED, backgroundColor: Color.RED,
}), }
),
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({ {
layoutConfig: layoutConfig().just(), layoutConfig: layoutConfig().just(),
width: 300, width: 300,
height: 500, height: 500,
backgroundColor: Color.BLUE, backgroundColor: Color.BLUE,
}) }
])
) )
.apply({ ]),
{
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.JUST), layoutConfig: layoutConfig().most().configHeight(LayoutSpec.JUST),
height: 500, height: 500,
backgroundColor: Color.YELLOW, backgroundColor: Color.YELLOW,
}) }
.in(rootView) ).in(rootView)
} }
} }

2
doric-demo/src/Snake.ts
View File

@ -1,4 +1,4 @@
import { text, loge, log, ViewHolder, Stack, ViewModel, Gravity, Text, Color, HLayout, VLayout, Group, VMPanel, LayoutSpec, vlayout, hlayout, takeNonNull, stack } from "doric"; import { text, loge, log, ViewHolder, Stack, ViewModel, Gravity, Text, Color, Group, VMPanel, LayoutSpec, vlayout, hlayout, takeNonNull } from "doric";
type SnakeNode = { type SnakeNode = {
x: number x: number

7
doric-js/bundle/doric-lib.js
View File

@ -1453,9 +1453,14 @@ function slideItem(item, config) {
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
function scroller(content) { function scroller(content, config) {
return (new Scroller).also(v => { return (new Scroller).also(v => {
v.layoutConfig = layoutConfig().fit(); v.layoutConfig = layoutConfig().fit();
if (config) {
for (let key in config) {
Reflect.set(v, key, Reflect.get(config, key, config), v);
}
}
v.content = content; v.content = content;
}); });
} }

7
doric-js/bundle/doric-vm.js
View File

@ -2901,9 +2901,14 @@ function slideItem(item, config) {
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
function scroller(content) { function scroller(content, config) {
return (new Scroller).also(v => { return (new Scroller).also(v => {
v.layoutConfig = layoutConfig().fit(); v.layoutConfig = layoutConfig().fit();
if (config) {
for (let key in config) {
Reflect.set(v, key, Reflect.get(config, key, config), v);
}
}
v.content = content; v.content = content;
}); });
} }

10
doric-js/index.d.ts vendored
View File

@ -486,6 +486,9 @@ declare module 'doric/lib/src/widget/list' {
renderItem: (index: number) => ListItem; renderItem: (index: number) => ListItem;
itemCount: number; itemCount: number;
batchCount?: number; batchCount?: number;
onLoadMore?: () => void;
loadMore?: boolean;
loadMoreView?: ListItem;
} }
export class List extends Superview implements IList { export class List extends Superview implements IList {
allSubviews(): IterableIterator<ListItem> | ListItem[]; allSubviews(): IterableIterator<ListItem> | ListItem[];
@ -538,9 +541,9 @@ declare module 'doric/lib/src/widget/slider' {
declare module 'doric/lib/src/widget/scroller' { declare module 'doric/lib/src/widget/scroller' {
import { Superview, View, IView, NativeViewModel } from 'doric/lib/src/ui/view'; import { Superview, View, IView, NativeViewModel } from 'doric/lib/src/ui/view';
export function scroller(content: View): Scroller; export function scroller(content: View, config?: IScroller): Scroller;
export interface IScroller extends IView { export interface IScroller extends IView {
content: View; content?: View;
} }
export class Scroller extends Superview implements IScroller { export class Scroller extends Superview implements IScroller {
content: View; content: View;
@ -598,6 +601,9 @@ declare module 'doric/lib/src/widget/flowlayout' {
columnCount?: number; columnCount?: number;
columnSpace?: number; columnSpace?: number;
rowSpace?: number; rowSpace?: number;
loadMore?: boolean;
onLoadMore?: () => void;
loadMoreView?: FlowLayoutItem;
} }
export class FlowLayout extends Superview implements IFlowLayout { export class FlowLayout extends Superview implements IFlowLayout {
allSubviews(): IterableIterator<FlowLayoutItem> | FlowLayoutItem[]; allSubviews(): IterableIterator<FlowLayoutItem> | FlowLayoutItem[];

3
doric-js/lib/src/widget/flowlayout.d.ts vendored
View File

@ -16,6 +16,9 @@ export interface IFlowLayout extends IView {
columnCount?: number; columnCount?: number;
columnSpace?: number; columnSpace?: number;
rowSpace?: number; rowSpace?: number;
loadMore?: boolean;
onLoadMore?: () => void;
loadMoreView?: FlowLayoutItem;
} }
export declare class FlowLayout extends Superview implements IFlowLayout { export declare class FlowLayout extends Superview implements IFlowLayout {
private cachedViews; private cachedViews;

3
doric-js/lib/src/widget/list.d.ts vendored
View File

@ -13,6 +13,9 @@ export interface IList extends IView {
renderItem: (index: number) => ListItem; renderItem: (index: number) => ListItem;
itemCount: number; itemCount: number;
batchCount?: number; batchCount?: number;
onLoadMore?: () => void;
loadMore?: boolean;
loadMoreView?: ListItem;
} }
export declare class List extends Superview implements IList { export declare class List extends Superview implements IList {
private cachedViews; private cachedViews;

4
doric-js/lib/src/widget/scroller.d.ts vendored
View File

@ -1,7 +1,7 @@
import { Superview, View, IView, NativeViewModel } from '../ui/view'; import { Superview, View, IView, NativeViewModel } from '../ui/view';
export declare function scroller(content: View): Scroller; export declare function scroller(content: View, config?: IScroller): Scroller;
export interface IScroller extends IView { export interface IScroller extends IView {
content: View; content?: View;
} }
export declare class Scroller extends Superview implements IScroller { export declare class Scroller extends Superview implements IScroller {
content: View; content: View;

7
doric-js/lib/src/widget/scroller.js
View File

@ -15,9 +15,14 @@
*/ */
import { Superview } from '../ui/view'; import { Superview } from '../ui/view';
import { layoutConfig } from '../util/layoutconfig'; import { layoutConfig } from '../util/layoutconfig';
export function scroller(content) { export function scroller(content, config) {
return (new Scroller).also(v => { return (new Scroller).also(v => {
v.layoutConfig = layoutConfig().fit(); v.layoutConfig = layoutConfig().fit();
if (config) {
for (let key in config) {
Reflect.set(v, key, Reflect.get(config, key, config), v);
}
}
v.content = content; v.content = content;
}); });
} }

4
doric-js/package.json
View File

@ -6,10 +6,10 @@
"types": "index.d.ts", "types": "index.d.ts",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1", "test": "echo \"Error: no test specified\" && exit 1",
"build": "tsc -d -p .&& rollup -c", "build": "tsc -d -p .&& rollup -c && dts-bundle --configJson dts-bundle.json",
"dev": "tsc -w -p . & rollup -c -w", "dev": "tsc -w -p . & rollup -c -w",
"clean": "rm -rf build && rm -rf bundle", "clean": "rm -rf build && rm -rf bundle",
"prepublish": "npm run build && dts-bundle --configJson dts-bundle.json" "prepublish": "npm run build"
}, },
"repository": { "repository": {
"type": "https", "type": "https",

6
doric-js/src/widget/flowlayout.ts
View File

@ -42,6 +42,12 @@ export interface IFlowLayout extends IView {
columnSpace?: number columnSpace?: number
rowSpace?: number rowSpace?: number
loadMore?: boolean
onLoadMore?: () => void
loadMoreView?: FlowLayoutItem
} }
export class FlowLayout extends Superview implements IFlowLayout { export class FlowLayout extends Superview implements IFlowLayout {

3
doric-js/src/widget/list.ts
View File

@ -34,6 +34,9 @@ export interface IList extends IView {
renderItem: (index: number) => ListItem renderItem: (index: number) => ListItem
itemCount: number itemCount: number
batchCount?: number batchCount?: number
onLoadMore?: () => void
loadMore?: boolean
loadMoreView?: ListItem
} }
export class List extends Superview implements IList { export class List extends Superview implements IList {

9
doric-js/src/widget/scroller.ts
View File

@ -16,15 +16,20 @@
import { Superview, View, IView, NativeViewModel } from '../ui/view' import { Superview, View, IView, NativeViewModel } from '../ui/view'
import { layoutConfig } from '../util/layoutconfig' import { layoutConfig } from '../util/layoutconfig'
export function scroller(content: View) { export function scroller(content: View, config?: IScroller) {
return (new Scroller).also(v => { return (new Scroller).also(v => {
v.layoutConfig = layoutConfig().fit() v.layoutConfig = layoutConfig().fit()
if (config) {
for (let key in config) {
Reflect.set(v, key, Reflect.get(config, key, config), v)
}
}
v.content = content v.content = content
}) })
} }
export interface IScroller extends IView { export interface IScroller extends IView {
content: View content?: View
} }
export class Scroller extends Superview implements IScroller { export class Scroller extends Superview implements IScroller {