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

demo:optimize demo code

Browse Source
This commit is contained in:
pengfei.zhou
2020-01-06 10:43:18 +08:00
committed by osborn
parent 3b82935b24
commit 05b5c69080
25 changed files with 1860 additions and 1656 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
doric-demo/src/ListDemo.ts
View File

@@ -5,121 +5,120 @@ class ListPanel extends Panel {
build(rootView: Group): void {
let refreshView: Refreshable
let offset = Math.ceil(Math.random() * colors.length)
vlayout([
text({
text: "ListDemo",
layoutConfig: {
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.JUST,
},
textSize: 30,
textColor: Color.parse("#535c68"),
backgroundColor: Color.parse("#dff9fb"),
textAlignment: gravity().center(),
height: 50,
}),
refreshView = refreshable({
onRefresh: () => {
refreshView.setRefreshing(context, false).then(() => {
(refreshView.content as List).also(it => {
it.reset()
offset = Math.ceil(Math.random() * colors.length)
it.itemCount = 40
it.loadMore = true
it.onLoadMore = () => {
setTimeout(() => {
it.itemCount += 10
}, 1000)
}
it.loadMoreView = listItem(text({
text: "Loading",
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.JUST).configAlignment(Gravity.Center),
height: 50,
}))
it.renderItem = (idx: number) => {
let counter!: Text
return listItem(
hlayout([
text({
layoutConfig: {
widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.JUST,
alignment: gravity().center(),
},
text: `Cell At Line ${idx}`,
textAlignment: gravity().center(),
textColor: Color.parse("#ffffff"),
textSize: 20,
height: 50,
}),
text({
textColor: Color.parse("#ffffff"),
textSize: 20,
text: "",
}).also(it => {
counter = it
vlayout(
[
text({
text: "ListDemo",
layoutConfig: {
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.JUST,
},
textSize: 30,
textColor: Color.parse("#535c68"),
backgroundColor: Color.parse("#dff9fb"),
textAlignment: gravity().center(),
height: 50,
}),
refreshView = refreshable({
onRefresh: () => {
refreshView.setRefreshing(context, false).then(() => {
(refreshView.content as List).also(it => {
it.reset()
offset = Math.ceil(Math.random() * colors.length)
it.itemCount = 40
it.loadMore = true
it.onLoadMore = () => {
setTimeout(() => {
it.itemCount += 10
}, 1000)
}
it.loadMoreView = listItem(text({
text: "Loading",
layoutConfig: layoutConfig().most().configHeight(LayoutSpec.JUST).configAlignment(Gravity.Center),
height: 50,
}))
it.renderItem = (idx: number) => {
let counter!: Text
return listItem(
hlayout([
text({
layoutConfig: {
widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.JUST,
alignment: gravity().center(),
},
text: `Cell At Line ${idx}`,
textAlignment: gravity().center(),
textColor: Color.parse("#ffffff"),
textSize: 20,
height: 50,
}),
text({
textColor: Color.parse("#ffffff"),
textSize: 20,
text: "",
}).also(it => {
counter = it
it.layoutConfig = {
widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.FIT,
margin: {
left: 10,
}
}
})
]).also(it => {
it.layoutConfig = {
widthSpec: LayoutSpec.FIT,
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.FIT,
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 = {
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.FIT,
margin: {
bottom: 2,
}
}
it.gravity = gravity().center()
it.backgroundColor = colors[(idx + offset) % colors.length]
let clicked = 0
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,
heightSpec: LayoutSpec.MOST,
}
it.backgroundColor = Color.WHITE
}).in(rootView)
],
{
layoutConfig: layoutConfig().most(),
backgroundColor: Color.WHITE
}).in(rootView)
refreshView.backgroundColor = Color.YELLOW
}
}