feat: update LayoutTestDemo

This commit is contained in:
pengfei.zhou 2021-05-08 10:29:52 +08:00 committed by osborn
parent f53f57ccd9
commit 7ebfeb7b24

View File

@ -1,4 +1,4 @@
import { Panel, Group, vlayout, LayoutSpec, text, Color, gravity, stack, layoutConfig, scroller, Gravity, View } from "doric"; import { Panel, Group, vlayout, LayoutSpec, text, Color, gravity, stack, layoutConfig, scroller, Gravity, View, hlayout } from "doric";
function grid(title: string, view: View) { function grid(title: string, view: View) {
return vlayout( return vlayout(
@ -28,7 +28,13 @@ function grid(title: string, view: View) {
} }
function content() { function content() {
return stack( return [
text({
text: "Content",
textColor: Color.WHITE,
backgroundColor: Color.parse("#34495e"),
}),
stack(
[], [],
{ {
layoutConfig: { layoutConfig: {
@ -45,6 +51,7 @@ function content() {
height: 100, height: 100,
backgroundColor: Color.parse("#34495e") backgroundColor: Color.parse("#34495e")
}) })
]
} }
function case1() { function case1() {
@ -52,10 +59,11 @@ function case1() {
[ [
stack( stack(
[ [
content(), ...content(),
], ],
{ {
layoutConfig: layoutConfig().most(), layoutConfig: layoutConfig().most(),
backgroundColor: Color.parse("#1abc9c")
}) })
], ],
{ {
@ -78,7 +86,7 @@ function case2() {
layoutConfig: layoutConfig().most(), layoutConfig: layoutConfig().most(),
backgroundColor: Color.parse("#1abc9c") backgroundColor: Color.parse("#1abc9c")
}), }),
content(), ...content(),
], ],
{ {
layoutConfig: layoutConfig().fit(), layoutConfig: layoutConfig().fit(),
@ -161,6 +169,108 @@ class LayoutTest extends Panel {
scroller( scroller(
vlayout( vlayout(
[ [
grid(
"VLayout fit -> most -> just",
vlayout(
[
stack(
[
...content(),
],
{
layoutConfig: layoutConfig().most(),
backgroundColor: Color.parse("#1abc9c"),
padding: {
left: 10, right: 10,
top: 10, bottom: 10,
}
})
],
{
layoutConfig: layoutConfig().fit(),
backgroundColor: Color.parse("#9b59b6"),
padding: {
left: 10, right: 10,
top: 10, bottom: 10,
}
})
),
grid(
"VLayout fit -> most, just",
vlayout(
[
stack(
[],
{
layoutConfig: layoutConfig().most(),
backgroundColor: Color.parse("#1abc9c"),
padding: {
left: 10, right: 10,
top: 10, bottom: 10,
}
}),
...content(),
],
{
layoutConfig: layoutConfig().fit(),
backgroundColor: Color.parse("#9b59b6"),
padding: {
left: 10, right: 10,
top: 10, bottom: 10,
}
})
),
grid(
"HLayout fit -> most -> just",
hlayout(
[
stack(
[
...content(),
],
{
layoutConfig: layoutConfig().most(),
backgroundColor: Color.parse("#1abc9c"),
padding: {
left: 10, right: 10,
top: 10, bottom: 10,
}
})
],
{
layoutConfig: layoutConfig().fit(),
backgroundColor: Color.parse("#9b59b6"),
padding: {
left: 10, right: 10,
top: 10, bottom: 10,
}
})
),
grid(
"HLayout fit -> most, just",
hlayout(
[
stack(
[],
{
layoutConfig: layoutConfig().most(),
backgroundColor: Color.parse("#1abc9c"),
padding: {
left: 10, right: 10,
top: 10, bottom: 10,
}
}),
...content(),
],
{
layoutConfig: layoutConfig().fit(),
backgroundColor: Color.parse("#9b59b6"),
padding: {
left: 10, right: 10,
top: 10, bottom: 10,
}
})
),
grid( grid(
"Stack fit -> most -> just", "Stack fit -> most -> just",
case1(), case1(),