demo:optimize demo code
This commit is contained in:
pengfei.zhou
osborn
parent
3b82935b24
commit
05b5c69080
@ -22,164 +22,177 @@ class AnimatorDemo extends Panel {
|
||||
}
|
||||
const view2 = box(3)
|
||||
let idx = 0
|
||||
vlayout([
|
||||
title("Animator Demo"),
|
||||
vlayout(
|
||||
[
|
||||
hlayout([
|
||||
thisLabel('Reset').apply({
|
||||
onClick: () => {
|
||||
animate(context)({
|
||||
animations: () => {
|
||||
view.width = view.height = 20
|
||||
view.x = view.y = 0
|
||||
view.rotation = 0
|
||||
view.backgroundColor = colors[2]
|
||||
view.corners = 0
|
||||
view.scaleX = 1
|
||||
view.scaleY = 1
|
||||
view.translationX = 0
|
||||
view.translationY = 0
|
||||
view.rotation = 0
|
||||
},
|
||||
duration: 1500,
|
||||
}).then(() => {
|
||||
modal(context).toast('Fininshed')
|
||||
}).catch(e => {
|
||||
modal(context).toast(`${e}`)
|
||||
})
|
||||
}
|
||||
}),
|
||||
]).apply({ space: 10 } as IHLayout),
|
||||
hlayout([
|
||||
thisLabel('X').apply({
|
||||
onClick: () => {
|
||||
animate(context)({
|
||||
animations: () => {
|
||||
view.x = view.x || 0
|
||||
view.x += 100
|
||||
view2.x += 50
|
||||
},
|
||||
duration: 1000,
|
||||
})
|
||||
}
|
||||
}),
|
||||
thisLabel('Y').apply({
|
||||
onClick: () => {
|
||||
animate(context)({
|
||||
animations: () => {
|
||||
view.y = view.y || 0
|
||||
view.y += 100
|
||||
view2.y += 50
|
||||
},
|
||||
duration: 1000,
|
||||
})
|
||||
}
|
||||
}),
|
||||
thisLabel('Width').apply({
|
||||
onClick: () => {
|
||||
animate(context)({
|
||||
animations: () => {
|
||||
view.width += 100
|
||||
},
|
||||
duration: 1000,
|
||||
})
|
||||
}
|
||||
}),
|
||||
thisLabel('Height').apply({
|
||||
onClick: () => {
|
||||
animate(context)({
|
||||
animations: () => {
|
||||
view.height += 100
|
||||
},
|
||||
duration: 1000,
|
||||
})
|
||||
}
|
||||
}),
|
||||
]).apply({ space: 10 } as IHLayout),
|
||||
hlayout([
|
||||
thisLabel('BgColor').apply({
|
||||
onClick: () => {
|
||||
animate(context)({
|
||||
animations: () => {
|
||||
view.backgroundColor = colors[(idx++) % colors.length]
|
||||
},
|
||||
duration: 1000,
|
||||
});
|
||||
}
|
||||
}),
|
||||
thisLabel('Rotation').apply({
|
||||
onClick: () => {
|
||||
animate(context)({
|
||||
animations: () => {
|
||||
if (view.rotation) {
|
||||
view.rotation += 0.5
|
||||
} else {
|
||||
view.rotation = 0.5
|
||||
}
|
||||
},
|
||||
duration: 1000,
|
||||
});
|
||||
}
|
||||
}),
|
||||
thisLabel('Corner').apply({
|
||||
onClick: () => {
|
||||
animate(context)({
|
||||
animations: () => {
|
||||
if (typeof view.corners === 'number') {
|
||||
view.corners += 10
|
||||
} else {
|
||||
view.corners = 10
|
||||
}
|
||||
},
|
||||
duration: 1000,
|
||||
});
|
||||
}
|
||||
}),
|
||||
]).apply({ space: 10 } as IHLayout),
|
||||
vlayout(
|
||||
[
|
||||
title("Animator Demo"),
|
||||
vlayout(
|
||||
[
|
||||
hlayout(
|
||||
[thisLabel('Reset').apply({
|
||||
onClick: () => {
|
||||
animate(context)({
|
||||
animations: () => {
|
||||
view.width = view.height = 20
|
||||
view.x = view.y = 0
|
||||
view.rotation = 0
|
||||
view.backgroundColor = colors[2]
|
||||
view.corners = 0
|
||||
view.scaleX = 1
|
||||
view.scaleY = 1
|
||||
view.translationX = 0
|
||||
view.translationY = 0
|
||||
view.rotation = 0
|
||||
},
|
||||
duration: 1500,
|
||||
}).then(() => {
|
||||
modal(context).toast('Fininshed')
|
||||
}).catch(e => {
|
||||
modal(context).toast(`${e}`)
|
||||
})
|
||||
}
|
||||
}),],
|
||||
{ space: 10 }
|
||||
),
|
||||
hlayout(
|
||||
[
|
||||
thisLabel('X').apply({
|
||||
onClick: () => {
|
||||
animate(context)({
|
||||
animations: () => {
|
||||
view.x = view.x || 0
|
||||
view.x += 100
|
||||
view2.x += 50
|
||||
},
|
||||
duration: 1000,
|
||||
})
|
||||
}
|
||||
}),
|
||||
thisLabel('Y').apply({
|
||||
onClick: () => {
|
||||
animate(context)({
|
||||
animations: () => {
|
||||
view.y = view.y || 0
|
||||
view.y += 100
|
||||
view2.y += 50
|
||||
},
|
||||
duration: 1000,
|
||||
})
|
||||
}
|
||||
}),
|
||||
thisLabel('Width').apply({
|
||||
onClick: () => {
|
||||
animate(context)({
|
||||
animations: () => {
|
||||
view.width += 100
|
||||
},
|
||||
duration: 1000,
|
||||
})
|
||||
}
|
||||
}),
|
||||
thisLabel('Height').apply({
|
||||
onClick: () => {
|
||||
animate(context)({
|
||||
animations: () => {
|
||||
view.height += 100
|
||||
},
|
||||
duration: 1000,
|
||||
})
|
||||
}
|
||||
}),
|
||||
],
|
||||
{ space: 10 }
|
||||
),
|
||||
hlayout(
|
||||
[
|
||||
thisLabel('BgColor').apply({
|
||||
onClick: () => {
|
||||
animate(context)({
|
||||
animations: () => {
|
||||
view.backgroundColor = colors[(idx++) % colors.length]
|
||||
},
|
||||
duration: 1000,
|
||||
});
|
||||
}
|
||||
}),
|
||||
thisLabel('Rotation').apply({
|
||||
onClick: () => {
|
||||
animate(context)({
|
||||
animations: () => {
|
||||
if (view.rotation) {
|
||||
view.rotation += 0.5
|
||||
} else {
|
||||
view.rotation = 0.5
|
||||
}
|
||||
},
|
||||
duration: 1000,
|
||||
});
|
||||
}
|
||||
}),
|
||||
thisLabel('Corner').apply({
|
||||
onClick: () => {
|
||||
animate(context)({
|
||||
animations: () => {
|
||||
if (typeof view.corners === 'number') {
|
||||
view.corners += 10
|
||||
} else {
|
||||
view.corners = 10
|
||||
}
|
||||
},
|
||||
duration: 1000,
|
||||
});
|
||||
}
|
||||
}),
|
||||
],
|
||||
{ space: 10 }
|
||||
),
|
||||
|
||||
hlayout([
|
||||
thisLabel('scaleX').apply({
|
||||
onClick: () => {
|
||||
animate(context)({
|
||||
animations: () => {
|
||||
if (view.scaleX) {
|
||||
view.scaleX += 0.1
|
||||
} else {
|
||||
view.scaleX = 1.1
|
||||
}
|
||||
},
|
||||
duration: 1000,
|
||||
});
|
||||
}
|
||||
}),
|
||||
thisLabel('scaleY').apply({
|
||||
onClick: () => {
|
||||
animate(context)({
|
||||
animations: () => {
|
||||
if (view.scaleY) {
|
||||
view.scaleY += 0.1
|
||||
} else {
|
||||
view.scaleY = 1.1
|
||||
}
|
||||
},
|
||||
duration: 1000,
|
||||
});
|
||||
}
|
||||
}),
|
||||
]).apply({ space: 10 } as IHLayout),
|
||||
]
|
||||
).apply({ space: 10 } as IVLayout),
|
||||
stack([
|
||||
view,
|
||||
]).apply({
|
||||
hlayout([
|
||||
thisLabel('scaleX').apply({
|
||||
onClick: () => {
|
||||
animate(context)({
|
||||
animations: () => {
|
||||
if (view.scaleX) {
|
||||
view.scaleX += 0.1
|
||||
} else {
|
||||
view.scaleX = 1.1
|
||||
}
|
||||
},
|
||||
duration: 1000,
|
||||
});
|
||||
}
|
||||
}),
|
||||
thisLabel('scaleY').apply({
|
||||
onClick: () => {
|
||||
animate(context)({
|
||||
animations: () => {
|
||||
if (view.scaleY) {
|
||||
view.scaleY += 0.1
|
||||
} else {
|
||||
view.scaleY = 1.1
|
||||
}
|
||||
},
|
||||
duration: 1000,
|
||||
});
|
||||
}
|
||||
}),
|
||||
]).apply({ space: 10 } as IHLayout),
|
||||
],
|
||||
{ space: 10 }
|
||||
),
|
||||
stack(
|
||||
[
|
||||
view,
|
||||
],
|
||||
{
|
||||
layoutConfig: layoutConfig().most(),
|
||||
backgroundColor: colors[1].alpha(0.3 * 255),
|
||||
}),
|
||||
],
|
||||
{
|
||||
layoutConfig: layoutConfig().most(),
|
||||
backgroundColor: colors[1].alpha(0.3 * 255),
|
||||
}),
|
||||
]).apply({
|
||||
layoutConfig: layoutConfig().most(),
|
||||
gravity: gravity().center(),
|
||||
space: 10,
|
||||
} as IVLayout).in(rootView)
|
||||
gravity: gravity().center(),
|
||||
space: 10,
|
||||
}
|
||||
).in(rootView)
|
||||
}
|
||||
}
|
||||
@ -21,182 +21,201 @@ class AnimationDemo extends Panel {
|
||||
view.onClick = () => {
|
||||
modal(context).toast('Clicked')
|
||||
}
|
||||
vlayout([
|
||||
title("Complicated Animation"),
|
||||
vlayout(
|
||||
[
|
||||
hlayout([
|
||||
thisLabel('reset').apply({
|
||||
onClick: () => {
|
||||
const rotation = new RotationAnimation
|
||||
rotation.duration = 1000
|
||||
rotation.fromRotation = view.rotation || 0
|
||||
rotation.toRotation = 0
|
||||
const translation = new TranslationAnimation
|
||||
translation.duration = 1000
|
||||
translation.fromTranslationX = view.translationX || 0
|
||||
translation.toTranslationX = 0
|
||||
translation.fromTranslationY = view.translationY || 0
|
||||
translation.toTranslationY = 0
|
||||
const scale = new ScaleAnimation
|
||||
scale.duration = 1000
|
||||
scale.fromScaleX = view.scaleX || 1
|
||||
scale.toScaleX = 1
|
||||
scale.fromScaleY = view.scaleY || 1
|
||||
scale.toScaleY = 1
|
||||
const animationSet = new AnimationSet
|
||||
animationSet.addAnimation(rotation)
|
||||
animationSet.addAnimation(translation)
|
||||
animationSet.addAnimation(scale)
|
||||
view.doAnimation(context, animationSet).then(() => {
|
||||
modal(context).toast('Resetd')
|
||||
})
|
||||
}
|
||||
vlayout(
|
||||
[
|
||||
title("Complicated Animation"),
|
||||
vlayout(
|
||||
[
|
||||
hlayout(
|
||||
[
|
||||
thisLabel('reset').apply({
|
||||
onClick: () => {
|
||||
const rotation = new RotationAnimation
|
||||
rotation.duration = 1000
|
||||
rotation.fromRotation = view.rotation || 0
|
||||
rotation.toRotation = 0
|
||||
const translation = new TranslationAnimation
|
||||
translation.duration = 1000
|
||||
translation.fromTranslationX = view.translationX || 0
|
||||
translation.toTranslationX = 0
|
||||
translation.fromTranslationY = view.translationY || 0
|
||||
translation.toTranslationY = 0
|
||||
const scale = new ScaleAnimation
|
||||
scale.duration = 1000
|
||||
scale.fromScaleX = view.scaleX || 1
|
||||
scale.toScaleX = 1
|
||||
scale.fromScaleY = view.scaleY || 1
|
||||
scale.toScaleY = 1
|
||||
const animationSet = new AnimationSet
|
||||
animationSet.addAnimation(rotation)
|
||||
animationSet.addAnimation(translation)
|
||||
animationSet.addAnimation(scale)
|
||||
view.doAnimation(context, animationSet).then(() => {
|
||||
modal(context).toast('Resetd')
|
||||
})
|
||||
}
|
||||
}),
|
||||
],
|
||||
{ space: 10 }
|
||||
),
|
||||
hlayout(
|
||||
[
|
||||
thisLabel('TranslationX').apply({
|
||||
onClick: () => {
|
||||
const animation = new TranslationAnimation
|
||||
animation.duration = 1000
|
||||
animation.fromTranslationX = view.translationX || 0
|
||||
animation.toTranslationX = animation.fromTranslationX + 100
|
||||
animation.fromTranslationY = view.translationY || 0
|
||||
animation.toTranslationY = view.translationY || 0
|
||||
view.doAnimation(context, animation)
|
||||
}
|
||||
}),
|
||||
thisLabel('TranslationY').apply({
|
||||
onClick: () => {
|
||||
const animation = new TranslationAnimation
|
||||
animation.duration = 1000
|
||||
animation.fromTranslationX = view.translationX || 0
|
||||
animation.toTranslationX = view.translationX || 0
|
||||
animation.fromTranslationY = view.translationY || 0
|
||||
animation.toTranslationY = animation.fromTranslationY + 100
|
||||
view.doAnimation(context, animation)
|
||||
}
|
||||
}),
|
||||
thisLabel('ScaleX').apply({
|
||||
onClick: () => {
|
||||
const animation = new ScaleAnimation
|
||||
animation.duration = 1000
|
||||
animation.fromScaleX = view.scaleX || 1
|
||||
animation.toScaleX = animation.fromScaleX + 1
|
||||
view.doAnimation(context, animation)
|
||||
}
|
||||
}),
|
||||
thisLabel('ScaleY').apply({
|
||||
onClick: () => {
|
||||
const animation = new ScaleAnimation
|
||||
animation.duration = 1000
|
||||
animation.fromScaleY = view.scaleY || 1
|
||||
animation.toScaleY = animation.fromScaleY + 1
|
||||
view.doAnimation(context, animation)
|
||||
}
|
||||
}),
|
||||
thisLabel('rotation').apply({
|
||||
onClick: () => {
|
||||
const animation = new RotationAnimation
|
||||
animation.duration = 1000
|
||||
animation.fromRotation = view.rotation || 0
|
||||
animation.toRotation = animation.fromRotation + 0.25
|
||||
view.doAnimation(context, animation)
|
||||
}
|
||||
}),
|
||||
],
|
||||
{ space: 10 }
|
||||
),
|
||||
hlayout(
|
||||
[
|
||||
thisLabel('group').apply({
|
||||
onClick: () => {
|
||||
const rotation = new RotationAnimation
|
||||
rotation.duration = 1000
|
||||
rotation.fromRotation = 0
|
||||
rotation.toRotation = 4
|
||||
const translation = new TranslationAnimation
|
||||
translation.duration = 1000
|
||||
translation.fromTranslationX = view.translationX || 0
|
||||
translation.toTranslationX = 100
|
||||
const animationSet = new AnimationSet
|
||||
animationSet.addAnimation(rotation)
|
||||
animationSet.addAnimation(translation)
|
||||
view.doAnimation(context, animationSet)
|
||||
}
|
||||
}),
|
||||
],
|
||||
{ space: 10 }
|
||||
),
|
||||
hlayout(
|
||||
[
|
||||
thisLabel('Default').apply({
|
||||
onClick: () => {
|
||||
const translation = new TranslationAnimation
|
||||
translation.duration = 3000
|
||||
translation.fromTranslationX = 0
|
||||
translation.toTranslationX = 300
|
||||
translation.timingFunction = TimingFunction.Default
|
||||
view.doAnimation(context, translation)
|
||||
}
|
||||
}),
|
||||
thisLabel('Linear').apply({
|
||||
onClick: () => {
|
||||
const translation = new TranslationAnimation
|
||||
translation.duration = 3000
|
||||
translation.fromTranslationX = 0
|
||||
translation.toTranslationX = 300
|
||||
translation.timingFunction = TimingFunction.Linear
|
||||
view.doAnimation(context, translation)
|
||||
}
|
||||
}),
|
||||
thisLabel('EaseIn').apply({
|
||||
onClick: () => {
|
||||
const translation = new TranslationAnimation
|
||||
translation.duration = 3000
|
||||
translation.fromTranslationX = 0
|
||||
translation.toTranslationX = 300
|
||||
translation.timingFunction = TimingFunction.EaseIn
|
||||
view.doAnimation(context, translation)
|
||||
}
|
||||
}),
|
||||
thisLabel('EaseOut').apply({
|
||||
onClick: () => {
|
||||
const translation = new TranslationAnimation
|
||||
translation.duration = 3000
|
||||
translation.fromTranslationX = 0
|
||||
translation.toTranslationX = 300
|
||||
translation.timingFunction = TimingFunction.EaseOut
|
||||
view.doAnimation(context, translation)
|
||||
}
|
||||
}),
|
||||
thisLabel('EaseInEaseOut').apply({
|
||||
onClick: () => {
|
||||
const translation = new TranslationAnimation
|
||||
translation.duration = 3000
|
||||
translation.fromTranslationX = 0
|
||||
translation.toTranslationX = 300
|
||||
translation.timingFunction = TimingFunction.EaseInEaseOut
|
||||
view.doAnimation(context, translation)
|
||||
}
|
||||
}),
|
||||
],
|
||||
{ space: 10 }
|
||||
),
|
||||
],
|
||||
{ space: 10 }
|
||||
),
|
||||
stack(
|
||||
[
|
||||
view.also(v => {
|
||||
v.x = 20
|
||||
v.y = 0
|
||||
v.width = 30
|
||||
v.left = 15
|
||||
}),
|
||||
]).apply({ space: 10 } as IHLayout),
|
||||
hlayout([
|
||||
thisLabel('TranslationX').apply({
|
||||
onClick: () => {
|
||||
const animation = new TranslationAnimation
|
||||
animation.duration = 1000
|
||||
animation.fromTranslationX = view.translationX || 0
|
||||
animation.toTranslationX = animation.fromTranslationX + 100
|
||||
animation.fromTranslationY = view.translationY || 0
|
||||
animation.toTranslationY = view.translationY || 0
|
||||
view.doAnimation(context, animation)
|
||||
}
|
||||
}),
|
||||
thisLabel('TranslationY').apply({
|
||||
onClick: () => {
|
||||
const animation = new TranslationAnimation
|
||||
animation.duration = 1000
|
||||
animation.fromTranslationX = view.translationX || 0
|
||||
animation.toTranslationX = view.translationX || 0
|
||||
animation.fromTranslationY = view.translationY || 0
|
||||
animation.toTranslationY = animation.fromTranslationY + 100
|
||||
view.doAnimation(context, animation)
|
||||
}
|
||||
}),
|
||||
thisLabel('ScaleX').apply({
|
||||
onClick: () => {
|
||||
const animation = new ScaleAnimation
|
||||
animation.duration = 1000
|
||||
animation.fromScaleX = view.scaleX || 1
|
||||
animation.toScaleX = animation.fromScaleX + 1
|
||||
view.doAnimation(context, animation)
|
||||
}
|
||||
}),
|
||||
thisLabel('ScaleY').apply({
|
||||
onClick: () => {
|
||||
const animation = new ScaleAnimation
|
||||
animation.duration = 1000
|
||||
animation.fromScaleY = view.scaleY || 1
|
||||
animation.toScaleY = animation.fromScaleY + 1
|
||||
view.doAnimation(context, animation)
|
||||
}
|
||||
}),
|
||||
thisLabel('rotation').apply({
|
||||
onClick: () => {
|
||||
const animation = new RotationAnimation
|
||||
animation.duration = 1000
|
||||
animation.fromRotation = view.rotation || 0
|
||||
animation.toRotation = animation.fromRotation + 0.25
|
||||
view.doAnimation(context, animation)
|
||||
}
|
||||
}),
|
||||
]).apply({ space: 10 } as IHLayout),
|
||||
hlayout([
|
||||
thisLabel('group').apply({
|
||||
onClick: () => {
|
||||
const rotation = new RotationAnimation
|
||||
rotation.duration = 1000
|
||||
rotation.fromRotation = 0
|
||||
rotation.toRotation = 4
|
||||
const translation = new TranslationAnimation
|
||||
translation.duration = 1000
|
||||
translation.fromTranslationX = view.translationX || 0
|
||||
translation.toTranslationX = 100
|
||||
const animationSet = new AnimationSet
|
||||
animationSet.addAnimation(rotation)
|
||||
animationSet.addAnimation(translation)
|
||||
view.doAnimation(context, animationSet)
|
||||
}
|
||||
}),
|
||||
]).apply({ space: 10 } as IHLayout),
|
||||
hlayout([
|
||||
thisLabel('Default').apply({
|
||||
onClick: () => {
|
||||
const translation = new TranslationAnimation
|
||||
translation.duration = 3000
|
||||
translation.fromTranslationX = 0
|
||||
translation.toTranslationX = 300
|
||||
translation.timingFunction = TimingFunction.Default
|
||||
view.doAnimation(context, translation)
|
||||
}
|
||||
}),
|
||||
thisLabel('Linear').apply({
|
||||
onClick: () => {
|
||||
const translation = new TranslationAnimation
|
||||
translation.duration = 3000
|
||||
translation.fromTranslationX = 0
|
||||
translation.toTranslationX = 300
|
||||
translation.timingFunction = TimingFunction.Linear
|
||||
view.doAnimation(context, translation)
|
||||
}
|
||||
}),
|
||||
thisLabel('EaseIn').apply({
|
||||
onClick: () => {
|
||||
const translation = new TranslationAnimation
|
||||
translation.duration = 3000
|
||||
translation.fromTranslationX = 0
|
||||
translation.toTranslationX = 300
|
||||
translation.timingFunction = TimingFunction.EaseIn
|
||||
view.doAnimation(context, translation)
|
||||
}
|
||||
}),
|
||||
thisLabel('EaseOut').apply({
|
||||
onClick: () => {
|
||||
const translation = new TranslationAnimation
|
||||
translation.duration = 3000
|
||||
translation.fromTranslationX = 0
|
||||
translation.toTranslationX = 300
|
||||
translation.timingFunction = TimingFunction.EaseOut
|
||||
view.doAnimation(context, translation)
|
||||
}
|
||||
}),
|
||||
thisLabel('EaseInEaseOut').apply({
|
||||
onClick: () => {
|
||||
const translation = new TranslationAnimation
|
||||
translation.duration = 3000
|
||||
translation.fromTranslationX = 0
|
||||
translation.toTranslationX = 300
|
||||
translation.timingFunction = TimingFunction.EaseInEaseOut
|
||||
view.doAnimation(context, translation)
|
||||
}
|
||||
}),
|
||||
]).apply({ space: 10 } as IHLayout),
|
||||
]
|
||||
).apply({ space: 10 } as IVLayout),
|
||||
stack([
|
||||
view.also(v => {
|
||||
v.x = 20
|
||||
v.y = 0
|
||||
v.width = 30
|
||||
v.left = 15
|
||||
}),
|
||||
view2.also(v => {
|
||||
v.x = v.y = 20
|
||||
v.y = 40
|
||||
v.scaleX = 1.5
|
||||
})
|
||||
]).apply({
|
||||
view2.also(v => {
|
||||
v.x = v.y = 20
|
||||
v.y = 40
|
||||
v.scaleX = 1.5
|
||||
})
|
||||
],
|
||||
{
|
||||
layoutConfig: layoutConfig().most(),
|
||||
backgroundColor: colors[1].alpha(0.3 * 255),
|
||||
}
|
||||
),
|
||||
],
|
||||
{
|
||||
layoutConfig: layoutConfig().most(),
|
||||
backgroundColor: colors[1].alpha(0.3 * 255),
|
||||
}),
|
||||
]).apply({
|
||||
layoutConfig: layoutConfig().most(),
|
||||
gravity: gravity().center(),
|
||||
space: 10,
|
||||
} as IVLayout).in(rootView)
|
||||
gravity: gravity().center(),
|
||||
space: 10,
|
||||
}
|
||||
).in(rootView)
|
||||
}
|
||||
}
|
||||
@ -39,9 +39,7 @@ class MyDemo extends Panel {
|
||||
backgroundColor: colors[idx % colors.length],
|
||||
}))
|
||||
}
|
||||
}).apply({
|
||||
}),
|
||||
}).apply({
|
||||
layoutConfig: layoutConfig().most(),
|
||||
}).also(v => {
|
||||
v.top = 200
|
||||
|
||||
@ -7,20 +7,23 @@ class CounterView extends ViewHolder {
|
||||
number!: Text
|
||||
counter!: Text
|
||||
build(root: Group) {
|
||||
vlayout([
|
||||
this.number = text({
|
||||
textSize: 40,
|
||||
}),
|
||||
vlayout(
|
||||
[
|
||||
this.number = text({
|
||||
textSize: 40,
|
||||
}),
|
||||
|
||||
this.counter = text({
|
||||
text: "Click To Count",
|
||||
textSize: 20,
|
||||
}),
|
||||
]).apply({
|
||||
layoutConfig: layoutConfig().most(),
|
||||
gravity: Gravity.Center,
|
||||
space: 20,
|
||||
} as IVLayout).in(root)
|
||||
this.counter = text({
|
||||
text: "Click To Count",
|
||||
textSize: 20,
|
||||
}),
|
||||
],
|
||||
{
|
||||
layoutConfig: layoutConfig().most(),
|
||||
gravity: Gravity.Center,
|
||||
space: 20,
|
||||
}
|
||||
).in(root)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -30,338 +30,405 @@ function label(str: string) {
|
||||
class EffectsDemo extends Panel {
|
||||
build(rootView: Group) {
|
||||
scroller(
|
||||
vlayout([
|
||||
hlayout([
|
||||
vlayout([
|
||||
label("Origin view"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100
|
||||
}),]).apply({
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
} as IVLayout),
|
||||
vlayout([
|
||||
label("Border"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
border: {
|
||||
width: 5,
|
||||
color: colors[3]
|
||||
},
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),]).apply({
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
} as IVLayout),
|
||||
vlayout([
|
||||
label("Corner"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: 10,
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
bottom: 10
|
||||
})
|
||||
}),]).apply({
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
} as IVLayout),
|
||||
vlayout([
|
||||
label("Shadow"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
shadow: {
|
||||
opacity: 1,
|
||||
color: colors[1],
|
||||
offsetX: 3,
|
||||
offsetY: 3,
|
||||
radius: 5,
|
||||
},
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
bottom: 10
|
||||
})
|
||||
}),]).apply({
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
} as IVLayout),
|
||||
]).apply({ space: 20 } as IHLayout),
|
||||
hlayout([
|
||||
vlayout([
|
||||
label("Border,Corner"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
border: {
|
||||
width: 5,
|
||||
color: colors[3]
|
||||
},
|
||||
corners: 10,
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),]).apply({
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
} as IVLayout),
|
||||
vlayout([
|
||||
label("Border,Shadow"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
border: {
|
||||
width: 5,
|
||||
color: colors[3]
|
||||
},
|
||||
shadow: {
|
||||
opacity: 1,
|
||||
color: colors[1],
|
||||
offsetX: 3,
|
||||
offsetY: 3,
|
||||
radius: 5,
|
||||
},
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
bottom: 10
|
||||
})
|
||||
}),]).apply({
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
} as IVLayout),
|
||||
vlayout([
|
||||
label("Corner,Shadow"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: 10,
|
||||
shadow: {
|
||||
opacity: 1,
|
||||
color: colors[1],
|
||||
offsetX: 3,
|
||||
offsetY: 3,
|
||||
radius: 5,
|
||||
},
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
bottom: 10
|
||||
})
|
||||
}),]).apply({
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
} as IVLayout),
|
||||
vlayout([
|
||||
label("Border,Corner,Shadow"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
border: {
|
||||
width: 5,
|
||||
color: colors[3]
|
||||
},
|
||||
corners: 10,
|
||||
shadow: {
|
||||
opacity: 1,
|
||||
color: colors[1],
|
||||
offsetX: 3,
|
||||
offsetY: 3,
|
||||
radius: 5,
|
||||
},
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),]).apply({
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
} as IVLayout),
|
||||
]).apply({ space: 20 } as IHLayout),
|
||||
hlayout([
|
||||
vlayout([
|
||||
label("Shadow"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: 50,
|
||||
shadow: {
|
||||
opacity: 1,
|
||||
color: colors[1],
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
radius: 10,
|
||||
},
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 10,
|
||||
})
|
||||
}),]).apply({
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
} as IVLayout),
|
||||
vlayout([
|
||||
label("Shadow,offset"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: 50,
|
||||
shadow: {
|
||||
opacity: 1,
|
||||
color: colors[1],
|
||||
offsetX: 5,
|
||||
offsetY: 5,
|
||||
radius: 5,
|
||||
},
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 10,
|
||||
})
|
||||
}),]).apply({
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
} as IVLayout),
|
||||
vlayout([
|
||||
label("Shadow,opacity"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: 50,
|
||||
shadow: {
|
||||
opacity: 0.5,
|
||||
color: colors[1],
|
||||
offsetX: 5,
|
||||
offsetY: 5,
|
||||
radius: 5,
|
||||
},
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 10,
|
||||
})
|
||||
}),]).apply({
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
} as IVLayout),
|
||||
vlayout([
|
||||
label("Shadow,color"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: 50,
|
||||
shadow: {
|
||||
opacity: 1,
|
||||
color: colors[2],
|
||||
offsetX: 5,
|
||||
offsetY: 5,
|
||||
radius: 5,
|
||||
},
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 10,
|
||||
})
|
||||
}),]).apply({
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
} as IVLayout),
|
||||
]).apply({ space: 20 } as IHLayout),
|
||||
hlayout([
|
||||
vlayout([
|
||||
label("Corner round"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: 50,
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),]).apply({
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
} as IVLayout),
|
||||
vlayout([
|
||||
label("Corner left top"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: {
|
||||
leftTop: 50,
|
||||
},
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),]).apply({
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
} as IVLayout),
|
||||
vlayout([
|
||||
label("Corner right top"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: {
|
||||
rightTop: 50,
|
||||
},
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),]).apply({
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
} as IVLayout),
|
||||
vlayout([
|
||||
label("Corner left bottom"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: {
|
||||
leftBottom: 50,
|
||||
},
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),]).apply({
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
} as IVLayout),
|
||||
vlayout([
|
||||
label("Corner right bottom"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: {
|
||||
rightBottom: 50,
|
||||
},
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
left: 5,
|
||||
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)
|
||||
vlayout(
|
||||
[
|
||||
hlayout(
|
||||
[
|
||||
vlayout(
|
||||
[
|
||||
label("Origin view"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100
|
||||
}),],
|
||||
{
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
}
|
||||
),
|
||||
vlayout(
|
||||
[
|
||||
label("Border"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
border: {
|
||||
width: 5,
|
||||
color: colors[3]
|
||||
},
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),
|
||||
],
|
||||
{
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
vlayout(
|
||||
[
|
||||
label("Corner"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: 10,
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
bottom: 10
|
||||
})
|
||||
}),
|
||||
],
|
||||
{
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
}
|
||||
),
|
||||
vlayout(
|
||||
[
|
||||
label("Shadow"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
shadow: {
|
||||
opacity: 1,
|
||||
color: colors[1],
|
||||
offsetX: 3,
|
||||
offsetY: 3,
|
||||
radius: 5,
|
||||
},
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
bottom: 10
|
||||
})
|
||||
}),
|
||||
],
|
||||
{
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
}
|
||||
),
|
||||
],
|
||||
{ space: 20 }
|
||||
),
|
||||
hlayout(
|
||||
[
|
||||
vlayout(
|
||||
[
|
||||
label("Border,Corner"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
border: {
|
||||
width: 5,
|
||||
color: colors[3]
|
||||
},
|
||||
corners: 10,
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),],
|
||||
{
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
}
|
||||
),
|
||||
vlayout(
|
||||
[
|
||||
label("Border,Shadow"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
border: {
|
||||
width: 5,
|
||||
color: colors[3]
|
||||
},
|
||||
shadow: {
|
||||
opacity: 1,
|
||||
color: colors[1],
|
||||
offsetX: 3,
|
||||
offsetY: 3,
|
||||
radius: 5,
|
||||
},
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
bottom: 10
|
||||
})
|
||||
}),],
|
||||
{
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
vlayout(
|
||||
[
|
||||
label("Corner,Shadow"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: 10,
|
||||
shadow: {
|
||||
opacity: 1,
|
||||
color: colors[1],
|
||||
offsetX: 3,
|
||||
offsetY: 3,
|
||||
radius: 5,
|
||||
},
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
bottom: 10
|
||||
})
|
||||
}),],
|
||||
{
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
vlayout(
|
||||
[
|
||||
label("Border,Corner,Shadow"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
border: {
|
||||
width: 5,
|
||||
color: colors[3]
|
||||
},
|
||||
corners: 10,
|
||||
shadow: {
|
||||
opacity: 1,
|
||||
color: colors[1],
|
||||
offsetX: 3,
|
||||
offsetY: 3,
|
||||
radius: 5,
|
||||
},
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),
|
||||
],
|
||||
{
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
}
|
||||
),
|
||||
],
|
||||
{ space: 20 }
|
||||
),
|
||||
hlayout(
|
||||
[
|
||||
vlayout(
|
||||
[
|
||||
label("Shadow"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: 50,
|
||||
shadow: {
|
||||
opacity: 1,
|
||||
color: colors[1],
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
radius: 10,
|
||||
},
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 10,
|
||||
})
|
||||
}),],
|
||||
{
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
}
|
||||
),
|
||||
vlayout(
|
||||
[
|
||||
label("Shadow,offset"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: 50,
|
||||
shadow: {
|
||||
opacity: 1,
|
||||
color: colors[1],
|
||||
offsetX: 5,
|
||||
offsetY: 5,
|
||||
radius: 5,
|
||||
},
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 10,
|
||||
})
|
||||
}),
|
||||
],
|
||||
{
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
vlayout(
|
||||
[
|
||||
label("Shadow,opacity"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: 50,
|
||||
shadow: {
|
||||
opacity: 0.5,
|
||||
color: colors[1],
|
||||
offsetX: 5,
|
||||
offsetY: 5,
|
||||
radius: 5,
|
||||
},
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 10,
|
||||
})
|
||||
}),
|
||||
],
|
||||
{
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
vlayout(
|
||||
[
|
||||
label("Shadow,color"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: 50,
|
||||
shadow: {
|
||||
opacity: 1,
|
||||
color: colors[2],
|
||||
offsetX: 5,
|
||||
offsetY: 5,
|
||||
radius: 5,
|
||||
},
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 10,
|
||||
})
|
||||
}),
|
||||
],
|
||||
{
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
],
|
||||
{ space: 20 }
|
||||
),
|
||||
hlayout(
|
||||
[
|
||||
vlayout(
|
||||
[
|
||||
label("Corner round"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: 50,
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),
|
||||
],
|
||||
{
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
vlayout(
|
||||
[
|
||||
label("Corner left top"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: {
|
||||
leftTop: 50,
|
||||
},
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),
|
||||
],
|
||||
{
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
vlayout(
|
||||
[
|
||||
label("Corner right top"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: {
|
||||
rightTop: 50,
|
||||
},
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),
|
||||
],
|
||||
{
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
vlayout(
|
||||
[
|
||||
label("Corner left bottom"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: {
|
||||
leftBottom: 50,
|
||||
},
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),
|
||||
],
|
||||
{
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
vlayout(
|
||||
[
|
||||
label("Corner right bottom"),
|
||||
box().apply({
|
||||
width: 100,
|
||||
height: 100,
|
||||
corners: {
|
||||
rightBottom: 50,
|
||||
},
|
||||
layoutConfig: layoutConfig().just().configMargin({
|
||||
left: 5,
|
||||
right: 5,
|
||||
bottom: 5,
|
||||
})
|
||||
}),
|
||||
],
|
||||
{
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
}),
|
||||
],
|
||||
{ space: 20 }
|
||||
),
|
||||
],
|
||||
{
|
||||
space: 20
|
||||
}),
|
||||
{
|
||||
layoutConfig: layoutConfig().most()
|
||||
}
|
||||
).in(rootView)
|
||||
}
|
||||
}
|
||||
@ -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({
|
||||
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),
|
||||
})
|
||||
return flowItem(
|
||||
text({
|
||||
text: `${idx}`,
|
||||
textColor: Color.WHITE,
|
||||
textSize: 20,
|
||||
layoutConfig: layoutConfig().fit().configAlignment(Gravity.Center)
|
||||
}),
|
||||
{
|
||||
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)
|
||||
}))
|
||||
})
|
||||
})
|
||||
.in(rootView)
|
||||
}),
|
||||
{
|
||||
backgroundColor: colors[500 % colors.length],
|
||||
height: 50,
|
||||
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
|
||||
})
|
||||
}).in(rootView)
|
||||
|
||||
}
|
||||
}
|
||||
@ -232,95 +232,102 @@ class GoBangVH extends ViewHolder {
|
||||
const borderWidth = gap
|
||||
this.gap = state.gap
|
||||
scroller(
|
||||
vlayout([
|
||||
text({
|
||||
text: "五子棋",
|
||||
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
backgroundColor: colors[0],
|
||||
textAlignment: gravity().center(),
|
||||
height: 50,
|
||||
}),
|
||||
stack([
|
||||
stack([
|
||||
...(new Array(count - 2)).fill(0).map((_, idx) => {
|
||||
return columLine().also(v => {
|
||||
v.left = (idx + 1) * gap
|
||||
})
|
||||
}),
|
||||
...(new Array(count - 2)).fill(0).map((_, idx) => {
|
||||
return rowLine().also(v => {
|
||||
v.top = (idx + 1) * gap
|
||||
})
|
||||
}),
|
||||
])
|
||||
.apply({
|
||||
layoutConfig: layoutConfig().just()
|
||||
.configMargin({ top: borderWidth, left: borderWidth }),
|
||||
width: boardSize,
|
||||
height: boardSize,
|
||||
border: {
|
||||
width: 1,
|
||||
color: lineColor,
|
||||
},
|
||||
}),
|
||||
...this.targetZone = (new Array(count * count)).fill(0).map((_, idx) => {
|
||||
const row = Math.floor(idx / count)
|
||||
const colum = idx % count
|
||||
return pointer(gap).also(v => {
|
||||
v.top = (row - 0.5) * gap + borderWidth
|
||||
v.left = (colum - 0.5) * gap + borderWidth
|
||||
})
|
||||
vlayout(
|
||||
[
|
||||
text({
|
||||
text: "五子棋",
|
||||
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
backgroundColor: colors[0],
|
||||
textAlignment: gravity().center(),
|
||||
height: 50,
|
||||
}),
|
||||
]).apply({
|
||||
layoutConfig: layoutConfig().just(),
|
||||
width: boardSize + 2 * borderWidth,
|
||||
height: boardSize + 2 * borderWidth,
|
||||
backgroundColor: Color.parse("#E6B080"),
|
||||
}),
|
||||
|
||||
this.gameMode = text({
|
||||
text: "游戏模式",
|
||||
textSize: 20,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.JUST),
|
||||
height: 50,
|
||||
backgroundColor: colors[8],
|
||||
}),
|
||||
hlayout([
|
||||
this.currentRole = text({
|
||||
text: "当前:",
|
||||
stack(
|
||||
[
|
||||
stack(
|
||||
[
|
||||
...(new Array(count - 2)).fill(0).map((_, idx) => {
|
||||
return columLine().also(v => {
|
||||
v.left = (idx + 1) * gap
|
||||
})
|
||||
}),
|
||||
...(new Array(count - 2)).fill(0).map((_, idx) => {
|
||||
return rowLine().also(v => {
|
||||
v.top = (idx + 1) * gap
|
||||
})
|
||||
}),
|
||||
],
|
||||
{
|
||||
layoutConfig: layoutConfig().just()
|
||||
.configMargin({ top: borderWidth, left: borderWidth }),
|
||||
width: boardSize,
|
||||
height: boardSize,
|
||||
border: {
|
||||
width: 1,
|
||||
color: lineColor,
|
||||
},
|
||||
}),
|
||||
...this.targetZone = (new Array(count * count)).fill(0).map((_, idx) => {
|
||||
const row = Math.floor(idx / count)
|
||||
const colum = idx % count
|
||||
return pointer(gap).also(v => {
|
||||
v.top = (row - 0.5) * gap + borderWidth
|
||||
v.left = (colum - 0.5) * gap + borderWidth
|
||||
})
|
||||
}),
|
||||
],
|
||||
{
|
||||
layoutConfig: layoutConfig().just(),
|
||||
width: boardSize + 2 * borderWidth,
|
||||
height: boardSize + 2 * borderWidth,
|
||||
backgroundColor: Color.parse("#E6B080"),
|
||||
}
|
||||
),
|
||||
this.gameMode = text({
|
||||
text: "游戏模式",
|
||||
textSize: 20,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().just().configWeight(1),
|
||||
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.JUST),
|
||||
height: 50,
|
||||
backgroundColor: colors[1],
|
||||
backgroundColor: colors[8],
|
||||
}),
|
||||
this.result = text({
|
||||
text: "获胜方:",
|
||||
hlayout(
|
||||
[
|
||||
this.currentRole = text({
|
||||
text: "当前:",
|
||||
textSize: 20,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().just().configWeight(1),
|
||||
height: 50,
|
||||
backgroundColor: colors[1],
|
||||
}),
|
||||
this.result = text({
|
||||
text: "获胜方:",
|
||||
textSize: 20,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().just().configWeight(1),
|
||||
height: 50,
|
||||
backgroundColor: colors[2],
|
||||
}),
|
||||
],
|
||||
{
|
||||
layoutConfig: layoutConfig().fit().configWidth(LayoutSpec.MOST),
|
||||
}),
|
||||
this.assistant = text({
|
||||
text: "提示",
|
||||
textSize: 20,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().just().configWeight(1),
|
||||
layoutConfig: layoutConfig().just().configWidth(LayoutSpec.MOST),
|
||||
height: 50,
|
||||
backgroundColor: colors[2],
|
||||
backgroundColor: colors[3],
|
||||
}),
|
||||
]).apply({
|
||||
layoutConfig: layoutConfig().fit().configWidth(LayoutSpec.MOST),
|
||||
} as IHLayout),
|
||||
this.assistant = text({
|
||||
text: "提示",
|
||||
textSize: 20,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().just().configWidth(LayoutSpec.MOST),
|
||||
height: 50,
|
||||
backgroundColor: colors[3],
|
||||
}),
|
||||
])
|
||||
.apply({
|
||||
],
|
||||
{
|
||||
layoutConfig: layoutConfig().fit(),
|
||||
backgroundColor: Color.parse('#ecf0f1'),
|
||||
} as IVLayout)
|
||||
}
|
||||
)
|
||||
).in(this.root)
|
||||
}
|
||||
}
|
||||
@ -375,44 +382,45 @@ class GoBangVM extends ViewModel<GoBangState, GoBangVH>{
|
||||
}
|
||||
})
|
||||
vh.gameMode.onClick = () => {
|
||||
popover(context).show(vlayout([
|
||||
...[
|
||||
{
|
||||
label: "黑方:人 白方:人",
|
||||
mode: GameMode.P2P,
|
||||
},
|
||||
{
|
||||
label: "黑方:人 白方:机",
|
||||
mode: GameMode.P2C,
|
||||
},
|
||||
{
|
||||
label: "黑方:机 白方:人",
|
||||
mode: GameMode.C2P,
|
||||
},
|
||||
].map((e) => text({
|
||||
text: e.label,
|
||||
textSize: 20,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().just(),
|
||||
height: 50,
|
||||
width: 300,
|
||||
backgroundColor: (state.gameMode === e.mode) ? Color.parse('#636e72') : Color.parse('#b2bec3'),
|
||||
onClick: () => {
|
||||
this.updateState(s => {
|
||||
s.gameMode = e.mode
|
||||
this.reset(s)
|
||||
})
|
||||
popover(context).dismiss()
|
||||
},
|
||||
}))
|
||||
])
|
||||
.apply({
|
||||
popover(context).show(vlayout(
|
||||
[
|
||||
...[
|
||||
{
|
||||
label: "黑方:人 白方:人",
|
||||
mode: GameMode.P2P,
|
||||
},
|
||||
{
|
||||
label: "黑方:人 白方:机",
|
||||
mode: GameMode.P2C,
|
||||
},
|
||||
{
|
||||
label: "黑方:机 白方:人",
|
||||
mode: GameMode.C2P,
|
||||
},
|
||||
].map((e) => text({
|
||||
text: e.label,
|
||||
textSize: 20,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().just(),
|
||||
height: 50,
|
||||
width: 300,
|
||||
backgroundColor: (state.gameMode === e.mode) ? Color.parse('#636e72') : Color.parse('#b2bec3'),
|
||||
onClick: () => {
|
||||
this.updateState(s => {
|
||||
s.gameMode = e.mode
|
||||
this.reset(s)
|
||||
})
|
||||
popover(context).dismiss()
|
||||
},
|
||||
}))
|
||||
],
|
||||
{
|
||||
layoutConfig: layoutConfig().most(),
|
||||
onClick: () => {
|
||||
popover(context).dismiss()
|
||||
},
|
||||
gravity: Gravity.Center,
|
||||
} as IVLayout)
|
||||
})
|
||||
)
|
||||
}
|
||||
vh.result.onClick = () => {
|
||||
|
||||
@ -7,104 +7,109 @@ const imageUrl = 'https://img.zcool.cn/community/01e75b5da933daa801209e1ffa4649.
|
||||
class ImageDemo extends Panel {
|
||||
build(rootView: Group): void {
|
||||
let imageView: Image
|
||||
scroller(vlayout([
|
||||
text({
|
||||
text: "Image Demo",
|
||||
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
backgroundColor: colors[5],
|
||||
textAlignment: gravity().center(),
|
||||
height: 50,
|
||||
}),
|
||||
label('Gif'),
|
||||
image({
|
||||
imageUrl: "https://misc.aotu.io/ONE-SUNDAY/world-cup_2014_42.gif",
|
||||
scaleType: ScaleType.ScaleToFill,
|
||||
loadCallback: function (ret) {
|
||||
log('this')
|
||||
log('loadCallback', ret)
|
||||
}
|
||||
}),
|
||||
label('APNG'),
|
||||
image({
|
||||
imageUrl: "https://misc.aotu.io/ONE-SUNDAY/world_cup_2014_42.png",
|
||||
loadCallback: (ret) => {
|
||||
}
|
||||
}),
|
||||
label('Animated WebP'),
|
||||
image({
|
||||
imageUrl: "https://p.upyun.com/demo/webp/webp/animated-gif-0.webp",
|
||||
loadCallback: (ret) => {
|
||||
}
|
||||
}),
|
||||
label('WebP'),
|
||||
imageView = image({
|
||||
imageUrl: "https://p.upyun.com/demo/webp/webp/jpg-0.webp",
|
||||
loadCallback: (ret) => {
|
||||
if (ret) {
|
||||
imageView.width = ret.width
|
||||
imageView.height = ret.height
|
||||
}
|
||||
}
|
||||
}),
|
||||
label('ScaleToFill'),
|
||||
image({
|
||||
imageUrl,
|
||||
width: 300,
|
||||
height: 300,
|
||||
isBlur: true,
|
||||
border: {
|
||||
width: 2,
|
||||
color: Color.GRAY,
|
||||
},
|
||||
scaleType: ScaleType.ScaleToFill,
|
||||
layoutConfig: layoutConfig().just(),
|
||||
loadCallback: (ret) => {
|
||||
}
|
||||
}),
|
||||
label('ScaleAspectFit'),
|
||||
image({
|
||||
imageUrl,
|
||||
width: 300,
|
||||
height: 300,
|
||||
border: {
|
||||
width: 2,
|
||||
color: Color.GRAY,
|
||||
},
|
||||
scaleType: ScaleType.ScaleAspectFit,
|
||||
layoutConfig: layoutConfig().just(),
|
||||
}),
|
||||
label('ScaleAspectFill'),
|
||||
image({
|
||||
imageUrl,
|
||||
width: 300,
|
||||
height: 300,
|
||||
border: {
|
||||
width: 2,
|
||||
color: Color.GRAY,
|
||||
},
|
||||
scaleType: ScaleType.ScaleAspectFill,
|
||||
layoutConfig: layoutConfig().just(),
|
||||
}),
|
||||
label('ImageBase64'),
|
||||
image({
|
||||
imageBase64: img_base64,
|
||||
width: 300,
|
||||
height: 300,
|
||||
border: {
|
||||
width: 2,
|
||||
color: Color.GRAY,
|
||||
},
|
||||
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)
|
||||
scroller(
|
||||
vlayout(
|
||||
[
|
||||
text({
|
||||
text: "Image Demo",
|
||||
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
backgroundColor: colors[5],
|
||||
textAlignment: gravity().center(),
|
||||
height: 50,
|
||||
}),
|
||||
label('Gif'),
|
||||
image({
|
||||
imageUrl: "https://misc.aotu.io/ONE-SUNDAY/world-cup_2014_42.gif",
|
||||
scaleType: ScaleType.ScaleToFill,
|
||||
loadCallback: function (ret) {
|
||||
log('this')
|
||||
log('loadCallback', ret)
|
||||
}
|
||||
}),
|
||||
label('APNG'),
|
||||
image({
|
||||
imageUrl: "https://misc.aotu.io/ONE-SUNDAY/world_cup_2014_42.png",
|
||||
loadCallback: (ret) => {
|
||||
}
|
||||
}),
|
||||
label('Animated WebP'),
|
||||
image({
|
||||
imageUrl: "https://p.upyun.com/demo/webp/webp/animated-gif-0.webp",
|
||||
loadCallback: (ret) => {
|
||||
}
|
||||
}),
|
||||
label('WebP'),
|
||||
imageView = image({
|
||||
imageUrl: "https://p.upyun.com/demo/webp/webp/jpg-0.webp",
|
||||
loadCallback: (ret) => {
|
||||
if (ret) {
|
||||
imageView.width = ret.width
|
||||
imageView.height = ret.height
|
||||
}
|
||||
}
|
||||
}),
|
||||
label('ScaleToFill'),
|
||||
image({
|
||||
imageUrl,
|
||||
width: 300,
|
||||
height: 300,
|
||||
isBlur: true,
|
||||
border: {
|
||||
width: 2,
|
||||
color: Color.GRAY,
|
||||
},
|
||||
scaleType: ScaleType.ScaleToFill,
|
||||
layoutConfig: layoutConfig().just(),
|
||||
loadCallback: (ret) => {
|
||||
}
|
||||
}),
|
||||
label('ScaleAspectFit'),
|
||||
image({
|
||||
imageUrl,
|
||||
width: 300,
|
||||
height: 300,
|
||||
border: {
|
||||
width: 2,
|
||||
color: Color.GRAY,
|
||||
},
|
||||
scaleType: ScaleType.ScaleAspectFit,
|
||||
layoutConfig: layoutConfig().just(),
|
||||
}),
|
||||
label('ScaleAspectFill'),
|
||||
image({
|
||||
imageUrl,
|
||||
width: 300,
|
||||
height: 300,
|
||||
border: {
|
||||
width: 2,
|
||||
color: Color.GRAY,
|
||||
},
|
||||
scaleType: ScaleType.ScaleAspectFill,
|
||||
layoutConfig: layoutConfig().just(),
|
||||
}),
|
||||
label('ImageBase64'),
|
||||
image({
|
||||
imageBase64: img_base64,
|
||||
width: 300,
|
||||
height: 300,
|
||||
border: {
|
||||
width: 2,
|
||||
color: Color.GRAY,
|
||||
},
|
||||
scaleType: ScaleType.ScaleAspectFill,
|
||||
layoutConfig: layoutConfig().just(),
|
||||
}),
|
||||
],
|
||||
{
|
||||
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
|
||||
gravity: gravity().center(),
|
||||
space: 10,
|
||||
}),
|
||||
{
|
||||
layoutConfig: layoutConfig().most(),
|
||||
}
|
||||
).in(rootView)
|
||||
}
|
||||
}
|
||||
@ -4,44 +4,46 @@ import { title, colors } from "./utils";
|
||||
class InputDemo extends Panel {
|
||||
build(root: Group) {
|
||||
scroller(
|
||||
vlayout([
|
||||
title("Input Demo"),
|
||||
(new Input).also(it => {
|
||||
it.layoutConfig = layoutConfig().just().configHeight(LayoutSpec.FIT)
|
||||
it.width = 300
|
||||
it.multiline = false
|
||||
it.hintText = "HintText"
|
||||
it.textAlignment = Gravity.Left
|
||||
it.onTextChange = (s) => {
|
||||
log(`onTextChange:${s}`)
|
||||
}
|
||||
it.onFocusChange = (f) => {
|
||||
log(`onFocusChange:${f}`)
|
||||
}
|
||||
}),
|
||||
(new Input).also(it => {
|
||||
it.layoutConfig = layoutConfig().fit()
|
||||
it.hintText = "HintText"
|
||||
it.hintTextColor = colors[2]
|
||||
it.textAlignment = Gravity.Left
|
||||
it.textColor = colors[3]
|
||||
it.onTextChange = (s) => {
|
||||
log(`onTextChange:${s}`)
|
||||
}
|
||||
it.onFocusChange = (f) => {
|
||||
log(`onFocusChange:${f}`)
|
||||
}
|
||||
it.backgroundColor = colors[1].alpha(0.3)
|
||||
}),
|
||||
])
|
||||
.also(it => {
|
||||
it.space = 10
|
||||
it.layoutConfig = layoutConfig().most().configHeight(LayoutSpec.FIT)
|
||||
}))
|
||||
.apply({
|
||||
vlayout(
|
||||
[
|
||||
title("Input Demo"),
|
||||
(new Input).also(it => {
|
||||
it.layoutConfig = layoutConfig().just().configHeight(LayoutSpec.FIT)
|
||||
it.width = 300
|
||||
it.multiline = false
|
||||
it.hintText = "HintText"
|
||||
it.textAlignment = Gravity.Left
|
||||
it.onTextChange = (s) => {
|
||||
log(`onTextChange:${s}`)
|
||||
}
|
||||
it.onFocusChange = (f) => {
|
||||
log(`onFocusChange:${f}`)
|
||||
}
|
||||
}),
|
||||
(new Input).also(it => {
|
||||
it.layoutConfig = layoutConfig().fit()
|
||||
it.hintText = "HintText"
|
||||
it.hintTextColor = colors[2]
|
||||
it.textAlignment = Gravity.Left
|
||||
it.textColor = colors[3]
|
||||
it.onTextChange = (s) => {
|
||||
log(`onTextChange:${s}`)
|
||||
}
|
||||
it.onFocusChange = (f) => {
|
||||
log(`onFocusChange:${f}`)
|
||||
}
|
||||
it.backgroundColor = colors[1].alpha(0.3)
|
||||
}),
|
||||
],
|
||||
{
|
||||
space: 10,
|
||||
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT)
|
||||
}
|
||||
),
|
||||
{
|
||||
layoutConfig: layoutConfig().most()
|
||||
})
|
||||
.in(root)
|
||||
}
|
||||
).in(root)
|
||||
}
|
||||
|
||||
}
|
||||
@ -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,459 +11,500 @@ 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([
|
||||
label("Horizontal Layout(Align to Top)"),
|
||||
hlayout([
|
||||
box().apply({
|
||||
height: 20
|
||||
}),
|
||||
box().apply({
|
||||
height: 40
|
||||
}),
|
||||
box().apply({
|
||||
height: 60
|
||||
}),
|
||||
box().apply({
|
||||
height: 40
|
||||
}),
|
||||
box().apply({
|
||||
height: 20
|
||||
}),
|
||||
]).also(it => {
|
||||
it.space = 20
|
||||
}),
|
||||
label("Horizontal Layout(Align to Bottom)"),
|
||||
hlayout([
|
||||
box().apply({
|
||||
height: 20
|
||||
}),
|
||||
box().apply({
|
||||
height: 40
|
||||
}),
|
||||
box().apply({
|
||||
height: 60
|
||||
}),
|
||||
box().apply({
|
||||
height: 40
|
||||
}),
|
||||
box().apply({
|
||||
height: 20
|
||||
}),
|
||||
]).also(it => {
|
||||
it.space = 20
|
||||
it.gravity = gravity().bottom()
|
||||
}),
|
||||
label("Horizontal Layout(Align to Center)"),
|
||||
hlayout([
|
||||
box().apply({
|
||||
height: 20
|
||||
}),
|
||||
box().apply({
|
||||
height: 40
|
||||
}),
|
||||
box().apply({
|
||||
height: 60
|
||||
}),
|
||||
box().apply({
|
||||
height: 40
|
||||
}),
|
||||
box().apply({
|
||||
height: 20
|
||||
}),
|
||||
]).also(it => {
|
||||
it.space = 20
|
||||
it.gravity = gravity().center()
|
||||
}),
|
||||
label("Horizontal Layout(Weight)"),
|
||||
hlayout(
|
||||
hlayout(
|
||||
[
|
||||
vlayout(
|
||||
[
|
||||
boxStr('weight=1', 3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
weight: 1,
|
||||
label("Horizontal Layout(Align to Top)"),
|
||||
hlayout(
|
||||
[
|
||||
box().apply({
|
||||
height: 20
|
||||
}),
|
||||
box().apply({
|
||||
height: 40
|
||||
}),
|
||||
box().apply({
|
||||
height: 60
|
||||
}),
|
||||
box().apply({
|
||||
height: 40
|
||||
}),
|
||||
box().apply({
|
||||
height: 20
|
||||
}),
|
||||
],
|
||||
{
|
||||
space: 20
|
||||
}
|
||||
}),
|
||||
box(2),
|
||||
box(4),
|
||||
),
|
||||
label("Horizontal Layout(Align to Bottom)"),
|
||||
hlayout(
|
||||
[
|
||||
box().apply({
|
||||
height: 20
|
||||
}),
|
||||
box().apply({
|
||||
height: 40
|
||||
}),
|
||||
box().apply({
|
||||
height: 60
|
||||
}),
|
||||
box().apply({
|
||||
height: 40
|
||||
}),
|
||||
box().apply({
|
||||
height: 20
|
||||
}),
|
||||
],
|
||||
{
|
||||
space: 20,
|
||||
gravity: Gravity.Bottom
|
||||
}),
|
||||
label("Horizontal Layout(Align to Center)"),
|
||||
hlayout(
|
||||
[
|
||||
box().apply({
|
||||
height: 20
|
||||
}),
|
||||
box().apply({
|
||||
height: 40
|
||||
}),
|
||||
box().apply({
|
||||
height: 60
|
||||
}),
|
||||
box().apply({
|
||||
height: 40
|
||||
}),
|
||||
box().apply({
|
||||
height: 20
|
||||
}),
|
||||
],
|
||||
{
|
||||
space: 20,
|
||||
gravity: Gravity.Center
|
||||
}
|
||||
),
|
||||
label("Horizontal Layout(Weight)"),
|
||||
hlayout(
|
||||
[
|
||||
boxStr('weight=1', 3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
box(2),
|
||||
box(4),
|
||||
],
|
||||
{
|
||||
width: 200,
|
||||
height: 30,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
},
|
||||
backgroundColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
}),
|
||||
hlayout(
|
||||
[
|
||||
box(3),
|
||||
boxStr('weight=1', 2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
box(4),
|
||||
],
|
||||
{
|
||||
width: 200,
|
||||
height: 30,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
},
|
||||
backgroundColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
}
|
||||
),
|
||||
hlayout(
|
||||
[
|
||||
box(3),
|
||||
box(2),
|
||||
boxStr('weight=1', 4).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
],
|
||||
{
|
||||
width: 200,
|
||||
height: 30,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
},
|
||||
backgroundColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
}
|
||||
),
|
||||
hlayout(
|
||||
[
|
||||
boxStr('weight=1', 3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
boxStr('weight=1', 2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
box(4),
|
||||
],
|
||||
{
|
||||
width: 200,
|
||||
height: 30,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
},
|
||||
backgroundColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
}
|
||||
),
|
||||
hlayout(
|
||||
[
|
||||
boxStr('weight=1', 3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
boxStr('weight=1', 2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
boxStr('weight=1', 4).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
],
|
||||
{
|
||||
width: 200,
|
||||
height: 30,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
},
|
||||
backgroundColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
}),
|
||||
],
|
||||
{
|
||||
width: 200,
|
||||
height: 30,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
},
|
||||
backgroundColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
}),
|
||||
hlayout(
|
||||
space: 20,
|
||||
gravity: Gravity.Center
|
||||
}
|
||||
),
|
||||
vlayout(
|
||||
[
|
||||
box(3),
|
||||
boxStr('weight=1', 2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
box(4),
|
||||
label("Vertical Layout(Algin to Left)"),
|
||||
vlayout(
|
||||
[
|
||||
box(1).apply({
|
||||
width: 20
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 40
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 60
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 40
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 20
|
||||
}),
|
||||
],
|
||||
{
|
||||
space: 20
|
||||
}),
|
||||
label("Vertical Layout(Algin to Right)"),
|
||||
vlayout(
|
||||
[
|
||||
box(1).apply({
|
||||
width: 20
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 40
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 60
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 40
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 20
|
||||
}),
|
||||
],
|
||||
{
|
||||
space: 20,
|
||||
gravity: gravity().right(),
|
||||
}),
|
||||
label("Vertical Layout(Algin to Center)"),
|
||||
vlayout(
|
||||
[
|
||||
box(1).apply({
|
||||
width: 20
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 40
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 60
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 40
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 20
|
||||
}),
|
||||
],
|
||||
{
|
||||
space: 20,
|
||||
gravity: gravity().center(),
|
||||
}),
|
||||
label("Vertical Layout(Weight)"),
|
||||
hlayout(
|
||||
[
|
||||
vlayout(
|
||||
[
|
||||
boxStr('weight=1', 3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.MOST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
weight: 1,
|
||||
},
|
||||
}),
|
||||
box(2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.MOST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
}
|
||||
}),
|
||||
box(4).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.MOST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
}
|
||||
}),
|
||||
],
|
||||
{
|
||||
width: 100,
|
||||
height: 200,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
},
|
||||
backgroundColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
}),
|
||||
vlayout(
|
||||
[
|
||||
box(3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.MOST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
},
|
||||
}),
|
||||
boxStr('weight=1', 2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.MOST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
box(4).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.MOST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
}
|
||||
}),
|
||||
],
|
||||
{
|
||||
width: 100,
|
||||
height: 200,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
},
|
||||
backgroundColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
}),
|
||||
vlayout(
|
||||
[
|
||||
box(3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.MOST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
},
|
||||
}),
|
||||
box(2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.MOST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
},
|
||||
}),
|
||||
boxStr('weight=1', 4).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.MOST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
],
|
||||
{
|
||||
width: 100,
|
||||
height: 200,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
},
|
||||
backgroundColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
}),
|
||||
vlayout(
|
||||
[
|
||||
boxStr('weight=1', 3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.MOST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
weight: 1,
|
||||
},
|
||||
}),
|
||||
boxStr('weight=1', 2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.MOST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
box(4).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.MOST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
}
|
||||
}),
|
||||
],
|
||||
{
|
||||
width: 100,
|
||||
height: 200,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
},
|
||||
backgroundColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
}),
|
||||
vlayout(
|
||||
[
|
||||
boxStr('weight=1', 3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.MOST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
weight: 1,
|
||||
},
|
||||
}),
|
||||
boxStr('weight=1', 2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.MOST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
boxStr('weight=1', 4).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.MOST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
],
|
||||
{
|
||||
width: 100,
|
||||
height: 200,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
},
|
||||
backgroundColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
}),
|
||||
],
|
||||
{
|
||||
space: 20
|
||||
}),
|
||||
],
|
||||
{
|
||||
width: 200,
|
||||
height: 30,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
},
|
||||
backgroundColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
}
|
||||
),
|
||||
hlayout(
|
||||
[
|
||||
box(3),
|
||||
box(2),
|
||||
boxStr('weight=1', 4).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
],
|
||||
{
|
||||
width: 200,
|
||||
height: 30,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
},
|
||||
backgroundColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
}
|
||||
),
|
||||
hlayout([
|
||||
boxStr('weight=1', 3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
boxStr('weight=1', 2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
box(4),
|
||||
],
|
||||
{
|
||||
width: 200,
|
||||
height: 30,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
},
|
||||
backgroundColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
}
|
||||
),
|
||||
hlayout([
|
||||
boxStr('weight=1', 3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
boxStr('weight=1', 2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
boxStr('weight=1', 4).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
]).apply({
|
||||
width: 200,
|
||||
height: 30,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
},
|
||||
backgroundColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
} as IHLayout),
|
||||
]).also(it => {
|
||||
it.space = 20
|
||||
it.gravity = gravity().center()
|
||||
space: 20,
|
||||
gravity: Gravity.Left
|
||||
})
|
||||
],
|
||||
{
|
||||
space: 20
|
||||
}),
|
||||
vlayout([
|
||||
label("Vertical Layout(Algin to Left)"),
|
||||
vlayout([
|
||||
box(1).apply({
|
||||
width: 20
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 40
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 60
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 40
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 20
|
||||
}),
|
||||
]).apply({
|
||||
space: 20
|
||||
} as IVLayout),
|
||||
label("Vertical Layout(Algin to Right)"),
|
||||
vlayout([
|
||||
box(1).apply({
|
||||
width: 20
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 40
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 60
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 40
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 20
|
||||
}),
|
||||
]).apply({
|
||||
space: 20,
|
||||
gravity: gravity().right(),
|
||||
} as IVLayout),
|
||||
label("Vertical Layout(Algin to Center)"),
|
||||
vlayout([
|
||||
box(1).apply({
|
||||
width: 20
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 40
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 60
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 40
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 20
|
||||
}),
|
||||
]).apply({
|
||||
space: 20,
|
||||
gravity: gravity().center(),
|
||||
} as IVLayout),
|
||||
label("Vertical Layout(Weight)"),
|
||||
hlayout([
|
||||
|
||||
vlayout([
|
||||
boxStr('weight=1', 3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.MOST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
weight: 1,
|
||||
},
|
||||
}),
|
||||
box(2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.MOST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
}
|
||||
}),
|
||||
box(4).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.MOST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
}
|
||||
}),
|
||||
]).apply({
|
||||
width: 100,
|
||||
height: 200,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
},
|
||||
backgroundColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
} as IVLayout),
|
||||
vlayout([
|
||||
box(3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.MOST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
},
|
||||
}),
|
||||
boxStr('weight=1', 2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.MOST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
box(4).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.MOST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
}
|
||||
}),
|
||||
]).apply({
|
||||
width: 100,
|
||||
height: 200,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
},
|
||||
backgroundColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
} as IVLayout),
|
||||
vlayout([
|
||||
box(3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.MOST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
},
|
||||
}),
|
||||
box(2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.MOST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
},
|
||||
}),
|
||||
boxStr('weight=1', 4).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.MOST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
]).apply({
|
||||
width: 100,
|
||||
height: 200,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
},
|
||||
backgroundColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
} as IVLayout),
|
||||
vlayout([
|
||||
boxStr('weight=1', 3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.MOST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
weight: 1,
|
||||
},
|
||||
}),
|
||||
boxStr('weight=1', 2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.MOST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
box(4).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.MOST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
}
|
||||
}),
|
||||
]).apply({
|
||||
width: 100,
|
||||
height: 200,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
},
|
||||
backgroundColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
} as IVLayout),
|
||||
vlayout([
|
||||
boxStr('weight=1', 3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.MOST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
weight: 1,
|
||||
},
|
||||
}),
|
||||
boxStr('weight=1', 2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.MOST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
boxStr('weight=1', 4).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.MOST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
]).apply({
|
||||
width: 100,
|
||||
height: 200,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.JUST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
},
|
||||
backgroundColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
} as IVLayout),
|
||||
]).also(it => {
|
||||
it.space = 20
|
||||
}),
|
||||
|
||||
]).also(it => {
|
||||
it.space = 20
|
||||
it.gravity = gravity().left()
|
||||
})
|
||||
]).also(it => {
|
||||
it.space = 20
|
||||
}),
|
||||
).also(it => {
|
||||
it.layoutConfig = layoutConfig().most()
|
||||
})
|
||||
.in(rootView)
|
||||
{
|
||||
layoutConfig: layoutConfig().most()
|
||||
}
|
||||
).in(rootView)
|
||||
}
|
||||
}
|
||||
@ -5,121 +5,120 @@ class ListPanel extends Panel {
|
||||
build(rootView: Group): void {
|
||||
let refreshView: Refreshable
|
||||
let offset = Math.ceil(Math.random() * colors.length)
|
||||
vlayout([
|
||||
text({
|
||||
text: "ListDemo",
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.MOST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
},
|
||||
textSize: 30,
|
||||
textColor: Color.parse("#535c68"),
|
||||
backgroundColor: Color.parse("#dff9fb"),
|
||||
textAlignment: gravity().center(),
|
||||
height: 50,
|
||||
}),
|
||||
refreshView = refreshable({
|
||||
onRefresh: () => {
|
||||
refreshView.setRefreshing(context, false).then(() => {
|
||||
(refreshView.content as List).also(it => {
|
||||
it.reset()
|
||||
offset = Math.ceil(Math.random() * colors.length)
|
||||
it.itemCount = 40
|
||||
it.loadMore = true
|
||||
it.onLoadMore = () => {
|
||||
setTimeout(() => {
|
||||
it.itemCount += 10
|
||||
}, 1000)
|
||||
}
|
||||
it.loadMoreView = listItem(text({
|
||||
text: "Loading",
|
||||
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.JUST).configAlignment(Gravity.Center),
|
||||
height: 50,
|
||||
}))
|
||||
it.renderItem = (idx: number) => {
|
||||
let counter!: Text
|
||||
return listItem(
|
||||
hlayout([
|
||||
text({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.FIT,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
alignment: gravity().center(),
|
||||
},
|
||||
text: `Cell At Line ${idx}`,
|
||||
textAlignment: gravity().center(),
|
||||
textColor: Color.parse("#ffffff"),
|
||||
textSize: 20,
|
||||
height: 50,
|
||||
}),
|
||||
text({
|
||||
textColor: Color.parse("#ffffff"),
|
||||
textSize: 20,
|
||||
text: "",
|
||||
}).also(it => {
|
||||
counter = it
|
||||
vlayout(
|
||||
[
|
||||
text({
|
||||
text: "ListDemo",
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.MOST,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
},
|
||||
textSize: 30,
|
||||
textColor: Color.parse("#535c68"),
|
||||
backgroundColor: Color.parse("#dff9fb"),
|
||||
textAlignment: gravity().center(),
|
||||
height: 50,
|
||||
}),
|
||||
refreshView = refreshable({
|
||||
onRefresh: () => {
|
||||
refreshView.setRefreshing(context, false).then(() => {
|
||||
(refreshView.content as List).also(it => {
|
||||
it.reset()
|
||||
offset = Math.ceil(Math.random() * colors.length)
|
||||
it.itemCount = 40
|
||||
it.loadMore = true
|
||||
it.onLoadMore = () => {
|
||||
setTimeout(() => {
|
||||
it.itemCount += 10
|
||||
}, 1000)
|
||||
}
|
||||
it.loadMoreView = listItem(text({
|
||||
text: "Loading",
|
||||
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.JUST).configAlignment(Gravity.Center),
|
||||
height: 50,
|
||||
}))
|
||||
it.renderItem = (idx: number) => {
|
||||
let counter!: Text
|
||||
return listItem(
|
||||
hlayout([
|
||||
text({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.FIT,
|
||||
heightSpec: LayoutSpec.JUST,
|
||||
alignment: gravity().center(),
|
||||
},
|
||||
text: `Cell At Line ${idx}`,
|
||||
textAlignment: gravity().center(),
|
||||
textColor: Color.parse("#ffffff"),
|
||||
textSize: 20,
|
||||
height: 50,
|
||||
}),
|
||||
text({
|
||||
textColor: Color.parse("#ffffff"),
|
||||
textSize: 20,
|
||||
text: "",
|
||||
}).also(it => {
|
||||
counter = it
|
||||
it.layoutConfig = {
|
||||
widthSpec: LayoutSpec.FIT,
|
||||
heightSpec: LayoutSpec.FIT,
|
||||
margin: {
|
||||
left: 10,
|
||||
}
|
||||
}
|
||||
})
|
||||
]).also(it => {
|
||||
it.layoutConfig = {
|
||||
widthSpec: LayoutSpec.FIT,
|
||||
widthSpec: LayoutSpec.MOST,
|
||||
heightSpec: LayoutSpec.FIT,
|
||||
margin: {
|
||||
left: 10,
|
||||
bottom: 2,
|
||||
}
|
||||
}
|
||||
it.gravity = gravity().center()
|
||||
it.backgroundColor = colors[(idx + offset) % colors.length]
|
||||
let clicked = 0
|
||||
it.onClick = () => {
|
||||
counter.text = `Item Clicked ${++clicked}`
|
||||
}
|
||||
})
|
||||
]).also(it => {
|
||||
).also(it => {
|
||||
it.layoutConfig = {
|
||||
widthSpec: LayoutSpec.MOST,
|
||||
heightSpec: LayoutSpec.FIT,
|
||||
margin: {
|
||||
bottom: 2,
|
||||
}
|
||||
}
|
||||
it.gravity = gravity().center()
|
||||
it.backgroundColor = colors[(idx + offset) % colors.length]
|
||||
let clicked = 0
|
||||
it.onClick = () => {
|
||||
counter.text = `Item Clicked ${++clicked}`
|
||||
log(`Click item at ${idx}`)
|
||||
it.height += 10
|
||||
it.nativeChannel(context, "getWidth")().then(
|
||||
resolve => {
|
||||
log(`resolve,${resolve}`)
|
||||
},
|
||||
reject => {
|
||||
log(`reject,${reject}`)
|
||||
})
|
||||
}
|
||||
})
|
||||
).also(it => {
|
||||
it.layoutConfig = {
|
||||
widthSpec: LayoutSpec.MOST,
|
||||
heightSpec: LayoutSpec.FIT,
|
||||
}
|
||||
it.onClick = () => {
|
||||
log(`Click item at ${idx}`)
|
||||
it.height += 10
|
||||
it.nativeChannel(context, "getWidth")().then(
|
||||
resolve => {
|
||||
log(`resolve,${resolve}`)
|
||||
},
|
||||
reject => {
|
||||
log(`reject,${reject}`)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
header: rotatedArrow(),
|
||||
content: list({
|
||||
itemCount: 0,
|
||||
renderItem: () => new ListItem,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.MOST,
|
||||
heightSpec: LayoutSpec.MOST,
|
||||
},
|
||||
header: rotatedArrow(),
|
||||
content: list({
|
||||
itemCount: 0,
|
||||
renderItem: () => new ListItem,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.MOST,
|
||||
heightSpec: LayoutSpec.MOST,
|
||||
},
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
|
||||
]).also(it => {
|
||||
it.layoutConfig = {
|
||||
widthSpec: LayoutSpec.MOST,
|
||||
heightSpec: LayoutSpec.MOST,
|
||||
}
|
||||
it.backgroundColor = Color.WHITE
|
||||
}).in(rootView)
|
||||
],
|
||||
{
|
||||
layoutConfig: layoutConfig().most(),
|
||||
backgroundColor: Color.WHITE
|
||||
}).in(rootView)
|
||||
refreshView.backgroundColor = Color.YELLOW
|
||||
}
|
||||
}
|
||||
@ -4,147 +4,153 @@ import { colors, label } from "./utils";
|
||||
@Entry
|
||||
class ModalDemo extends Panel {
|
||||
build(rootView: Group): void {
|
||||
scroller(vlayout([
|
||||
text({
|
||||
text: "Modal",
|
||||
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
backgroundColor: colors[1],
|
||||
textAlignment: Gravity.Center,
|
||||
height: 50,
|
||||
}),
|
||||
label('toast on bottom'),
|
||||
label('Click me').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().just(),
|
||||
onClick: () => {
|
||||
modal(context).toast('This is a toast.')
|
||||
}
|
||||
} as IText),
|
||||
label('toast on top'),
|
||||
label('Click me').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().just(),
|
||||
onClick: () => {
|
||||
modal(context).toast('This is a toast.', Gravity.Top)
|
||||
}
|
||||
} as IText),
|
||||
scroller(
|
||||
vlayout(
|
||||
[
|
||||
text({
|
||||
text: "Modal",
|
||||
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
backgroundColor: colors[1],
|
||||
textAlignment: Gravity.Center,
|
||||
height: 50,
|
||||
}),
|
||||
label('toast on bottom'),
|
||||
label('Click me').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().just(),
|
||||
onClick: () => {
|
||||
modal(context).toast('This is a toast.')
|
||||
}
|
||||
} as IText),
|
||||
label('toast on top'),
|
||||
label('Click me').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().just(),
|
||||
onClick: () => {
|
||||
modal(context).toast('This is a toast.', Gravity.Top)
|
||||
}
|
||||
} as IText),
|
||||
|
||||
label('toast on center'),
|
||||
label('Click me').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().just(),
|
||||
onClick: () => {
|
||||
modal(context).toast('This is a toast.', Gravity.Center)
|
||||
label('toast on center'),
|
||||
label('Click me').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().just(),
|
||||
onClick: () => {
|
||||
modal(context).toast('This is a toast.', Gravity.Center)
|
||||
}
|
||||
} as IText),
|
||||
text({
|
||||
text: "Alert",
|
||||
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
backgroundColor: colors[2],
|
||||
textAlignment: Gravity.Center,
|
||||
height: 50,
|
||||
}),
|
||||
label('Click me').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().just(),
|
||||
onClick: () => {
|
||||
modal(context).alert({
|
||||
msg: 'This is alert.',
|
||||
title: 'Alert title',
|
||||
okLabel: "OkLabel"
|
||||
}).then(e => {
|
||||
modal(context).toast('Clicked OK.')
|
||||
})
|
||||
}
|
||||
} as IText),
|
||||
text({
|
||||
text: "Confirm",
|
||||
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
backgroundColor: colors[3],
|
||||
textAlignment: Gravity.Center,
|
||||
height: 50,
|
||||
}),
|
||||
label('Click me').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().just(),
|
||||
onClick: () => {
|
||||
modal(context).confirm({
|
||||
msg: 'This is Confirm.',
|
||||
title: 'Confirm title',
|
||||
okLabel: "OkLabel",
|
||||
cancelLabel: 'CancelLabel',
|
||||
}).then(
|
||||
() => {
|
||||
modal(context).toast('Clicked OK.')
|
||||
},
|
||||
() => {
|
||||
modal(context).toast('Clicked Cancel.')
|
||||
})
|
||||
}
|
||||
} as IText),
|
||||
text({
|
||||
text: "Prompt",
|
||||
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
backgroundColor: colors[4],
|
||||
textAlignment: Gravity.Center,
|
||||
height: 50,
|
||||
}),
|
||||
label('Click me').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().just(),
|
||||
onClick: () => {
|
||||
modal(context).prompt({
|
||||
msg: 'This is Prompt.',
|
||||
title: 'Prompt title',
|
||||
okLabel: "OkLabel",
|
||||
cancelLabel: 'CancelLabel',
|
||||
}).then(
|
||||
e => {
|
||||
modal(context).toast(`Clicked OK.Input:${e}`)
|
||||
},
|
||||
e => {
|
||||
modal(context).toast(`Clicked Cancel.Input:${e}`)
|
||||
})
|
||||
}
|
||||
} as IText),
|
||||
],
|
||||
{
|
||||
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
}
|
||||
} as IText),
|
||||
text({
|
||||
text: "Alert",
|
||||
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
backgroundColor: colors[2],
|
||||
textAlignment: Gravity.Center,
|
||||
height: 50,
|
||||
}),
|
||||
label('Click me').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().just(),
|
||||
onClick: () => {
|
||||
modal(context).alert({
|
||||
msg: 'This is alert.',
|
||||
title: 'Alert title',
|
||||
okLabel: "OkLabel"
|
||||
}).then(e => {
|
||||
modal(context).toast('Clicked OK.')
|
||||
})
|
||||
}
|
||||
} as IText),
|
||||
text({
|
||||
text: "Confirm",
|
||||
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
backgroundColor: colors[3],
|
||||
textAlignment: Gravity.Center,
|
||||
height: 50,
|
||||
}),
|
||||
label('Click me').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().just(),
|
||||
onClick: () => {
|
||||
modal(context).confirm({
|
||||
msg: 'This is Confirm.',
|
||||
title: 'Confirm title',
|
||||
okLabel: "OkLabel",
|
||||
cancelLabel: 'CancelLabel',
|
||||
}).then(
|
||||
() => {
|
||||
modal(context).toast('Clicked OK.')
|
||||
},
|
||||
() => {
|
||||
modal(context).toast('Clicked Cancel.')
|
||||
})
|
||||
}
|
||||
} as IText),
|
||||
text({
|
||||
text: "Prompt",
|
||||
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
backgroundColor: colors[4],
|
||||
textAlignment: Gravity.Center,
|
||||
height: 50,
|
||||
}),
|
||||
label('Click me').apply({
|
||||
width: 200,
|
||||
height: 50,
|
||||
backgroundColor: colors[0],
|
||||
textSize: 30,
|
||||
textColor: Color.WHITE,
|
||||
layoutConfig: layoutConfig().just(),
|
||||
onClick: () => {
|
||||
modal(context).prompt({
|
||||
msg: 'This is Prompt.',
|
||||
title: 'Prompt title',
|
||||
okLabel: "OkLabel",
|
||||
cancelLabel: 'CancelLabel',
|
||||
}).then(
|
||||
e => {
|
||||
modal(context).toast(`Clicked OK.Input:${e}`)
|
||||
},
|
||||
e => {
|
||||
modal(context).toast(`Clicked Cancel.Input:${e}`)
|
||||
})
|
||||
}
|
||||
} as IText),
|
||||
]).apply({
|
||||
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
|
||||
gravity: Gravity.Center,
|
||||
space: 10,
|
||||
} as IVLayout)).apply({
|
||||
layoutConfig: layoutConfig().most(),
|
||||
}).in(rootView)
|
||||
),
|
||||
{
|
||||
layoutConfig: layoutConfig().most(),
|
||||
}
|
||||
).in(rootView)
|
||||
}
|
||||
}
|
||||
@ -7,28 +7,29 @@ class ScrollerPanel extends Panel {
|
||||
scroller(
|
||||
vlayout([
|
||||
scroller(
|
||||
vlayout(new Array(100).fill(1).map(e => label('Scroll Content')))
|
||||
).apply({
|
||||
layoutConfig: layoutConfig().just(),
|
||||
width: 300,
|
||||
height: 500,
|
||||
backgroundColor: Color.RED,
|
||||
}),
|
||||
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({
|
||||
layoutConfig: layoutConfig().just(),
|
||||
width: 300,
|
||||
height: 500,
|
||||
backgroundColor: Color.BLUE,
|
||||
})
|
||||
])
|
||||
)
|
||||
.apply({
|
||||
vlayout(new Array(100).fill(1).map(e => label('Scroll Content'))),
|
||||
{
|
||||
layoutConfig: layoutConfig().just(),
|
||||
width: 300,
|
||||
height: 500,
|
||||
backgroundColor: Color.BLUE,
|
||||
}
|
||||
)
|
||||
]),
|
||||
{
|
||||
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.JUST),
|
||||
height: 500,
|
||||
backgroundColor: Color.YELLOW,
|
||||
})
|
||||
.in(rootView)
|
||||
}
|
||||
).in(rootView)
|
||||
}
|
||||
}
|
||||
@ -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
|
||||
|
||||
@ -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;
|
||||
});
|
||||
}
|
||||
|
||||
@ -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
10
doric-js/index.d.ts
vendored
@ -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[];
|
||||
|
||||
3
doric-js/lib/src/widget/flowlayout.d.ts
vendored
3
doric-js/lib/src/widget/flowlayout.d.ts
vendored
@ -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;
|
||||
|
||||
3
doric-js/lib/src/widget/list.d.ts
vendored
3
doric-js/lib/src/widget/list.d.ts
vendored
@ -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;
|
||||
|
||||
4
doric-js/lib/src/widget/scroller.d.ts
vendored
4
doric-js/lib/src/widget/scroller.d.ts
vendored
@ -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;
|
||||
|
||||
@ -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;
|
||||
});
|
||||
}
|
||||
|
||||
@ -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",
|
||||
@ -31,4 +31,4 @@
|
||||
"typescript": "^3.7.4",
|
||||
"ws": "^7.2.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user