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

update layout test demo

Browse Source
This commit is contained in:
pengfei.zhou 2021-05-07 19:05:55 +08:00 committed by osborn
parent 98db105a73
commit f53f57ccd9
1 changed files with 189 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

240
doric-demo/src/LayoutTestDemo.ts
View File

@ -1,117 +1,201 @@
import { Panel, Group, vlayout, LayoutSpec, text, Color, gravity, stack, layoutConfig } from "doric"; import { Panel, Group, vlayout, LayoutSpec, text, Color, gravity, stack, layoutConfig, scroller, Gravity, View } from "doric";
@Entry function grid(title: string, view: View) {
class LayoutTest extends Panel { return vlayout(
build(root: Group) {
vlayout(
[ [
text({ text({
text: "Fit -> Most", text: title,
backgroundColor: Color.parse("#3498db"),
textColor: Color.WHITE,
textAlignment: Gravity.CenterX,
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.MOST, widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.JUST, heightSpec: LayoutSpec.JUST,
}, },
textSize: 30, height: 30
textColor: Color.parse("#535c68"),
backgroundColor: Color.parse("#dff9fb"),
textAlignment: gravity().center(),
height: 50,
}), }),
stack( stack(
[ [
stack( view
[
text({
text: "This is a stack content xxxxx",
textSize: 20,
textColor: Color.WHITE,
}),
], ],
{ {
layoutConfig: layoutConfig().most(), layoutConfig: layoutConfig().just(),
backgroundColor: Color.BLUE width: 300,
} height: 300,
), backgroundColor: Color.parse("#ecf0f1"),
stack( })
[ ])
text({ }
text: "This is a stack content 000000000", function content() {
textSize: 20, return stack(
textColor: Color.WHITE, [],
}),
],
{
layoutConfig: layoutConfig().most(),
backgroundColor: Color.YELLOW,
alpha: 0.1
}
),
text({
text: "This is a stack content",
textSize: 20,
textColor: Color.WHITE,
}),
],
{ {
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.FIT, widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.FIT, heightSpec: LayoutSpec.JUST,
margin: {
left: 10,
right: 10,
top: 10,
bottom: 10
}
}, },
backgroundColor: Color.RED width: 100,
}), height: 100,
backgroundColor: Color.parse("#34495e")
})
}
function case1() {
return stack(
[
stack( stack(
[
content(),
],
{
layoutConfig: layoutConfig().most(),
})
],
{
layoutConfig: layoutConfig().fit(),
padding: {
left: 10, right: 10,
top: 10, bottom: 10
},
backgroundColor: Color.parse("#9b59b6")
}
)
}
function case2() {
return stack(
[ [
stack( stack(
[], [],
{ {
layoutConfig: layoutConfig().most(), layoutConfig: layoutConfig().most(),
backgroundColor: Color.BLUE backgroundColor: Color.parse("#1abc9c")
}
),
text({
text: "This is a stack content",
textSize: 20,
textColor: Color.WHITE,
}), }),
content(),
], ],
{ {
layoutConfig: { layoutConfig: layoutConfig().fit(),
widthSpec: LayoutSpec.FIT, padding: {
heightSpec: LayoutSpec.FIT, left: 10, right: 10,
top: 10, bottom: 10
}, },
backgroundColor: Color.RED backgroundColor: Color.parse("#9b59b6")
}), }
)
}
function case3() {
return stack(
[
case1(),
],
{
layoutConfig: layoutConfig().fit(),
padding: {
left: 10, right: 10,
top: 10, bottom: 10
},
backgroundColor: Color.parse("#2ecc71")
}
)
}
function case4() {
return stack(
[
case2(),
],
{
layoutConfig: layoutConfig().fit(),
padding: {
left: 10, right: 10,
top: 10, bottom: 10
},
backgroundColor: Color.parse("#2ecc71")
}
)
}
function case5() {
return stack(
[
case3(),
],
{
layoutConfig: layoutConfig().fit(),
padding: {
left: 10, right: 10,
top: 10, bottom: 10
},
backgroundColor: Color.parse("#3498db")
}
)
}
function case6() {
return stack(
[
case3(),
],
{
layoutConfig: layoutConfig().fit(),
padding: {
left: 10, right: 10,
top: 10, bottom: 10
},
backgroundColor: Color.parse("#3498db")
}
)
}
@Entry
class LayoutTest extends Panel {
build(root: Group) {
scroller(
vlayout( vlayout(
[ [
stack( grid(
[], "Stack fit -> most -> just",
{ case1(),
layoutConfig: layoutConfig().most(), ),
backgroundColor: Color.BLUE grid(
} "Stack fit -> most, just",
case2(),
),
grid(
"Stack fit -> fit -> most -> just",
case3(),
),
grid(
"Stack fit -> fit -> most, just",
case4(),
),
grid(
"Stack fit -> fit -> fit -> most -> just",
case5(),
),
grid(
"Stack fit -> fit -> fit -> most, just",
case6(),
), ),
text({
text: "This is a vlayout content",
textSize: 20,
textColor: Color.WHITE,
}),
],
{
layoutConfig: {
widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.FIT,
},
backgroundColor: Color.RED
})
], ],
{ {
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.MOST, widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.FIT, heightSpec: LayoutSpec.FIT,
}, },
gravity: Gravity.CenterX,
space: 20, space: 20,
}),
{
layoutConfig: layoutConfig().most(),
}).in(root) }).in(root)
} }
} }