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)
|
const view2 = box(3)
|
||||||
let idx = 0
|
let idx = 0
|
||||||
vlayout([
|
vlayout(
|
||||||
title("Animator Demo"),
|
[
|
||||||
vlayout(
|
title("Animator Demo"),
|
||||||
[
|
vlayout(
|
||||||
hlayout([
|
[
|
||||||
thisLabel('Reset').apply({
|
hlayout(
|
||||||
onClick: () => {
|
[thisLabel('Reset').apply({
|
||||||
animate(context)({
|
onClick: () => {
|
||||||
animations: () => {
|
animate(context)({
|
||||||
view.width = view.height = 20
|
animations: () => {
|
||||||
view.x = view.y = 0
|
view.width = view.height = 20
|
||||||
view.rotation = 0
|
view.x = view.y = 0
|
||||||
view.backgroundColor = colors[2]
|
view.rotation = 0
|
||||||
view.corners = 0
|
view.backgroundColor = colors[2]
|
||||||
view.scaleX = 1
|
view.corners = 0
|
||||||
view.scaleY = 1
|
view.scaleX = 1
|
||||||
view.translationX = 0
|
view.scaleY = 1
|
||||||
view.translationY = 0
|
view.translationX = 0
|
||||||
view.rotation = 0
|
view.translationY = 0
|
||||||
},
|
view.rotation = 0
|
||||||
duration: 1500,
|
},
|
||||||
}).then(() => {
|
duration: 1500,
|
||||||
modal(context).toast('Fininshed')
|
}).then(() => {
|
||||||
}).catch(e => {
|
modal(context).toast('Fininshed')
|
||||||
modal(context).toast(`${e}`)
|
}).catch(e => {
|
||||||
})
|
modal(context).toast(`${e}`)
|
||||||
}
|
})
|
||||||
}),
|
}
|
||||||
]).apply({ space: 10 } as IHLayout),
|
}),],
|
||||||
hlayout([
|
{ space: 10 }
|
||||||
thisLabel('X').apply({
|
),
|
||||||
onClick: () => {
|
hlayout(
|
||||||
animate(context)({
|
[
|
||||||
animations: () => {
|
thisLabel('X').apply({
|
||||||
view.x = view.x || 0
|
onClick: () => {
|
||||||
view.x += 100
|
animate(context)({
|
||||||
view2.x += 50
|
animations: () => {
|
||||||
},
|
view.x = view.x || 0
|
||||||
duration: 1000,
|
view.x += 100
|
||||||
})
|
view2.x += 50
|
||||||
}
|
},
|
||||||
}),
|
duration: 1000,
|
||||||
thisLabel('Y').apply({
|
})
|
||||||
onClick: () => {
|
}
|
||||||
animate(context)({
|
}),
|
||||||
animations: () => {
|
thisLabel('Y').apply({
|
||||||
view.y = view.y || 0
|
onClick: () => {
|
||||||
view.y += 100
|
animate(context)({
|
||||||
view2.y += 50
|
animations: () => {
|
||||||
},
|
view.y = view.y || 0
|
||||||
duration: 1000,
|
view.y += 100
|
||||||
})
|
view2.y += 50
|
||||||
}
|
},
|
||||||
}),
|
duration: 1000,
|
||||||
thisLabel('Width').apply({
|
})
|
||||||
onClick: () => {
|
}
|
||||||
animate(context)({
|
}),
|
||||||
animations: () => {
|
thisLabel('Width').apply({
|
||||||
view.width += 100
|
onClick: () => {
|
||||||
},
|
animate(context)({
|
||||||
duration: 1000,
|
animations: () => {
|
||||||
})
|
view.width += 100
|
||||||
}
|
},
|
||||||
}),
|
duration: 1000,
|
||||||
thisLabel('Height').apply({
|
})
|
||||||
onClick: () => {
|
}
|
||||||
animate(context)({
|
}),
|
||||||
animations: () => {
|
thisLabel('Height').apply({
|
||||||
view.height += 100
|
onClick: () => {
|
||||||
},
|
animate(context)({
|
||||||
duration: 1000,
|
animations: () => {
|
||||||
})
|
view.height += 100
|
||||||
}
|
},
|
||||||
}),
|
duration: 1000,
|
||||||
]).apply({ space: 10 } as IHLayout),
|
})
|
||||||
hlayout([
|
}
|
||||||
thisLabel('BgColor').apply({
|
}),
|
||||||
onClick: () => {
|
],
|
||||||
animate(context)({
|
{ space: 10 }
|
||||||
animations: () => {
|
),
|
||||||
view.backgroundColor = colors[(idx++) % colors.length]
|
hlayout(
|
||||||
},
|
[
|
||||||
duration: 1000,
|
thisLabel('BgColor').apply({
|
||||||
});
|
onClick: () => {
|
||||||
}
|
animate(context)({
|
||||||
}),
|
animations: () => {
|
||||||
thisLabel('Rotation').apply({
|
view.backgroundColor = colors[(idx++) % colors.length]
|
||||||
onClick: () => {
|
},
|
||||||
animate(context)({
|
duration: 1000,
|
||||||
animations: () => {
|
});
|
||||||
if (view.rotation) {
|
}
|
||||||
view.rotation += 0.5
|
}),
|
||||||
} else {
|
thisLabel('Rotation').apply({
|
||||||
view.rotation = 0.5
|
onClick: () => {
|
||||||
}
|
animate(context)({
|
||||||
},
|
animations: () => {
|
||||||
duration: 1000,
|
if (view.rotation) {
|
||||||
});
|
view.rotation += 0.5
|
||||||
}
|
} else {
|
||||||
}),
|
view.rotation = 0.5
|
||||||
thisLabel('Corner').apply({
|
}
|
||||||
onClick: () => {
|
},
|
||||||
animate(context)({
|
duration: 1000,
|
||||||
animations: () => {
|
});
|
||||||
if (typeof view.corners === 'number') {
|
}
|
||||||
view.corners += 10
|
}),
|
||||||
} else {
|
thisLabel('Corner').apply({
|
||||||
view.corners = 10
|
onClick: () => {
|
||||||
}
|
animate(context)({
|
||||||
},
|
animations: () => {
|
||||||
duration: 1000,
|
if (typeof view.corners === 'number') {
|
||||||
});
|
view.corners += 10
|
||||||
}
|
} else {
|
||||||
}),
|
view.corners = 10
|
||||||
]).apply({ space: 10 } as IHLayout),
|
}
|
||||||
|
},
|
||||||
|
duration: 1000,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
{ space: 10 }
|
||||||
|
),
|
||||||
|
|
||||||
hlayout([
|
hlayout([
|
||||||
thisLabel('scaleX').apply({
|
thisLabel('scaleX').apply({
|
||||||
onClick: () => {
|
onClick: () => {
|
||||||
animate(context)({
|
animate(context)({
|
||||||
animations: () => {
|
animations: () => {
|
||||||
if (view.scaleX) {
|
if (view.scaleX) {
|
||||||
view.scaleX += 0.1
|
view.scaleX += 0.1
|
||||||
} else {
|
} else {
|
||||||
view.scaleX = 1.1
|
view.scaleX = 1.1
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
duration: 1000,
|
duration: 1000,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
thisLabel('scaleY').apply({
|
thisLabel('scaleY').apply({
|
||||||
onClick: () => {
|
onClick: () => {
|
||||||
animate(context)({
|
animate(context)({
|
||||||
animations: () => {
|
animations: () => {
|
||||||
if (view.scaleY) {
|
if (view.scaleY) {
|
||||||
view.scaleY += 0.1
|
view.scaleY += 0.1
|
||||||
} else {
|
} else {
|
||||||
view.scaleY = 1.1
|
view.scaleY = 1.1
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
duration: 1000,
|
duration: 1000,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
]).apply({ space: 10 } as IHLayout),
|
]).apply({ space: 10 } as IHLayout),
|
||||||
]
|
],
|
||||||
).apply({ space: 10 } as IVLayout),
|
{ space: 10 }
|
||||||
stack([
|
),
|
||||||
view,
|
stack(
|
||||||
]).apply({
|
[
|
||||||
|
view,
|
||||||
|
],
|
||||||
|
{
|
||||||
|
layoutConfig: layoutConfig().most(),
|
||||||
|
backgroundColor: colors[1].alpha(0.3 * 255),
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
{
|
||||||
layoutConfig: layoutConfig().most(),
|
layoutConfig: layoutConfig().most(),
|
||||||
backgroundColor: colors[1].alpha(0.3 * 255),
|
gravity: gravity().center(),
|
||||||
}),
|
space: 10,
|
||||||
]).apply({
|
}
|
||||||
layoutConfig: layoutConfig().most(),
|
).in(rootView)
|
||||||
gravity: gravity().center(),
|
|
||||||
space: 10,
|
|
||||||
} as IVLayout).in(rootView)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -21,182 +21,201 @@ class AnimationDemo extends Panel {
|
|||||||
view.onClick = () => {
|
view.onClick = () => {
|
||||||
modal(context).toast('Clicked')
|
modal(context).toast('Clicked')
|
||||||
}
|
}
|
||||||
vlayout([
|
vlayout(
|
||||||
title("Complicated Animation"),
|
[
|
||||||
vlayout(
|
title("Complicated Animation"),
|
||||||
[
|
vlayout(
|
||||||
hlayout([
|
[
|
||||||
thisLabel('reset').apply({
|
hlayout(
|
||||||
onClick: () => {
|
[
|
||||||
const rotation = new RotationAnimation
|
thisLabel('reset').apply({
|
||||||
rotation.duration = 1000
|
onClick: () => {
|
||||||
rotation.fromRotation = view.rotation || 0
|
const rotation = new RotationAnimation
|
||||||
rotation.toRotation = 0
|
rotation.duration = 1000
|
||||||
const translation = new TranslationAnimation
|
rotation.fromRotation = view.rotation || 0
|
||||||
translation.duration = 1000
|
rotation.toRotation = 0
|
||||||
translation.fromTranslationX = view.translationX || 0
|
const translation = new TranslationAnimation
|
||||||
translation.toTranslationX = 0
|
translation.duration = 1000
|
||||||
translation.fromTranslationY = view.translationY || 0
|
translation.fromTranslationX = view.translationX || 0
|
||||||
translation.toTranslationY = 0
|
translation.toTranslationX = 0
|
||||||
const scale = new ScaleAnimation
|
translation.fromTranslationY = view.translationY || 0
|
||||||
scale.duration = 1000
|
translation.toTranslationY = 0
|
||||||
scale.fromScaleX = view.scaleX || 1
|
const scale = new ScaleAnimation
|
||||||
scale.toScaleX = 1
|
scale.duration = 1000
|
||||||
scale.fromScaleY = view.scaleY || 1
|
scale.fromScaleX = view.scaleX || 1
|
||||||
scale.toScaleY = 1
|
scale.toScaleX = 1
|
||||||
const animationSet = new AnimationSet
|
scale.fromScaleY = view.scaleY || 1
|
||||||
animationSet.addAnimation(rotation)
|
scale.toScaleY = 1
|
||||||
animationSet.addAnimation(translation)
|
const animationSet = new AnimationSet
|
||||||
animationSet.addAnimation(scale)
|
animationSet.addAnimation(rotation)
|
||||||
view.doAnimation(context, animationSet).then(() => {
|
animationSet.addAnimation(translation)
|
||||||
modal(context).toast('Resetd')
|
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),
|
view2.also(v => {
|
||||||
hlayout([
|
v.x = v.y = 20
|
||||||
thisLabel('TranslationX').apply({
|
v.y = 40
|
||||||
onClick: () => {
|
v.scaleX = 1.5
|
||||||
const animation = new TranslationAnimation
|
})
|
||||||
animation.duration = 1000
|
],
|
||||||
animation.fromTranslationX = view.translationX || 0
|
{
|
||||||
animation.toTranslationX = animation.fromTranslationX + 100
|
layoutConfig: layoutConfig().most(),
|
||||||
animation.fromTranslationY = view.translationY || 0
|
backgroundColor: colors[1].alpha(0.3 * 255),
|
||||||
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({
|
|
||||||
layoutConfig: layoutConfig().most(),
|
layoutConfig: layoutConfig().most(),
|
||||||
backgroundColor: colors[1].alpha(0.3 * 255),
|
gravity: gravity().center(),
|
||||||
}),
|
space: 10,
|
||||||
]).apply({
|
}
|
||||||
layoutConfig: layoutConfig().most(),
|
).in(rootView)
|
||||||
gravity: gravity().center(),
|
|
||||||
space: 10,
|
|
||||||
} as IVLayout).in(rootView)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -39,9 +39,7 @@ class MyDemo extends Panel {
|
|||||||
backgroundColor: colors[idx % colors.length],
|
backgroundColor: colors[idx % colors.length],
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
}).apply({
|
|
||||||
}),
|
}),
|
||||||
}).apply({
|
|
||||||
layoutConfig: layoutConfig().most(),
|
layoutConfig: layoutConfig().most(),
|
||||||
}).also(v => {
|
}).also(v => {
|
||||||
v.top = 200
|
v.top = 200
|
||||||
|
|||||||
@ -7,20 +7,23 @@ class CounterView extends ViewHolder {
|
|||||||
number!: Text
|
number!: Text
|
||||||
counter!: Text
|
counter!: Text
|
||||||
build(root: Group) {
|
build(root: Group) {
|
||||||
vlayout([
|
vlayout(
|
||||||
this.number = text({
|
[
|
||||||
textSize: 40,
|
this.number = text({
|
||||||
}),
|
textSize: 40,
|
||||||
|
}),
|
||||||
|
|
||||||
this.counter = text({
|
this.counter = text({
|
||||||
text: "Click To Count",
|
text: "Click To Count",
|
||||||
textSize: 20,
|
textSize: 20,
|
||||||
}),
|
}),
|
||||||
]).apply({
|
],
|
||||||
layoutConfig: layoutConfig().most(),
|
{
|
||||||
gravity: Gravity.Center,
|
layoutConfig: layoutConfig().most(),
|
||||||
space: 20,
|
gravity: Gravity.Center,
|
||||||
} as IVLayout).in(root)
|
space: 20,
|
||||||
|
}
|
||||||
|
).in(root)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -30,338 +30,405 @@ function label(str: string) {
|
|||||||
class EffectsDemo extends Panel {
|
class EffectsDemo extends Panel {
|
||||||
build(rootView: Group) {
|
build(rootView: Group) {
|
||||||
scroller(
|
scroller(
|
||||||
vlayout([
|
vlayout(
|
||||||
hlayout([
|
[
|
||||||
vlayout([
|
hlayout(
|
||||||
label("Origin view"),
|
[
|
||||||
box().apply({
|
vlayout(
|
||||||
width: 100,
|
[
|
||||||
height: 100
|
label("Origin view"),
|
||||||
}),]).apply({
|
box().apply({
|
||||||
gravity: Gravity.Center,
|
width: 100,
|
||||||
space: 10,
|
height: 100
|
||||||
} as IVLayout),
|
}),],
|
||||||
vlayout([
|
{
|
||||||
label("Border"),
|
gravity: Gravity.Center,
|
||||||
box().apply({
|
space: 10,
|
||||||
width: 100,
|
}
|
||||||
height: 100,
|
),
|
||||||
border: {
|
vlayout(
|
||||||
width: 5,
|
[
|
||||||
color: colors[3]
|
label("Border"),
|
||||||
},
|
box().apply({
|
||||||
layoutConfig: layoutConfig().just().configMargin({
|
width: 100,
|
||||||
left: 5,
|
height: 100,
|
||||||
right: 5,
|
border: {
|
||||||
bottom: 5,
|
width: 5,
|
||||||
})
|
color: colors[3]
|
||||||
}),]).apply({
|
},
|
||||||
gravity: Gravity.Center,
|
layoutConfig: layoutConfig().just().configMargin({
|
||||||
space: 10,
|
left: 5,
|
||||||
} as IVLayout),
|
right: 5,
|
||||||
vlayout([
|
bottom: 5,
|
||||||
label("Corner"),
|
})
|
||||||
box().apply({
|
}),
|
||||||
width: 100,
|
],
|
||||||
height: 100,
|
{
|
||||||
corners: 10,
|
gravity: Gravity.Center,
|
||||||
layoutConfig: layoutConfig().just().configMargin({
|
space: 10,
|
||||||
bottom: 10
|
}),
|
||||||
})
|
vlayout(
|
||||||
}),]).apply({
|
[
|
||||||
gravity: Gravity.Center,
|
label("Corner"),
|
||||||
space: 10,
|
box().apply({
|
||||||
} as IVLayout),
|
width: 100,
|
||||||
vlayout([
|
height: 100,
|
||||||
label("Shadow"),
|
corners: 10,
|
||||||
box().apply({
|
layoutConfig: layoutConfig().just().configMargin({
|
||||||
width: 100,
|
bottom: 10
|
||||||
height: 100,
|
})
|
||||||
shadow: {
|
}),
|
||||||
opacity: 1,
|
],
|
||||||
color: colors[1],
|
{
|
||||||
offsetX: 3,
|
gravity: Gravity.Center,
|
||||||
offsetY: 3,
|
space: 10,
|
||||||
radius: 5,
|
}
|
||||||
},
|
),
|
||||||
layoutConfig: layoutConfig().just().configMargin({
|
vlayout(
|
||||||
bottom: 10
|
[
|
||||||
})
|
label("Shadow"),
|
||||||
}),]).apply({
|
box().apply({
|
||||||
gravity: Gravity.Center,
|
width: 100,
|
||||||
space: 10,
|
height: 100,
|
||||||
} as IVLayout),
|
shadow: {
|
||||||
]).apply({ space: 20 } as IHLayout),
|
opacity: 1,
|
||||||
hlayout([
|
color: colors[1],
|
||||||
vlayout([
|
offsetX: 3,
|
||||||
label("Border,Corner"),
|
offsetY: 3,
|
||||||
box().apply({
|
radius: 5,
|
||||||
width: 100,
|
},
|
||||||
height: 100,
|
layoutConfig: layoutConfig().just().configMargin({
|
||||||
border: {
|
bottom: 10
|
||||||
width: 5,
|
})
|
||||||
color: colors[3]
|
}),
|
||||||
},
|
],
|
||||||
corners: 10,
|
{
|
||||||
layoutConfig: layoutConfig().just().configMargin({
|
gravity: Gravity.Center,
|
||||||
left: 5,
|
space: 10,
|
||||||
right: 5,
|
}
|
||||||
bottom: 5,
|
),
|
||||||
})
|
],
|
||||||
}),]).apply({
|
{ space: 20 }
|
||||||
gravity: Gravity.Center,
|
),
|
||||||
space: 10,
|
hlayout(
|
||||||
} as IVLayout),
|
[
|
||||||
vlayout([
|
vlayout(
|
||||||
label("Border,Shadow"),
|
[
|
||||||
box().apply({
|
label("Border,Corner"),
|
||||||
width: 100,
|
box().apply({
|
||||||
height: 100,
|
width: 100,
|
||||||
border: {
|
height: 100,
|
||||||
width: 5,
|
border: {
|
||||||
color: colors[3]
|
width: 5,
|
||||||
},
|
color: colors[3]
|
||||||
shadow: {
|
},
|
||||||
opacity: 1,
|
corners: 10,
|
||||||
color: colors[1],
|
layoutConfig: layoutConfig().just().configMargin({
|
||||||
offsetX: 3,
|
left: 5,
|
||||||
offsetY: 3,
|
right: 5,
|
||||||
radius: 5,
|
bottom: 5,
|
||||||
},
|
})
|
||||||
layoutConfig: layoutConfig().just().configMargin({
|
}),],
|
||||||
bottom: 10
|
{
|
||||||
})
|
gravity: Gravity.Center,
|
||||||
}),]).apply({
|
space: 10,
|
||||||
gravity: Gravity.Center,
|
}
|
||||||
space: 10,
|
),
|
||||||
} as IVLayout),
|
vlayout(
|
||||||
vlayout([
|
[
|
||||||
label("Corner,Shadow"),
|
label("Border,Shadow"),
|
||||||
box().apply({
|
box().apply({
|
||||||
width: 100,
|
width: 100,
|
||||||
height: 100,
|
height: 100,
|
||||||
corners: 10,
|
border: {
|
||||||
shadow: {
|
width: 5,
|
||||||
opacity: 1,
|
color: colors[3]
|
||||||
color: colors[1],
|
},
|
||||||
offsetX: 3,
|
shadow: {
|
||||||
offsetY: 3,
|
opacity: 1,
|
||||||
radius: 5,
|
color: colors[1],
|
||||||
},
|
offsetX: 3,
|
||||||
layoutConfig: layoutConfig().just().configMargin({
|
offsetY: 3,
|
||||||
bottom: 10
|
radius: 5,
|
||||||
})
|
},
|
||||||
}),]).apply({
|
layoutConfig: layoutConfig().just().configMargin({
|
||||||
gravity: Gravity.Center,
|
bottom: 10
|
||||||
space: 10,
|
})
|
||||||
} as IVLayout),
|
}),],
|
||||||
vlayout([
|
{
|
||||||
label("Border,Corner,Shadow"),
|
gravity: Gravity.Center,
|
||||||
box().apply({
|
space: 10,
|
||||||
width: 100,
|
}),
|
||||||
height: 100,
|
vlayout(
|
||||||
border: {
|
[
|
||||||
width: 5,
|
label("Corner,Shadow"),
|
||||||
color: colors[3]
|
box().apply({
|
||||||
},
|
width: 100,
|
||||||
corners: 10,
|
height: 100,
|
||||||
shadow: {
|
corners: 10,
|
||||||
opacity: 1,
|
shadow: {
|
||||||
color: colors[1],
|
opacity: 1,
|
||||||
offsetX: 3,
|
color: colors[1],
|
||||||
offsetY: 3,
|
offsetX: 3,
|
||||||
radius: 5,
|
offsetY: 3,
|
||||||
},
|
radius: 5,
|
||||||
layoutConfig: layoutConfig().just().configMargin({
|
},
|
||||||
left: 5,
|
layoutConfig: layoutConfig().just().configMargin({
|
||||||
right: 5,
|
bottom: 10
|
||||||
bottom: 5,
|
})
|
||||||
})
|
}),],
|
||||||
}),]).apply({
|
{
|
||||||
gravity: Gravity.Center,
|
gravity: Gravity.Center,
|
||||||
space: 10,
|
space: 10,
|
||||||
} as IVLayout),
|
}),
|
||||||
]).apply({ space: 20 } as IHLayout),
|
vlayout(
|
||||||
hlayout([
|
[
|
||||||
vlayout([
|
label("Border,Corner,Shadow"),
|
||||||
label("Shadow"),
|
box().apply({
|
||||||
box().apply({
|
width: 100,
|
||||||
width: 100,
|
height: 100,
|
||||||
height: 100,
|
border: {
|
||||||
corners: 50,
|
width: 5,
|
||||||
shadow: {
|
color: colors[3]
|
||||||
opacity: 1,
|
},
|
||||||
color: colors[1],
|
corners: 10,
|
||||||
offsetX: 0,
|
shadow: {
|
||||||
offsetY: 0,
|
opacity: 1,
|
||||||
radius: 10,
|
color: colors[1],
|
||||||
},
|
offsetX: 3,
|
||||||
layoutConfig: layoutConfig().just().configMargin({
|
offsetY: 3,
|
||||||
left: 10,
|
radius: 5,
|
||||||
right: 10,
|
},
|
||||||
bottom: 10,
|
layoutConfig: layoutConfig().just().configMargin({
|
||||||
})
|
left: 5,
|
||||||
}),]).apply({
|
right: 5,
|
||||||
gravity: Gravity.Center,
|
bottom: 5,
|
||||||
space: 10,
|
})
|
||||||
} as IVLayout),
|
}),
|
||||||
vlayout([
|
],
|
||||||
label("Shadow,offset"),
|
{
|
||||||
box().apply({
|
gravity: Gravity.Center,
|
||||||
width: 100,
|
space: 10,
|
||||||
height: 100,
|
}
|
||||||
corners: 50,
|
),
|
||||||
shadow: {
|
],
|
||||||
opacity: 1,
|
{ space: 20 }
|
||||||
color: colors[1],
|
),
|
||||||
offsetX: 5,
|
hlayout(
|
||||||
offsetY: 5,
|
[
|
||||||
radius: 5,
|
vlayout(
|
||||||
},
|
[
|
||||||
layoutConfig: layoutConfig().just().configMargin({
|
label("Shadow"),
|
||||||
left: 10,
|
box().apply({
|
||||||
right: 10,
|
width: 100,
|
||||||
bottom: 10,
|
height: 100,
|
||||||
})
|
corners: 50,
|
||||||
}),]).apply({
|
shadow: {
|
||||||
gravity: Gravity.Center,
|
opacity: 1,
|
||||||
space: 10,
|
color: colors[1],
|
||||||
} as IVLayout),
|
offsetX: 0,
|
||||||
vlayout([
|
offsetY: 0,
|
||||||
label("Shadow,opacity"),
|
radius: 10,
|
||||||
box().apply({
|
},
|
||||||
width: 100,
|
layoutConfig: layoutConfig().just().configMargin({
|
||||||
height: 100,
|
left: 10,
|
||||||
corners: 50,
|
right: 10,
|
||||||
shadow: {
|
bottom: 10,
|
||||||
opacity: 0.5,
|
})
|
||||||
color: colors[1],
|
}),],
|
||||||
offsetX: 5,
|
{
|
||||||
offsetY: 5,
|
gravity: Gravity.Center,
|
||||||
radius: 5,
|
space: 10,
|
||||||
},
|
}
|
||||||
layoutConfig: layoutConfig().just().configMargin({
|
),
|
||||||
left: 10,
|
vlayout(
|
||||||
right: 10,
|
[
|
||||||
bottom: 10,
|
label("Shadow,offset"),
|
||||||
})
|
box().apply({
|
||||||
}),]).apply({
|
width: 100,
|
||||||
gravity: Gravity.Center,
|
height: 100,
|
||||||
space: 10,
|
corners: 50,
|
||||||
} as IVLayout),
|
shadow: {
|
||||||
vlayout([
|
opacity: 1,
|
||||||
label("Shadow,color"),
|
color: colors[1],
|
||||||
box().apply({
|
offsetX: 5,
|
||||||
width: 100,
|
offsetY: 5,
|
||||||
height: 100,
|
radius: 5,
|
||||||
corners: 50,
|
},
|
||||||
shadow: {
|
layoutConfig: layoutConfig().just().configMargin({
|
||||||
opacity: 1,
|
left: 10,
|
||||||
color: colors[2],
|
right: 10,
|
||||||
offsetX: 5,
|
bottom: 10,
|
||||||
offsetY: 5,
|
})
|
||||||
radius: 5,
|
}),
|
||||||
},
|
],
|
||||||
layoutConfig: layoutConfig().just().configMargin({
|
{
|
||||||
left: 10,
|
gravity: Gravity.Center,
|
||||||
right: 10,
|
space: 10,
|
||||||
bottom: 10,
|
}),
|
||||||
})
|
vlayout(
|
||||||
}),]).apply({
|
[
|
||||||
gravity: Gravity.Center,
|
label("Shadow,opacity"),
|
||||||
space: 10,
|
box().apply({
|
||||||
} as IVLayout),
|
width: 100,
|
||||||
]).apply({ space: 20 } as IHLayout),
|
height: 100,
|
||||||
hlayout([
|
corners: 50,
|
||||||
vlayout([
|
shadow: {
|
||||||
label("Corner round"),
|
opacity: 0.5,
|
||||||
box().apply({
|
color: colors[1],
|
||||||
width: 100,
|
offsetX: 5,
|
||||||
height: 100,
|
offsetY: 5,
|
||||||
corners: 50,
|
radius: 5,
|
||||||
layoutConfig: layoutConfig().just().configMargin({
|
},
|
||||||
left: 5,
|
layoutConfig: layoutConfig().just().configMargin({
|
||||||
right: 5,
|
left: 10,
|
||||||
bottom: 5,
|
right: 10,
|
||||||
})
|
bottom: 10,
|
||||||
}),]).apply({
|
})
|
||||||
gravity: Gravity.Center,
|
}),
|
||||||
space: 10,
|
],
|
||||||
} as IVLayout),
|
{
|
||||||
vlayout([
|
gravity: Gravity.Center,
|
||||||
label("Corner left top"),
|
space: 10,
|
||||||
box().apply({
|
}),
|
||||||
width: 100,
|
vlayout(
|
||||||
height: 100,
|
[
|
||||||
corners: {
|
label("Shadow,color"),
|
||||||
leftTop: 50,
|
box().apply({
|
||||||
},
|
width: 100,
|
||||||
layoutConfig: layoutConfig().just().configMargin({
|
height: 100,
|
||||||
left: 5,
|
corners: 50,
|
||||||
right: 5,
|
shadow: {
|
||||||
bottom: 5,
|
opacity: 1,
|
||||||
})
|
color: colors[2],
|
||||||
}),]).apply({
|
offsetX: 5,
|
||||||
gravity: Gravity.Center,
|
offsetY: 5,
|
||||||
space: 10,
|
radius: 5,
|
||||||
} as IVLayout),
|
},
|
||||||
vlayout([
|
layoutConfig: layoutConfig().just().configMargin({
|
||||||
label("Corner right top"),
|
left: 10,
|
||||||
box().apply({
|
right: 10,
|
||||||
width: 100,
|
bottom: 10,
|
||||||
height: 100,
|
})
|
||||||
corners: {
|
}),
|
||||||
rightTop: 50,
|
],
|
||||||
},
|
{
|
||||||
layoutConfig: layoutConfig().just().configMargin({
|
gravity: Gravity.Center,
|
||||||
left: 5,
|
space: 10,
|
||||||
right: 5,
|
}),
|
||||||
bottom: 5,
|
],
|
||||||
})
|
{ space: 20 }
|
||||||
}),]).apply({
|
),
|
||||||
gravity: Gravity.Center,
|
hlayout(
|
||||||
space: 10,
|
[
|
||||||
} as IVLayout),
|
vlayout(
|
||||||
vlayout([
|
[
|
||||||
label("Corner left bottom"),
|
label("Corner round"),
|
||||||
box().apply({
|
box().apply({
|
||||||
width: 100,
|
width: 100,
|
||||||
height: 100,
|
height: 100,
|
||||||
corners: {
|
corners: 50,
|
||||||
leftBottom: 50,
|
layoutConfig: layoutConfig().just().configMargin({
|
||||||
},
|
left: 5,
|
||||||
layoutConfig: layoutConfig().just().configMargin({
|
right: 5,
|
||||||
left: 5,
|
bottom: 5,
|
||||||
right: 5,
|
})
|
||||||
bottom: 5,
|
}),
|
||||||
})
|
],
|
||||||
}),]).apply({
|
{
|
||||||
gravity: Gravity.Center,
|
gravity: Gravity.Center,
|
||||||
space: 10,
|
space: 10,
|
||||||
} as IVLayout),
|
}),
|
||||||
vlayout([
|
vlayout(
|
||||||
label("Corner right bottom"),
|
[
|
||||||
box().apply({
|
label("Corner left top"),
|
||||||
width: 100,
|
box().apply({
|
||||||
height: 100,
|
width: 100,
|
||||||
corners: {
|
height: 100,
|
||||||
rightBottom: 50,
|
corners: {
|
||||||
},
|
leftTop: 50,
|
||||||
layoutConfig: layoutConfig().just().configMargin({
|
},
|
||||||
left: 5,
|
layoutConfig: layoutConfig().just().configMargin({
|
||||||
right: 5,
|
left: 5,
|
||||||
bottom: 5,
|
right: 5,
|
||||||
})
|
bottom: 5,
|
||||||
}),]).apply({
|
})
|
||||||
gravity: Gravity.Center,
|
}),
|
||||||
space: 10,
|
],
|
||||||
} as IVLayout),
|
{
|
||||||
]).apply({ space: 20 } as IHLayout),
|
gravity: Gravity.Center,
|
||||||
]).also(it => {
|
space: 10,
|
||||||
it.space = 20
|
}),
|
||||||
}),
|
vlayout(
|
||||||
).also(it => {
|
[
|
||||||
it.layoutConfig = layoutConfig().most()
|
label("Corner right top"),
|
||||||
}).in(rootView)
|
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
|
@Entry
|
||||||
class FlowDemo extends Panel {
|
class FlowDemo extends Panel {
|
||||||
build(rootView: Group): void {
|
build(rootView: Group) {
|
||||||
flowlayout({
|
const flowView = flowlayout({
|
||||||
layoutConfig: layoutConfig().most(),
|
layoutConfig: layoutConfig().most(),
|
||||||
itemCount: 100,
|
itemCount: 100,
|
||||||
columnCount: 3,
|
columnCount: 3,
|
||||||
columnSpace: 10,
|
columnSpace: 10,
|
||||||
rowSpace: 10,
|
rowSpace: 10,
|
||||||
renderItem: (idx) => {
|
renderItem: (idx) => {
|
||||||
return flowItem(text({
|
return flowItem(
|
||||||
text: `${idx}`,
|
text({
|
||||||
textColor: Color.WHITE,
|
text: `${idx}`,
|
||||||
textSize: 20,
|
textColor: Color.WHITE,
|
||||||
layoutConfig: layoutConfig().fit().configAlignment(Gravity.Center)
|
textSize: 20,
|
||||||
})).apply({
|
layoutConfig: layoutConfig().fit().configAlignment(Gravity.Center)
|
||||||
backgroundColor: colors[idx % colors.length],
|
}),
|
||||||
height: 50 + (idx % 3) * 20,
|
{
|
||||||
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
|
backgroundColor: colors[idx % colors.length],
|
||||||
})
|
height: 50 + (idx % 3) * 20,
|
||||||
|
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
|
||||||
|
})
|
||||||
},
|
},
|
||||||
}).also(it => {
|
loadMore: true,
|
||||||
it.loadMore = true
|
onLoadMore: () => {
|
||||||
it.onLoadMore = () => {
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
it.itemCount += 20
|
flowView.itemCount += 20
|
||||||
}, 1000)
|
}, 1000)
|
||||||
}
|
},
|
||||||
it.loadMoreView = new FlowLayoutItem().apply({
|
loadMoreView: flowItem(
|
||||||
backgroundColor: colors[500 % colors.length],
|
text({
|
||||||
height: 50,
|
|
||||||
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
|
|
||||||
}).also(it => {
|
|
||||||
it.addChild(text({
|
|
||||||
text: 'load more',
|
text: 'load more',
|
||||||
textColor: Color.WHITE,
|
textColor: Color.WHITE,
|
||||||
textSize: 20,
|
textSize: 20,
|
||||||
layoutConfig: layoutConfig().fit().configAlignment(Gravity.Center)
|
layoutConfig: layoutConfig().fit().configAlignment(Gravity.Center)
|
||||||
}))
|
}),
|
||||||
})
|
{
|
||||||
})
|
backgroundColor: colors[500 % colors.length],
|
||||||
.in(rootView)
|
height: 50,
|
||||||
|
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
|
||||||
|
})
|
||||||
|
}).in(rootView)
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -232,95 +232,102 @@ class GoBangVH extends ViewHolder {
|
|||||||
const borderWidth = gap
|
const borderWidth = gap
|
||||||
this.gap = state.gap
|
this.gap = state.gap
|
||||||
scroller(
|
scroller(
|
||||||
vlayout([
|
vlayout(
|
||||||
text({
|
[
|
||||||
text: "五子棋",
|
text({
|
||||||
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
|
text: "五子棋",
|
||||||
textSize: 30,
|
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
|
||||||
textColor: Color.WHITE,
|
textSize: 30,
|
||||||
backgroundColor: colors[0],
|
textColor: Color.WHITE,
|
||||||
textAlignment: gravity().center(),
|
backgroundColor: colors[0],
|
||||||
height: 50,
|
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
|
|
||||||
})
|
|
||||||
}),
|
}),
|
||||||
]).apply({
|
stack(
|
||||||
layoutConfig: layoutConfig().just(),
|
[
|
||||||
width: boardSize + 2 * borderWidth,
|
stack(
|
||||||
height: boardSize + 2 * borderWidth,
|
[
|
||||||
backgroundColor: Color.parse("#E6B080"),
|
...(new Array(count - 2)).fill(0).map((_, idx) => {
|
||||||
}),
|
return columLine().also(v => {
|
||||||
|
v.left = (idx + 1) * gap
|
||||||
this.gameMode = text({
|
})
|
||||||
text: "游戏模式",
|
}),
|
||||||
textSize: 20,
|
...(new Array(count - 2)).fill(0).map((_, idx) => {
|
||||||
textColor: Color.WHITE,
|
return rowLine().also(v => {
|
||||||
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.JUST),
|
v.top = (idx + 1) * gap
|
||||||
height: 50,
|
})
|
||||||
backgroundColor: colors[8],
|
}),
|
||||||
}),
|
],
|
||||||
hlayout([
|
{
|
||||||
this.currentRole = text({
|
layoutConfig: layoutConfig().just()
|
||||||
text: "当前:",
|
.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,
|
textSize: 20,
|
||||||
textColor: Color.WHITE,
|
textColor: Color.WHITE,
|
||||||
layoutConfig: layoutConfig().just().configWeight(1),
|
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.JUST),
|
||||||
height: 50,
|
height: 50,
|
||||||
backgroundColor: colors[1],
|
backgroundColor: colors[8],
|
||||||
}),
|
}),
|
||||||
this.result = text({
|
hlayout(
|
||||||
text: "获胜方:",
|
[
|
||||||
|
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,
|
textSize: 20,
|
||||||
textColor: Color.WHITE,
|
textColor: Color.WHITE,
|
||||||
layoutConfig: layoutConfig().just().configWeight(1),
|
layoutConfig: layoutConfig().just().configWidth(LayoutSpec.MOST),
|
||||||
height: 50,
|
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(),
|
layoutConfig: layoutConfig().fit(),
|
||||||
backgroundColor: Color.parse('#ecf0f1'),
|
backgroundColor: Color.parse('#ecf0f1'),
|
||||||
} as IVLayout)
|
}
|
||||||
|
)
|
||||||
).in(this.root)
|
).in(this.root)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -375,44 +382,45 @@ class GoBangVM extends ViewModel<GoBangState, GoBangVH>{
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
vh.gameMode.onClick = () => {
|
vh.gameMode.onClick = () => {
|
||||||
popover(context).show(vlayout([
|
popover(context).show(vlayout(
|
||||||
...[
|
[
|
||||||
{
|
...[
|
||||||
label: "黑方:人 白方:人",
|
{
|
||||||
mode: GameMode.P2P,
|
label: "黑方:人 白方:人",
|
||||||
},
|
mode: GameMode.P2P,
|
||||||
{
|
},
|
||||||
label: "黑方:人 白方:机",
|
{
|
||||||
mode: GameMode.P2C,
|
label: "黑方:人 白方:机",
|
||||||
},
|
mode: GameMode.P2C,
|
||||||
{
|
},
|
||||||
label: "黑方:机 白方:人",
|
{
|
||||||
mode: GameMode.C2P,
|
label: "黑方:机 白方:人",
|
||||||
},
|
mode: GameMode.C2P,
|
||||||
].map((e) => text({
|
},
|
||||||
text: e.label,
|
].map((e) => text({
|
||||||
textSize: 20,
|
text: e.label,
|
||||||
textColor: Color.WHITE,
|
textSize: 20,
|
||||||
layoutConfig: layoutConfig().just(),
|
textColor: Color.WHITE,
|
||||||
height: 50,
|
layoutConfig: layoutConfig().just(),
|
||||||
width: 300,
|
height: 50,
|
||||||
backgroundColor: (state.gameMode === e.mode) ? Color.parse('#636e72') : Color.parse('#b2bec3'),
|
width: 300,
|
||||||
onClick: () => {
|
backgroundColor: (state.gameMode === e.mode) ? Color.parse('#636e72') : Color.parse('#b2bec3'),
|
||||||
this.updateState(s => {
|
onClick: () => {
|
||||||
s.gameMode = e.mode
|
this.updateState(s => {
|
||||||
this.reset(s)
|
s.gameMode = e.mode
|
||||||
})
|
this.reset(s)
|
||||||
popover(context).dismiss()
|
})
|
||||||
},
|
popover(context).dismiss()
|
||||||
}))
|
},
|
||||||
])
|
}))
|
||||||
.apply({
|
],
|
||||||
|
{
|
||||||
layoutConfig: layoutConfig().most(),
|
layoutConfig: layoutConfig().most(),
|
||||||
onClick: () => {
|
onClick: () => {
|
||||||
popover(context).dismiss()
|
popover(context).dismiss()
|
||||||
},
|
},
|
||||||
gravity: Gravity.Center,
|
gravity: Gravity.Center,
|
||||||
} as IVLayout)
|
})
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
vh.result.onClick = () => {
|
vh.result.onClick = () => {
|
||||||
|
|||||||
@ -7,104 +7,109 @@ const imageUrl = 'https://img.zcool.cn/community/01e75b5da933daa801209e1ffa4649.
|
|||||||
class ImageDemo extends Panel {
|
class ImageDemo extends Panel {
|
||||||
build(rootView: Group): void {
|
build(rootView: Group): void {
|
||||||
let imageView: Image
|
let imageView: Image
|
||||||
scroller(vlayout([
|
scroller(
|
||||||
text({
|
vlayout(
|
||||||
text: "Image Demo",
|
[
|
||||||
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
|
text({
|
||||||
textSize: 30,
|
text: "Image Demo",
|
||||||
textColor: Color.WHITE,
|
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
|
||||||
backgroundColor: colors[5],
|
textSize: 30,
|
||||||
textAlignment: gravity().center(),
|
textColor: Color.WHITE,
|
||||||
height: 50,
|
backgroundColor: colors[5],
|
||||||
}),
|
textAlignment: gravity().center(),
|
||||||
label('Gif'),
|
height: 50,
|
||||||
image({
|
}),
|
||||||
imageUrl: "https://misc.aotu.io/ONE-SUNDAY/world-cup_2014_42.gif",
|
label('Gif'),
|
||||||
scaleType: ScaleType.ScaleToFill,
|
image({
|
||||||
loadCallback: function (ret) {
|
imageUrl: "https://misc.aotu.io/ONE-SUNDAY/world-cup_2014_42.gif",
|
||||||
log('this')
|
scaleType: ScaleType.ScaleToFill,
|
||||||
log('loadCallback', ret)
|
loadCallback: function (ret) {
|
||||||
}
|
log('this')
|
||||||
}),
|
log('loadCallback', ret)
|
||||||
label('APNG'),
|
}
|
||||||
image({
|
}),
|
||||||
imageUrl: "https://misc.aotu.io/ONE-SUNDAY/world_cup_2014_42.png",
|
label('APNG'),
|
||||||
loadCallback: (ret) => {
|
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",
|
label('Animated WebP'),
|
||||||
loadCallback: (ret) => {
|
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",
|
label('WebP'),
|
||||||
loadCallback: (ret) => {
|
imageView = image({
|
||||||
if (ret) {
|
imageUrl: "https://p.upyun.com/demo/webp/webp/jpg-0.webp",
|
||||||
imageView.width = ret.width
|
loadCallback: (ret) => {
|
||||||
imageView.height = ret.height
|
if (ret) {
|
||||||
}
|
imageView.width = ret.width
|
||||||
}
|
imageView.height = ret.height
|
||||||
}),
|
}
|
||||||
label('ScaleToFill'),
|
}
|
||||||
image({
|
}),
|
||||||
imageUrl,
|
label('ScaleToFill'),
|
||||||
width: 300,
|
image({
|
||||||
height: 300,
|
imageUrl,
|
||||||
isBlur: true,
|
width: 300,
|
||||||
border: {
|
height: 300,
|
||||||
width: 2,
|
isBlur: true,
|
||||||
color: Color.GRAY,
|
border: {
|
||||||
},
|
width: 2,
|
||||||
scaleType: ScaleType.ScaleToFill,
|
color: Color.GRAY,
|
||||||
layoutConfig: layoutConfig().just(),
|
},
|
||||||
loadCallback: (ret) => {
|
scaleType: ScaleType.ScaleToFill,
|
||||||
}
|
layoutConfig: layoutConfig().just(),
|
||||||
}),
|
loadCallback: (ret) => {
|
||||||
label('ScaleAspectFit'),
|
}
|
||||||
image({
|
}),
|
||||||
imageUrl,
|
label('ScaleAspectFit'),
|
||||||
width: 300,
|
image({
|
||||||
height: 300,
|
imageUrl,
|
||||||
border: {
|
width: 300,
|
||||||
width: 2,
|
height: 300,
|
||||||
color: Color.GRAY,
|
border: {
|
||||||
},
|
width: 2,
|
||||||
scaleType: ScaleType.ScaleAspectFit,
|
color: Color.GRAY,
|
||||||
layoutConfig: layoutConfig().just(),
|
},
|
||||||
}),
|
scaleType: ScaleType.ScaleAspectFit,
|
||||||
label('ScaleAspectFill'),
|
layoutConfig: layoutConfig().just(),
|
||||||
image({
|
}),
|
||||||
imageUrl,
|
label('ScaleAspectFill'),
|
||||||
width: 300,
|
image({
|
||||||
height: 300,
|
imageUrl,
|
||||||
border: {
|
width: 300,
|
||||||
width: 2,
|
height: 300,
|
||||||
color: Color.GRAY,
|
border: {
|
||||||
},
|
width: 2,
|
||||||
scaleType: ScaleType.ScaleAspectFill,
|
color: Color.GRAY,
|
||||||
layoutConfig: layoutConfig().just(),
|
},
|
||||||
}),
|
scaleType: ScaleType.ScaleAspectFill,
|
||||||
label('ImageBase64'),
|
layoutConfig: layoutConfig().just(),
|
||||||
image({
|
}),
|
||||||
imageBase64: img_base64,
|
label('ImageBase64'),
|
||||||
width: 300,
|
image({
|
||||||
height: 300,
|
imageBase64: img_base64,
|
||||||
border: {
|
width: 300,
|
||||||
width: 2,
|
height: 300,
|
||||||
color: Color.GRAY,
|
border: {
|
||||||
},
|
width: 2,
|
||||||
scaleType: ScaleType.ScaleAspectFill,
|
color: Color.GRAY,
|
||||||
layoutConfig: layoutConfig().just(),
|
},
|
||||||
}),
|
scaleType: ScaleType.ScaleAspectFill,
|
||||||
]).apply({
|
layoutConfig: layoutConfig().just(),
|
||||||
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
|
}),
|
||||||
gravity: gravity().center(),
|
],
|
||||||
space: 10,
|
{
|
||||||
} as IVLayout)).apply({
|
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
|
||||||
layoutConfig: layoutConfig().most(),
|
gravity: gravity().center(),
|
||||||
}).in(rootView)
|
space: 10,
|
||||||
|
}),
|
||||||
|
{
|
||||||
|
layoutConfig: layoutConfig().most(),
|
||||||
|
}
|
||||||
|
).in(rootView)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -4,44 +4,46 @@ import { title, colors } from "./utils";
|
|||||||
class InputDemo extends Panel {
|
class InputDemo extends Panel {
|
||||||
build(root: Group) {
|
build(root: Group) {
|
||||||
scroller(
|
scroller(
|
||||||
vlayout([
|
vlayout(
|
||||||
title("Input Demo"),
|
[
|
||||||
(new Input).also(it => {
|
title("Input Demo"),
|
||||||
it.layoutConfig = layoutConfig().just().configHeight(LayoutSpec.FIT)
|
(new Input).also(it => {
|
||||||
it.width = 300
|
it.layoutConfig = layoutConfig().just().configHeight(LayoutSpec.FIT)
|
||||||
it.multiline = false
|
it.width = 300
|
||||||
it.hintText = "HintText"
|
it.multiline = false
|
||||||
it.textAlignment = Gravity.Left
|
it.hintText = "HintText"
|
||||||
it.onTextChange = (s) => {
|
it.textAlignment = Gravity.Left
|
||||||
log(`onTextChange:${s}`)
|
it.onTextChange = (s) => {
|
||||||
}
|
log(`onTextChange:${s}`)
|
||||||
it.onFocusChange = (f) => {
|
}
|
||||||
log(`onFocusChange:${f}`)
|
it.onFocusChange = (f) => {
|
||||||
}
|
log(`onFocusChange:${f}`)
|
||||||
}),
|
}
|
||||||
(new Input).also(it => {
|
}),
|
||||||
it.layoutConfig = layoutConfig().fit()
|
(new Input).also(it => {
|
||||||
it.hintText = "HintText"
|
it.layoutConfig = layoutConfig().fit()
|
||||||
it.hintTextColor = colors[2]
|
it.hintText = "HintText"
|
||||||
it.textAlignment = Gravity.Left
|
it.hintTextColor = colors[2]
|
||||||
it.textColor = colors[3]
|
it.textAlignment = Gravity.Left
|
||||||
it.onTextChange = (s) => {
|
it.textColor = colors[3]
|
||||||
log(`onTextChange:${s}`)
|
it.onTextChange = (s) => {
|
||||||
}
|
log(`onTextChange:${s}`)
|
||||||
it.onFocusChange = (f) => {
|
}
|
||||||
log(`onFocusChange:${f}`)
|
it.onFocusChange = (f) => {
|
||||||
}
|
log(`onFocusChange:${f}`)
|
||||||
it.backgroundColor = colors[1].alpha(0.3)
|
}
|
||||||
}),
|
it.backgroundColor = colors[1].alpha(0.3)
|
||||||
])
|
}),
|
||||||
.also(it => {
|
],
|
||||||
it.space = 10
|
{
|
||||||
it.layoutConfig = layoutConfig().most().configHeight(LayoutSpec.FIT)
|
space: 10,
|
||||||
}))
|
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT)
|
||||||
.apply({
|
}
|
||||||
|
),
|
||||||
|
{
|
||||||
layoutConfig: layoutConfig().most()
|
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 = [
|
const colors = [
|
||||||
"#f0932b",
|
"#f0932b",
|
||||||
@ -11,459 +11,500 @@ const colors = [
|
|||||||
]
|
]
|
||||||
|
|
||||||
function box(idx = 0) {
|
function box(idx = 0) {
|
||||||
return (new Stack).also(it => {
|
return stack([], {
|
||||||
it.width = it.height = 20
|
width: 20,
|
||||||
it.backgroundColor = Color.parse(colors[idx || 0])
|
height: 20,
|
||||||
|
layoutConfig: layoutConfig().just(),
|
||||||
|
backgroundColor: Color.parse(colors[idx || 0])
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function boxStr(str: string, idx = 0) {
|
function boxStr(str: string, idx = 0) {
|
||||||
return (new Text).also(it => {
|
return text({
|
||||||
it.width = it.height = 20
|
width: 20,
|
||||||
it.text = str
|
height: 20,
|
||||||
it.textColor = Color.parse('#ffffff')
|
text: str,
|
||||||
it.backgroundColor = Color.parse(colors[idx || 0])
|
textColor: Color.WHITE,
|
||||||
|
layoutConfig: layoutConfig().just(),
|
||||||
|
backgroundColor: Color.parse(colors[idx || 0])
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function label(str: string) {
|
function label(str: string) {
|
||||||
return text({
|
return text({
|
||||||
text: str,
|
text: str,
|
||||||
textSize: 16,
|
textSize: 16,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@Entry
|
@Entry
|
||||||
class LayoutDemo extends Panel {
|
class LayoutDemo extends Panel {
|
||||||
build(rootView: Group) {
|
build(rootView: Group) {
|
||||||
scroller(
|
scroller(
|
||||||
hlayout([
|
hlayout(
|
||||||
vlayout([
|
[
|
||||||
label("Horizontal Layout(Align to Top)"),
|
vlayout(
|
||||||
hlayout([
|
|
||||||
box().apply({
|
|
||||||
height: 20
|
|
||||||
}),
|
|
||||||
box().apply({
|
|
||||||
height: 40
|
|
||||||
}),
|
|
||||||
box().apply({
|
|
||||||
height: 60
|
|
||||||
}),
|
|
||||||
box().apply({
|
|
||||||
height: 40
|
|
||||||
}),
|
|
||||||
box().apply({
|
|
||||||
height: 20
|
|
||||||
}),
|
|
||||||
]).also(it => {
|
|
||||||
it.space = 20
|
|
||||||
}),
|
|
||||||
label("Horizontal Layout(Align to Bottom)"),
|
|
||||||
hlayout([
|
|
||||||
box().apply({
|
|
||||||
height: 20
|
|
||||||
}),
|
|
||||||
box().apply({
|
|
||||||
height: 40
|
|
||||||
}),
|
|
||||||
box().apply({
|
|
||||||
height: 60
|
|
||||||
}),
|
|
||||||
box().apply({
|
|
||||||
height: 40
|
|
||||||
}),
|
|
||||||
box().apply({
|
|
||||||
height: 20
|
|
||||||
}),
|
|
||||||
]).also(it => {
|
|
||||||
it.space = 20
|
|
||||||
it.gravity = gravity().bottom()
|
|
||||||
}),
|
|
||||||
label("Horizontal Layout(Align to Center)"),
|
|
||||||
hlayout([
|
|
||||||
box().apply({
|
|
||||||
height: 20
|
|
||||||
}),
|
|
||||||
box().apply({
|
|
||||||
height: 40
|
|
||||||
}),
|
|
||||||
box().apply({
|
|
||||||
height: 60
|
|
||||||
}),
|
|
||||||
box().apply({
|
|
||||||
height: 40
|
|
||||||
}),
|
|
||||||
box().apply({
|
|
||||||
height: 20
|
|
||||||
}),
|
|
||||||
]).also(it => {
|
|
||||||
it.space = 20
|
|
||||||
it.gravity = gravity().center()
|
|
||||||
}),
|
|
||||||
label("Horizontal Layout(Weight)"),
|
|
||||||
hlayout(
|
|
||||||
[
|
[
|
||||||
boxStr('weight=1', 3).apply({
|
label("Horizontal Layout(Align to Top)"),
|
||||||
layoutConfig: {
|
hlayout(
|
||||||
widthSpec: LayoutSpec.JUST,
|
[
|
||||||
heightSpec: LayoutSpec.JUST,
|
box().apply({
|
||||||
weight: 1,
|
height: 20
|
||||||
|
}),
|
||||||
|
box().apply({
|
||||||
|
height: 40
|
||||||
|
}),
|
||||||
|
box().apply({
|
||||||
|
height: 60
|
||||||
|
}),
|
||||||
|
box().apply({
|
||||||
|
height: 40
|
||||||
|
}),
|
||||||
|
box().apply({
|
||||||
|
height: 20
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
{
|
||||||
|
space: 20
|
||||||
}
|
}
|
||||||
}),
|
),
|
||||||
box(2),
|
label("Horizontal Layout(Align to Bottom)"),
|
||||||
box(4),
|
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,
|
space: 20,
|
||||||
height: 30,
|
gravity: Gravity.Center
|
||||||
layoutConfig: {
|
}
|
||||||
widthSpec: LayoutSpec.JUST,
|
),
|
||||||
heightSpec: LayoutSpec.JUST,
|
vlayout(
|
||||||
},
|
|
||||||
backgroundColor: Color.parse('#eeeeee'),
|
|
||||||
gravity: gravity().center(),
|
|
||||||
}),
|
|
||||||
hlayout(
|
|
||||||
[
|
[
|
||||||
box(3),
|
label("Vertical Layout(Algin to Left)"),
|
||||||
boxStr('weight=1', 2).apply({
|
vlayout(
|
||||||
layoutConfig: {
|
[
|
||||||
widthSpec: LayoutSpec.JUST,
|
box(1).apply({
|
||||||
heightSpec: LayoutSpec.JUST,
|
width: 20
|
||||||
weight: 1,
|
}),
|
||||||
}
|
box(1).apply({
|
||||||
}),
|
width: 40
|
||||||
box(4),
|
}),
|
||||||
|
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,
|
space: 20,
|
||||||
height: 30,
|
gravity: Gravity.Left
|
||||||
layoutConfig: {
|
})
|
||||||
widthSpec: LayoutSpec.JUST,
|
],
|
||||||
heightSpec: LayoutSpec.JUST,
|
{
|
||||||
},
|
space: 20
|
||||||
backgroundColor: Color.parse('#eeeeee'),
|
|
||||||
gravity: gravity().center(),
|
|
||||||
}
|
|
||||||
),
|
|
||||||
hlayout(
|
|
||||||
[
|
|
||||||
box(3),
|
|
||||||
box(2),
|
|
||||||
boxStr('weight=1', 4).apply({
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: LayoutSpec.JUST,
|
|
||||||
heightSpec: LayoutSpec.JUST,
|
|
||||||
weight: 1,
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
{
|
|
||||||
width: 200,
|
|
||||||
height: 30,
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: LayoutSpec.JUST,
|
|
||||||
heightSpec: LayoutSpec.JUST,
|
|
||||||
},
|
|
||||||
backgroundColor: Color.parse('#eeeeee'),
|
|
||||||
gravity: gravity().center(),
|
|
||||||
}
|
|
||||||
),
|
|
||||||
hlayout([
|
|
||||||
boxStr('weight=1', 3).apply({
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: LayoutSpec.JUST,
|
|
||||||
heightSpec: LayoutSpec.JUST,
|
|
||||||
weight: 1,
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
boxStr('weight=1', 2).apply({
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: LayoutSpec.JUST,
|
|
||||||
heightSpec: LayoutSpec.JUST,
|
|
||||||
weight: 1,
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
box(4),
|
|
||||||
],
|
|
||||||
{
|
|
||||||
width: 200,
|
|
||||||
height: 30,
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: LayoutSpec.JUST,
|
|
||||||
heightSpec: LayoutSpec.JUST,
|
|
||||||
},
|
|
||||||
backgroundColor: Color.parse('#eeeeee'),
|
|
||||||
gravity: gravity().center(),
|
|
||||||
}
|
|
||||||
),
|
|
||||||
hlayout([
|
|
||||||
boxStr('weight=1', 3).apply({
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: LayoutSpec.JUST,
|
|
||||||
heightSpec: LayoutSpec.JUST,
|
|
||||||
weight: 1,
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
boxStr('weight=1', 2).apply({
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: LayoutSpec.JUST,
|
|
||||||
heightSpec: LayoutSpec.JUST,
|
|
||||||
weight: 1,
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
boxStr('weight=1', 4).apply({
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: LayoutSpec.JUST,
|
|
||||||
heightSpec: LayoutSpec.JUST,
|
|
||||||
weight: 1,
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
]).apply({
|
|
||||||
width: 200,
|
|
||||||
height: 30,
|
|
||||||
layoutConfig: {
|
|
||||||
widthSpec: LayoutSpec.JUST,
|
|
||||||
heightSpec: LayoutSpec.JUST,
|
|
||||||
},
|
|
||||||
backgroundColor: Color.parse('#eeeeee'),
|
|
||||||
gravity: gravity().center(),
|
|
||||||
} as IHLayout),
|
|
||||||
]).also(it => {
|
|
||||||
it.space = 20
|
|
||||||
it.gravity = gravity().center()
|
|
||||||
}),
|
}),
|
||||||
vlayout([
|
{
|
||||||
label("Vertical Layout(Algin to Left)"),
|
layoutConfig: layoutConfig().most()
|
||||||
vlayout([
|
}
|
||||||
box(1).apply({
|
).in(rootView)
|
||||||
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)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -5,121 +5,120 @@ class ListPanel extends Panel {
|
|||||||
build(rootView: Group): void {
|
build(rootView: Group): void {
|
||||||
let refreshView: Refreshable
|
let refreshView: Refreshable
|
||||||
let offset = Math.ceil(Math.random() * colors.length)
|
let offset = Math.ceil(Math.random() * colors.length)
|
||||||
vlayout([
|
vlayout(
|
||||||
text({
|
[
|
||||||
text: "ListDemo",
|
text({
|
||||||
layoutConfig: {
|
text: "ListDemo",
|
||||||
widthSpec: LayoutSpec.MOST,
|
layoutConfig: {
|
||||||
heightSpec: LayoutSpec.JUST,
|
widthSpec: LayoutSpec.MOST,
|
||||||
},
|
heightSpec: LayoutSpec.JUST,
|
||||||
textSize: 30,
|
},
|
||||||
textColor: Color.parse("#535c68"),
|
textSize: 30,
|
||||||
backgroundColor: Color.parse("#dff9fb"),
|
textColor: Color.parse("#535c68"),
|
||||||
textAlignment: gravity().center(),
|
backgroundColor: Color.parse("#dff9fb"),
|
||||||
height: 50,
|
textAlignment: gravity().center(),
|
||||||
}),
|
height: 50,
|
||||||
refreshView = refreshable({
|
}),
|
||||||
onRefresh: () => {
|
refreshView = refreshable({
|
||||||
refreshView.setRefreshing(context, false).then(() => {
|
onRefresh: () => {
|
||||||
(refreshView.content as List).also(it => {
|
refreshView.setRefreshing(context, false).then(() => {
|
||||||
it.reset()
|
(refreshView.content as List).also(it => {
|
||||||
offset = Math.ceil(Math.random() * colors.length)
|
it.reset()
|
||||||
it.itemCount = 40
|
offset = Math.ceil(Math.random() * colors.length)
|
||||||
it.loadMore = true
|
it.itemCount = 40
|
||||||
it.onLoadMore = () => {
|
it.loadMore = true
|
||||||
setTimeout(() => {
|
it.onLoadMore = () => {
|
||||||
it.itemCount += 10
|
setTimeout(() => {
|
||||||
}, 1000)
|
it.itemCount += 10
|
||||||
}
|
}, 1000)
|
||||||
it.loadMoreView = listItem(text({
|
}
|
||||||
text: "Loading",
|
it.loadMoreView = listItem(text({
|
||||||
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.JUST).configAlignment(Gravity.Center),
|
text: "Loading",
|
||||||
height: 50,
|
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.JUST).configAlignment(Gravity.Center),
|
||||||
}))
|
height: 50,
|
||||||
it.renderItem = (idx: number) => {
|
}))
|
||||||
let counter!: Text
|
it.renderItem = (idx: number) => {
|
||||||
return listItem(
|
let counter!: Text
|
||||||
hlayout([
|
return listItem(
|
||||||
text({
|
hlayout([
|
||||||
layoutConfig: {
|
text({
|
||||||
widthSpec: LayoutSpec.FIT,
|
layoutConfig: {
|
||||||
heightSpec: LayoutSpec.JUST,
|
widthSpec: LayoutSpec.FIT,
|
||||||
alignment: gravity().center(),
|
heightSpec: LayoutSpec.JUST,
|
||||||
},
|
alignment: gravity().center(),
|
||||||
text: `Cell At Line ${idx}`,
|
},
|
||||||
textAlignment: gravity().center(),
|
text: `Cell At Line ${idx}`,
|
||||||
textColor: Color.parse("#ffffff"),
|
textAlignment: gravity().center(),
|
||||||
textSize: 20,
|
textColor: Color.parse("#ffffff"),
|
||||||
height: 50,
|
textSize: 20,
|
||||||
}),
|
height: 50,
|
||||||
text({
|
}),
|
||||||
textColor: Color.parse("#ffffff"),
|
text({
|
||||||
textSize: 20,
|
textColor: Color.parse("#ffffff"),
|
||||||
text: "",
|
textSize: 20,
|
||||||
}).also(it => {
|
text: "",
|
||||||
counter = it
|
}).also(it => {
|
||||||
|
counter = it
|
||||||
|
it.layoutConfig = {
|
||||||
|
widthSpec: LayoutSpec.FIT,
|
||||||
|
heightSpec: LayoutSpec.FIT,
|
||||||
|
margin: {
|
||||||
|
left: 10,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
]).also(it => {
|
||||||
it.layoutConfig = {
|
it.layoutConfig = {
|
||||||
widthSpec: LayoutSpec.FIT,
|
widthSpec: LayoutSpec.MOST,
|
||||||
heightSpec: LayoutSpec.FIT,
|
heightSpec: LayoutSpec.FIT,
|
||||||
margin: {
|
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 = {
|
it.layoutConfig = {
|
||||||
widthSpec: LayoutSpec.MOST,
|
widthSpec: LayoutSpec.MOST,
|
||||||
heightSpec: LayoutSpec.FIT,
|
heightSpec: LayoutSpec.FIT,
|
||||||
margin: {
|
|
||||||
bottom: 2,
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
it.gravity = gravity().center()
|
|
||||||
it.backgroundColor = colors[(idx + offset) % colors.length]
|
|
||||||
let clicked = 0
|
|
||||||
it.onClick = () => {
|
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,
|
layoutConfig: layoutConfig().most(),
|
||||||
heightSpec: LayoutSpec.MOST,
|
backgroundColor: Color.WHITE
|
||||||
}
|
}).in(rootView)
|
||||||
it.backgroundColor = Color.WHITE
|
|
||||||
}).in(rootView)
|
|
||||||
refreshView.backgroundColor = Color.YELLOW
|
refreshView.backgroundColor = Color.YELLOW
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -4,147 +4,153 @@ import { colors, label } from "./utils";
|
|||||||
@Entry
|
@Entry
|
||||||
class ModalDemo extends Panel {
|
class ModalDemo extends Panel {
|
||||||
build(rootView: Group): void {
|
build(rootView: Group): void {
|
||||||
scroller(vlayout([
|
scroller(
|
||||||
text({
|
vlayout(
|
||||||
text: "Modal",
|
[
|
||||||
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
|
text({
|
||||||
textSize: 30,
|
text: "Modal",
|
||||||
textColor: Color.WHITE,
|
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
|
||||||
backgroundColor: colors[1],
|
textSize: 30,
|
||||||
textAlignment: Gravity.Center,
|
textColor: Color.WHITE,
|
||||||
height: 50,
|
backgroundColor: colors[1],
|
||||||
}),
|
textAlignment: Gravity.Center,
|
||||||
label('toast on bottom'),
|
height: 50,
|
||||||
label('Click me').apply({
|
}),
|
||||||
width: 200,
|
label('toast on bottom'),
|
||||||
height: 50,
|
label('Click me').apply({
|
||||||
backgroundColor: colors[0],
|
width: 200,
|
||||||
textSize: 30,
|
height: 50,
|
||||||
textColor: Color.WHITE,
|
backgroundColor: colors[0],
|
||||||
layoutConfig: layoutConfig().just(),
|
textSize: 30,
|
||||||
onClick: () => {
|
textColor: Color.WHITE,
|
||||||
modal(context).toast('This is a toast.')
|
layoutConfig: layoutConfig().just(),
|
||||||
}
|
onClick: () => {
|
||||||
} as IText),
|
modal(context).toast('This is a toast.')
|
||||||
label('toast on top'),
|
}
|
||||||
label('Click me').apply({
|
} as IText),
|
||||||
width: 200,
|
label('toast on top'),
|
||||||
height: 50,
|
label('Click me').apply({
|
||||||
backgroundColor: colors[0],
|
width: 200,
|
||||||
textSize: 30,
|
height: 50,
|
||||||
textColor: Color.WHITE,
|
backgroundColor: colors[0],
|
||||||
layoutConfig: layoutConfig().just(),
|
textSize: 30,
|
||||||
onClick: () => {
|
textColor: Color.WHITE,
|
||||||
modal(context).toast('This is a toast.', Gravity.Top)
|
layoutConfig: layoutConfig().just(),
|
||||||
}
|
onClick: () => {
|
||||||
} as IText),
|
modal(context).toast('This is a toast.', Gravity.Top)
|
||||||
|
}
|
||||||
|
} as IText),
|
||||||
|
|
||||||
label('toast on center'),
|
label('toast on center'),
|
||||||
label('Click me').apply({
|
label('Click me').apply({
|
||||||
width: 200,
|
width: 200,
|
||||||
height: 50,
|
height: 50,
|
||||||
backgroundColor: colors[0],
|
backgroundColor: colors[0],
|
||||||
textSize: 30,
|
textSize: 30,
|
||||||
textColor: Color.WHITE,
|
textColor: Color.WHITE,
|
||||||
layoutConfig: layoutConfig().just(),
|
layoutConfig: layoutConfig().just(),
|
||||||
onClick: () => {
|
onClick: () => {
|
||||||
modal(context).toast('This is a toast.', Gravity.Center)
|
modal(context).toast('This is a toast.', Gravity.Center)
|
||||||
|
}
|
||||||
|
} as IText),
|
||||||
|
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().most(),
|
||||||
layoutConfig: layoutConfig().configWidth(LayoutSpec.MOST),
|
}
|
||||||
textSize: 30,
|
).in(rootView)
|
||||||
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)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -7,28 +7,29 @@ class ScrollerPanel extends Panel {
|
|||||||
scroller(
|
scroller(
|
||||||
vlayout([
|
vlayout([
|
||||||
scroller(
|
scroller(
|
||||||
vlayout(new Array(100).fill(1).map(e => label('Scroll Content')))
|
vlayout(new Array(100).fill(1).map(e => label('Scroll Content'))),
|
||||||
).apply({
|
{
|
||||||
layoutConfig: layoutConfig().just(),
|
layoutConfig: layoutConfig().just(),
|
||||||
width: 300,
|
width: 300,
|
||||||
height: 500,
|
height: 500,
|
||||||
backgroundColor: Color.RED,
|
backgroundColor: Color.RED,
|
||||||
}),
|
}
|
||||||
|
),
|
||||||
scroller(
|
scroller(
|
||||||
vlayout(new Array(100).fill(1).map(e => label('Scroll Content')))
|
vlayout(new Array(100).fill(1).map(e => label('Scroll Content'))),
|
||||||
).apply({
|
{
|
||||||
layoutConfig: layoutConfig().just(),
|
layoutConfig: layoutConfig().just(),
|
||||||
width: 300,
|
width: 300,
|
||||||
height: 500,
|
height: 500,
|
||||||
backgroundColor: Color.BLUE,
|
backgroundColor: Color.BLUE,
|
||||||
})
|
}
|
||||||
])
|
)
|
||||||
)
|
]),
|
||||||
.apply({
|
{
|
||||||
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.JUST),
|
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.JUST),
|
||||||
height: 500,
|
height: 500,
|
||||||
backgroundColor: Color.YELLOW,
|
backgroundColor: Color.YELLOW,
|
||||||
})
|
}
|
||||||
.in(rootView)
|
).in(rootView)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,4 +1,4 @@
|
|||||||
import { text, loge, log, ViewHolder, Stack, ViewModel, Gravity, Text, Color, HLayout, VLayout, Group, VMPanel, LayoutSpec, vlayout, hlayout, takeNonNull, stack } from "doric";
|
import { text, loge, log, ViewHolder, Stack, ViewModel, Gravity, Text, Color, Group, VMPanel, LayoutSpec, vlayout, hlayout, takeNonNull } from "doric";
|
||||||
|
|
||||||
type SnakeNode = {
|
type SnakeNode = {
|
||||||
x: number
|
x: number
|
||||||
|
|||||||
@ -1453,9 +1453,14 @@ function slideItem(item, config) {
|
|||||||
* See the License for the specific language governing permissions and
|
* See the License for the specific language governing permissions and
|
||||||
* limitations under the License.
|
* limitations under the License.
|
||||||
*/
|
*/
|
||||||
function scroller(content) {
|
function scroller(content, config) {
|
||||||
return (new Scroller).also(v => {
|
return (new Scroller).also(v => {
|
||||||
v.layoutConfig = layoutConfig().fit();
|
v.layoutConfig = layoutConfig().fit();
|
||||||
|
if (config) {
|
||||||
|
for (let key in config) {
|
||||||
|
Reflect.set(v, key, Reflect.get(config, key, config), v);
|
||||||
|
}
|
||||||
|
}
|
||||||
v.content = content;
|
v.content = content;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2901,9 +2901,14 @@ function slideItem(item, config) {
|
|||||||
* See the License for the specific language governing permissions and
|
* See the License for the specific language governing permissions and
|
||||||
* limitations under the License.
|
* limitations under the License.
|
||||||
*/
|
*/
|
||||||
function scroller(content) {
|
function scroller(content, config) {
|
||||||
return (new Scroller).also(v => {
|
return (new Scroller).also(v => {
|
||||||
v.layoutConfig = layoutConfig().fit();
|
v.layoutConfig = layoutConfig().fit();
|
||||||
|
if (config) {
|
||||||
|
for (let key in config) {
|
||||||
|
Reflect.set(v, key, Reflect.get(config, key, config), v);
|
||||||
|
}
|
||||||
|
}
|
||||||
v.content = content;
|
v.content = content;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
10
doric-js/index.d.ts
vendored
10
doric-js/index.d.ts
vendored
@ -486,6 +486,9 @@ declare module 'doric/lib/src/widget/list' {
|
|||||||
renderItem: (index: number) => ListItem;
|
renderItem: (index: number) => ListItem;
|
||||||
itemCount: number;
|
itemCount: number;
|
||||||
batchCount?: number;
|
batchCount?: number;
|
||||||
|
onLoadMore?: () => void;
|
||||||
|
loadMore?: boolean;
|
||||||
|
loadMoreView?: ListItem;
|
||||||
}
|
}
|
||||||
export class List extends Superview implements IList {
|
export class List extends Superview implements IList {
|
||||||
allSubviews(): IterableIterator<ListItem> | ListItem[];
|
allSubviews(): IterableIterator<ListItem> | ListItem[];
|
||||||
@ -538,9 +541,9 @@ declare module 'doric/lib/src/widget/slider' {
|
|||||||
|
|
||||||
declare module 'doric/lib/src/widget/scroller' {
|
declare module 'doric/lib/src/widget/scroller' {
|
||||||
import { Superview, View, IView, NativeViewModel } from 'doric/lib/src/ui/view';
|
import { Superview, View, IView, NativeViewModel } from 'doric/lib/src/ui/view';
|
||||||
export function scroller(content: View): Scroller;
|
export function scroller(content: View, config?: IScroller): Scroller;
|
||||||
export interface IScroller extends IView {
|
export interface IScroller extends IView {
|
||||||
content: View;
|
content?: View;
|
||||||
}
|
}
|
||||||
export class Scroller extends Superview implements IScroller {
|
export class Scroller extends Superview implements IScroller {
|
||||||
content: View;
|
content: View;
|
||||||
@ -598,6 +601,9 @@ declare module 'doric/lib/src/widget/flowlayout' {
|
|||||||
columnCount?: number;
|
columnCount?: number;
|
||||||
columnSpace?: number;
|
columnSpace?: number;
|
||||||
rowSpace?: number;
|
rowSpace?: number;
|
||||||
|
loadMore?: boolean;
|
||||||
|
onLoadMore?: () => void;
|
||||||
|
loadMoreView?: FlowLayoutItem;
|
||||||
}
|
}
|
||||||
export class FlowLayout extends Superview implements IFlowLayout {
|
export class FlowLayout extends Superview implements IFlowLayout {
|
||||||
allSubviews(): IterableIterator<FlowLayoutItem> | FlowLayoutItem[];
|
allSubviews(): IterableIterator<FlowLayoutItem> | FlowLayoutItem[];
|
||||||
|
|||||||
3
doric-js/lib/src/widget/flowlayout.d.ts
vendored
3
doric-js/lib/src/widget/flowlayout.d.ts
vendored
@ -16,6 +16,9 @@ export interface IFlowLayout extends IView {
|
|||||||
columnCount?: number;
|
columnCount?: number;
|
||||||
columnSpace?: number;
|
columnSpace?: number;
|
||||||
rowSpace?: number;
|
rowSpace?: number;
|
||||||
|
loadMore?: boolean;
|
||||||
|
onLoadMore?: () => void;
|
||||||
|
loadMoreView?: FlowLayoutItem;
|
||||||
}
|
}
|
||||||
export declare class FlowLayout extends Superview implements IFlowLayout {
|
export declare class FlowLayout extends Superview implements IFlowLayout {
|
||||||
private cachedViews;
|
private cachedViews;
|
||||||
|
|||||||
3
doric-js/lib/src/widget/list.d.ts
vendored
3
doric-js/lib/src/widget/list.d.ts
vendored
@ -13,6 +13,9 @@ export interface IList extends IView {
|
|||||||
renderItem: (index: number) => ListItem;
|
renderItem: (index: number) => ListItem;
|
||||||
itemCount: number;
|
itemCount: number;
|
||||||
batchCount?: number;
|
batchCount?: number;
|
||||||
|
onLoadMore?: () => void;
|
||||||
|
loadMore?: boolean;
|
||||||
|
loadMoreView?: ListItem;
|
||||||
}
|
}
|
||||||
export declare class List extends Superview implements IList {
|
export declare class List extends Superview implements IList {
|
||||||
private cachedViews;
|
private cachedViews;
|
||||||
|
|||||||
4
doric-js/lib/src/widget/scroller.d.ts
vendored
4
doric-js/lib/src/widget/scroller.d.ts
vendored
@ -1,7 +1,7 @@
|
|||||||
import { Superview, View, IView, NativeViewModel } from '../ui/view';
|
import { Superview, View, IView, NativeViewModel } from '../ui/view';
|
||||||
export declare function scroller(content: View): Scroller;
|
export declare function scroller(content: View, config?: IScroller): Scroller;
|
||||||
export interface IScroller extends IView {
|
export interface IScroller extends IView {
|
||||||
content: View;
|
content?: View;
|
||||||
}
|
}
|
||||||
export declare class Scroller extends Superview implements IScroller {
|
export declare class Scroller extends Superview implements IScroller {
|
||||||
content: View;
|
content: View;
|
||||||
|
|||||||
@ -15,9 +15,14 @@
|
|||||||
*/
|
*/
|
||||||
import { Superview } from '../ui/view';
|
import { Superview } from '../ui/view';
|
||||||
import { layoutConfig } from '../util/layoutconfig';
|
import { layoutConfig } from '../util/layoutconfig';
|
||||||
export function scroller(content) {
|
export function scroller(content, config) {
|
||||||
return (new Scroller).also(v => {
|
return (new Scroller).also(v => {
|
||||||
v.layoutConfig = layoutConfig().fit();
|
v.layoutConfig = layoutConfig().fit();
|
||||||
|
if (config) {
|
||||||
|
for (let key in config) {
|
||||||
|
Reflect.set(v, key, Reflect.get(config, key, config), v);
|
||||||
|
}
|
||||||
|
}
|
||||||
v.content = content;
|
v.content = content;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@ -6,10 +6,10 @@
|
|||||||
"types": "index.d.ts",
|
"types": "index.d.ts",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "echo \"Error: no test specified\" && exit 1",
|
"test": "echo \"Error: no test specified\" && exit 1",
|
||||||
"build": "tsc -d -p .&& rollup -c",
|
"build": "tsc -d -p .&& rollup -c && dts-bundle --configJson dts-bundle.json",
|
||||||
"dev": "tsc -w -p . & rollup -c -w",
|
"dev": "tsc -w -p . & rollup -c -w",
|
||||||
"clean": "rm -rf build && rm -rf bundle",
|
"clean": "rm -rf build && rm -rf bundle",
|
||||||
"prepublish": "npm run build && dts-bundle --configJson dts-bundle.json"
|
"prepublish": "npm run build"
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "https",
|
"type": "https",
|
||||||
|
|||||||
@ -42,6 +42,12 @@ export interface IFlowLayout extends IView {
|
|||||||
columnSpace?: number
|
columnSpace?: number
|
||||||
|
|
||||||
rowSpace?: number
|
rowSpace?: number
|
||||||
|
|
||||||
|
loadMore?: boolean
|
||||||
|
|
||||||
|
onLoadMore?: () => void
|
||||||
|
|
||||||
|
loadMoreView?: FlowLayoutItem
|
||||||
}
|
}
|
||||||
|
|
||||||
export class FlowLayout extends Superview implements IFlowLayout {
|
export class FlowLayout extends Superview implements IFlowLayout {
|
||||||
|
|||||||
@ -34,6 +34,9 @@ export interface IList extends IView {
|
|||||||
renderItem: (index: number) => ListItem
|
renderItem: (index: number) => ListItem
|
||||||
itemCount: number
|
itemCount: number
|
||||||
batchCount?: number
|
batchCount?: number
|
||||||
|
onLoadMore?: () => void
|
||||||
|
loadMore?: boolean
|
||||||
|
loadMoreView?: ListItem
|
||||||
}
|
}
|
||||||
|
|
||||||
export class List extends Superview implements IList {
|
export class List extends Superview implements IList {
|
||||||
|
|||||||
@ -16,15 +16,20 @@
|
|||||||
import { Superview, View, IView, NativeViewModel } from '../ui/view'
|
import { Superview, View, IView, NativeViewModel } from '../ui/view'
|
||||||
import { layoutConfig } from '../util/layoutconfig'
|
import { layoutConfig } from '../util/layoutconfig'
|
||||||
|
|
||||||
export function scroller(content: View) {
|
export function scroller(content: View, config?: IScroller) {
|
||||||
return (new Scroller).also(v => {
|
return (new Scroller).also(v => {
|
||||||
v.layoutConfig = layoutConfig().fit()
|
v.layoutConfig = layoutConfig().fit()
|
||||||
|
if (config) {
|
||||||
|
for (let key in config) {
|
||||||
|
Reflect.set(v, key, Reflect.get(config, key, config), v)
|
||||||
|
}
|
||||||
|
}
|
||||||
v.content = content
|
v.content = content
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface IScroller extends IView {
|
export interface IScroller extends IView {
|
||||||
content: View
|
content?: View
|
||||||
}
|
}
|
||||||
|
|
||||||
export class Scroller extends Superview implements IScroller {
|
export class Scroller extends Superview implements IScroller {
|
||||||
|
|||||||
Reference in New Issue
Block a user