feat:add LayoutDemo
This commit is contained in:
pengfei.zhou
@@ -4,4 +4,5 @@ export default [
|
||||
'src/ListDemo',
|
||||
'src/ScrollerDemo',
|
||||
'src/SliderDemo',
|
||||
'src/LayoutDemo',
|
||||
]
|
||||
464
demo/src/LayoutDemo.ts
Normal file
464
demo/src/LayoutDemo.ts
Normal file
@@ -0,0 +1,464 @@
|
||||
|
||||
import { Group, Panel, Text, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout, Gravity, hlayout, slider, slideItem, scroller, IVLayout, IHLayout } from "doric";
|
||||
import { O_TRUNC } from "constants";
|
||||
|
||||
const colors = [
|
||||
"#f0932b",
|
||||
"#eb4d4b",
|
||||
"#6ab04c",
|
||||
"#e056fd",
|
||||
"#686de0",
|
||||
"#30336b",
|
||||
]
|
||||
|
||||
function box(idx = 0) {
|
||||
return (new Stack).also(it => {
|
||||
it.width = it.height = 20
|
||||
it.bgColor = Color.parse(colors[idx || 0])
|
||||
})
|
||||
}
|
||||
function boxStr(str: string, idx = 0) {
|
||||
return (new Text).also(it => {
|
||||
it.width = it.height = 20
|
||||
it.text = str
|
||||
it.textColor = Color.parse('#ffffff')
|
||||
it.bgColor = Color.parse(colors[idx || 0])
|
||||
})
|
||||
}
|
||||
function label(str: string) {
|
||||
return text({
|
||||
text: str,
|
||||
textSize: 16,
|
||||
})
|
||||
}
|
||||
@Entry
|
||||
class LayoutDemo extends Panel {
|
||||
build(rootView: Group) {
|
||||
scroller(
|
||||
hlayout([
|
||||
vlayout([
|
||||
label("Horizontal Layout(Align to Top)"),
|
||||
hlayout([
|
||||
box().apply({
|
||||
height: 20
|
||||
}),
|
||||
box().apply({
|
||||
height: 40
|
||||
}),
|
||||
box().apply({
|
||||
height: 60
|
||||
}),
|
||||
box().apply({
|
||||
height: 40
|
||||
}),
|
||||
box().apply({
|
||||
height: 20
|
||||
}),
|
||||
]).also(it => {
|
||||
it.space = 20
|
||||
}),
|
||||
label("Horizontal Layout(Align to Bottom)"),
|
||||
hlayout([
|
||||
box().apply({
|
||||
height: 20
|
||||
}),
|
||||
box().apply({
|
||||
height: 40
|
||||
}),
|
||||
box().apply({
|
||||
height: 60
|
||||
}),
|
||||
box().apply({
|
||||
height: 40
|
||||
}),
|
||||
box().apply({
|
||||
height: 20
|
||||
}),
|
||||
]).also(it => {
|
||||
it.space = 20
|
||||
it.gravity = gravity().bottom()
|
||||
}),
|
||||
label("Horizontal Layout(Align to Center)"),
|
||||
hlayout([
|
||||
box().apply({
|
||||
height: 20
|
||||
}),
|
||||
box().apply({
|
||||
height: 40
|
||||
}),
|
||||
box().apply({
|
||||
height: 60
|
||||
}),
|
||||
box().apply({
|
||||
height: 40
|
||||
}),
|
||||
box().apply({
|
||||
height: 20
|
||||
}),
|
||||
]).also(it => {
|
||||
it.space = 20
|
||||
it.gravity = gravity().center()
|
||||
}),
|
||||
label("Horizontal Layout(Weight)"),
|
||||
hlayout([
|
||||
boxStr('weight=1', 3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
box(2),
|
||||
box(4),
|
||||
]).apply({
|
||||
width: 200,
|
||||
height: 30,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
},
|
||||
bgColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
} as IHLayout),
|
||||
hlayout([
|
||||
box(3),
|
||||
boxStr('weight=1', 2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
box(4),
|
||||
]).apply({
|
||||
width: 200,
|
||||
height: 30,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
},
|
||||
bgColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
} as IHLayout),
|
||||
hlayout([
|
||||
box(3),
|
||||
box(2),
|
||||
boxStr('weight=1', 4).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
]).apply({
|
||||
width: 200,
|
||||
height: 30,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
},
|
||||
bgColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
} as IHLayout),
|
||||
hlayout([
|
||||
boxStr('weight=1', 3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
boxStr('weight=1', 2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
box(4),
|
||||
]).apply({
|
||||
width: 200,
|
||||
height: 30,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
},
|
||||
bgColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
} as IHLayout),
|
||||
hlayout([
|
||||
boxStr('weight=1', 3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
boxStr('weight=1', 2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
boxStr('weight=1', 4).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
]).apply({
|
||||
width: 200,
|
||||
height: 30,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
},
|
||||
bgColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
} as IHLayout),
|
||||
]).also(it => {
|
||||
it.space = 20
|
||||
it.gravity = gravity().center()
|
||||
}),
|
||||
vlayout([
|
||||
label("Vertical Layout(Algin to Left)"),
|
||||
vlayout([
|
||||
box(1).apply({
|
||||
width: 20
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 40
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 60
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 40
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 20
|
||||
}),
|
||||
]).apply({
|
||||
space: 20
|
||||
} as IVLayout),
|
||||
label("Vertical Layout(Algin to Right)"),
|
||||
vlayout([
|
||||
box(1).apply({
|
||||
width: 20
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 40
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 60
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 40
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 20
|
||||
}),
|
||||
]).apply({
|
||||
space: 20,
|
||||
gravity: gravity().right(),
|
||||
} as IVLayout),
|
||||
label("Vertical Layout(Algin to Center)"),
|
||||
vlayout([
|
||||
box(1).apply({
|
||||
width: 20
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 40
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 60
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 40
|
||||
}),
|
||||
box(1).apply({
|
||||
width: 20
|
||||
}),
|
||||
]).apply({
|
||||
space: 20,
|
||||
gravity: gravity().center(),
|
||||
} as IVLayout),
|
||||
label("Vertical Layout(Weight)"),
|
||||
hlayout([
|
||||
|
||||
vlayout([
|
||||
boxStr('weight=1', 3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
},
|
||||
}),
|
||||
box(2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
}
|
||||
}),
|
||||
box(4).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
}
|
||||
}),
|
||||
]).apply({
|
||||
width: 100,
|
||||
height: 200,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
},
|
||||
bgColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
} as IVLayout),
|
||||
vlayout([
|
||||
box(3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
},
|
||||
}),
|
||||
boxStr('weight=1', 2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
box(4).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
}
|
||||
}),
|
||||
]).apply({
|
||||
width: 100,
|
||||
height: 200,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
},
|
||||
bgColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
} as IVLayout),
|
||||
vlayout([
|
||||
box(3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
},
|
||||
}),
|
||||
box(2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
},
|
||||
}),
|
||||
boxStr('weight=1', 4).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
]).apply({
|
||||
width: 100,
|
||||
height: 200,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
},
|
||||
bgColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
} as IVLayout),
|
||||
vlayout([
|
||||
boxStr('weight=1', 3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
},
|
||||
}),
|
||||
boxStr('weight=1', 2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
box(4).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
}
|
||||
}),
|
||||
]).apply({
|
||||
width: 100,
|
||||
height: 200,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
},
|
||||
bgColor: Color.parse('#eeeeee'),
|
||||
gravity: gravity().center(),
|
||||
} as IVLayout),
|
||||
vlayout([
|
||||
boxStr('weight=1', 3).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
},
|
||||
}),
|
||||
boxStr('weight=1', 2).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
boxStr('weight=1', 4).apply({
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.AT_MOST,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
weight: 1,
|
||||
}
|
||||
}),
|
||||
]).apply({
|
||||
width: 100,
|
||||
height: 200,
|
||||
layoutConfig: {
|
||||
widthSpec: LayoutSpec.EXACTLY,
|
||||
heightSpec: LayoutSpec.EXACTLY,
|
||||
},
|
||||
bgColor: 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 = {
|
||||
widthSpec: LayoutSpec.WRAP_CONTENT,
|
||||
heightSpec: LayoutSpec.WRAP_CONTENT,
|
||||
alignment: gravity().centerX(),
|
||||
}
|
||||
})
|
||||
.in(rootView)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user