demo:optimize demo code

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

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

View File

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

View File

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

View File

@ -7,28 +7,29 @@ class ScrollerPanel extends Panel {
scroller(
vlayout([
scroller(
vlayout(new Array(100).fill(1).map(e => label('Scroll Content')))
).apply({
vlayout(new Array(100).fill(1).map(e => label('Scroll Content'))),
{
layoutConfig: layoutConfig().just(),
width: 300,
height: 500,
backgroundColor: Color.RED,
}),
}
),
scroller(
vlayout(new Array(100).fill(1).map(e => label('Scroll Content')))
).apply({
vlayout(new Array(100).fill(1).map(e => label('Scroll Content'))),
{
layoutConfig: layoutConfig().just(),
width: 300,
height: 500,
backgroundColor: Color.BLUE,
})
])
}
)
.apply({
]),
{
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.JUST),
height: 500,
backgroundColor: Color.YELLOW,
})
.in(rootView)
}
).in(rootView)
}
}

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 = {
x: number

View File

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

View File

@ -2901,9 +2901,14 @@ function slideItem(item, config) {
* See the License for the specific language governing permissions and
* limitations under the License.
*/
function scroller(content) {
function scroller(content, config) {
return (new Scroller).also(v => {
v.layoutConfig = layoutConfig().fit();
if (config) {
for (let key in config) {
Reflect.set(v, key, Reflect.get(config, key, config), v);
}
}
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;
itemCount: number;
batchCount?: number;
onLoadMore?: () => void;
loadMore?: boolean;
loadMoreView?: ListItem;
}
export class List extends Superview implements IList {
allSubviews(): IterableIterator<ListItem> | ListItem[];
@ -538,9 +541,9 @@ declare module 'doric/lib/src/widget/slider' {
declare module 'doric/lib/src/widget/scroller' {
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 {
content: View;
content?: View;
}
export class Scroller extends Superview implements IScroller {
content: View;
@ -598,6 +601,9 @@ declare module 'doric/lib/src/widget/flowlayout' {
columnCount?: number;
columnSpace?: number;
rowSpace?: number;
loadMore?: boolean;
onLoadMore?: () => void;
loadMoreView?: FlowLayoutItem;
}
export class FlowLayout extends Superview implements IFlowLayout {
allSubviews(): IterableIterator<FlowLayoutItem> | FlowLayoutItem[];

View File

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

View File

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

View File

@ -1,7 +1,7 @@
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 {
content: View;
content?: View;
}
export declare class Scroller extends Superview implements IScroller {
content: View;

View File

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

View File

@ -6,10 +6,10 @@
"types": "index.d.ts",
"scripts": {
"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",
"clean": "rm -rf build && rm -rf bundle",
"prepublish": "npm run build && dts-bundle --configJson dts-bundle.json"
"prepublish": "npm run build"
},
"repository": {
"type": "https",

View File

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

View File

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

View File

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