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

294
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";
function grid(title: string, view: View) {
return vlayout(
[
text({
text: title,
backgroundColor: Color.parse("#3498db"),
textColor: Color.WHITE,
textAlignment: Gravity.CenterX,
layoutConfig: {
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.JUST,
},
height: 30
}),
stack(
[
view
],
{
layoutConfig: layoutConfig().just(),
width: 300,
height: 300,
backgroundColor: Color.parse("#ecf0f1"),
})
])
}
function content() {
return stack(
[],
{
layoutConfig: {
widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.JUST,
margin: {
left: 10,
right: 10,
top: 10,
bottom: 10
}
},
width: 100,
height: 100,
backgroundColor: Color.parse("#34495e")
})
}
function case1() {
return 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(
[],
{
layoutConfig: layoutConfig().most(),
backgroundColor: Color.parse("#1abc9c")
}),
content(),
],
{
layoutConfig: layoutConfig().fit(),
padding: {
left: 10, right: 10,
top: 10, bottom: 10
},
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 @Entry
class LayoutTest extends Panel { class LayoutTest extends Panel {
build(root: Group) { build(root: Group) {
vlayout( scroller(
[ vlayout(
text({ [
text: "Fit -> Most", grid(
"Stack fit -> most -> just",
case1(),
),
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(),
),
],
{
layoutConfig: { layoutConfig: {
widthSpec: LayoutSpec.MOST, widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.JUST, heightSpec: LayoutSpec.FIT,
}, },
textSize: 30, gravity: Gravity.CenterX,
textColor: Color.parse("#535c68"), space: 20,
backgroundColor: Color.parse("#dff9fb"),
textAlignment: gravity().center(),
height: 50,
}), }),
stack(
[
stack(
[
text({
text: "This is a stack content xxxxx",
textSize: 20,
textColor: Color.WHITE,
}),
],
{
layoutConfig: layoutConfig().most(),
backgroundColor: Color.BLUE
}
),
stack(
[
text({
text: "This is a stack content 000000000",
textSize: 20,
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: {
widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.FIT,
},
backgroundColor: Color.RED
}),
stack(
[
stack(
[],
{
layoutConfig: layoutConfig().most(),
backgroundColor: Color.BLUE
}
),
text({
text: "This is a stack content",
textSize: 20,
textColor: Color.WHITE,
}),
],
{
layoutConfig: {
widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.FIT,
},
backgroundColor: Color.RED
}),
vlayout(
[
stack(
[],
{
layoutConfig: layoutConfig().most(),
backgroundColor: Color.BLUE
}
),
text({
text: "This is a vlayout content",
textSize: 20,
textColor: Color.WHITE,
}),
],
{
layoutConfig: {
widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.FIT,
},
backgroundColor: Color.RED
})
],
{ {
layoutConfig: { layoutConfig: layoutConfig().most(),
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.FIT,
},
space: 20,
}).in(root) }).in(root)
} }
} }