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

feat:render subview's change to apply listview's item change

Browse Source
This commit is contained in:
pengfei.zhou
2019-11-14 14:42:31 +08:00
parent 4dcc89497d
commit 1dcdfff97d
8 changed files with 165 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
demo/src/ListDemo.ts
View File

@@ -1,4 +1,4 @@
import { Group, Panel, List, text, gravity, Color, Stack, LayoutSpec, ListItem, NativeCall, listItem, log } from "doric";
import { Group, Panel, List, text, gravity, Color, Stack, LayoutSpec, list, NativeCall, listItem, log, vlayout } from "doric";
const colors = [
"#f0932b",
"#eb4d4b",
@@ -10,43 +10,62 @@ const colors = [
@Entry
class ListPanel extends Panel {
build(rootView: Group): void {
const list = new List
list.layoutConfig = {
widthSpec: LayoutSpec.AT_MOST,
heightSpec: LayoutSpec.AT_MOST,
}
rootView.addChild(list)
list.itemCount = 1000
list.renderItem = (idx) => {
return listItem(text({
rootView.addChild(vlayout([
text({
text: "ListDemo",
layoutConfig: {
widthSpec: LayoutSpec.AT_MOST,
heightSpec: LayoutSpec.WRAP_CONTENT,
margin: {
left: 10,
right: 10,
top: 10,
bottom: 10,
},
},
text: `Cell At Line ${idx}`,
textAlignment: gravity().center(),
textColor: Color.parse("#ffffff"),
textSize: 20,
})).also(it => {
it.gravity = gravity().center()
it.bgColor = Color.parse(colors[idx % colors.length])
it.layoutConfig = {
widthSpec: LayoutSpec.AT_MOST,
heightSpec: LayoutSpec.EXACTLY,
}
it.height = 50
it.onClick = () => {
log(`Click item at ${idx}`)
it.bgColor = Color.parse('#000000')
log(`changed,listview is dirty:${list.isDirty()}`)
}
})
}
},
textSize: 30,
textColor: Color.parse("#535c68"),
bgColor: Color.parse("#dff9fb"),
textAlignment: gravity().center(),
height: 50,
}),
list({
itemCount: 1000,
renderItem: (idx: number) => {
return listItem(text({
layoutConfig: {
widthSpec: LayoutSpec.AT_MOST,
heightSpec: LayoutSpec.WRAP_CONTENT,
margin: {
left: 10,
right: 10,
top: 10,
bottom: 10,
},
},
text: `Cell At Line ${idx}`,
textAlignment: gravity().center(),
textColor: Color.parse("#ffffff"),
textSize: 20,
})).also(it => {
it.gravity = gravity().center()
it.bgColor = Color.parse(colors[idx % colors.length])
it.layoutConfig = {
widthSpec: LayoutSpec.AT_MOST,
heightSpec: LayoutSpec.EXACTLY,
}
it.height = 50
it.onClick = () => {
log(`Click item at ${idx}`)
it.bgColor = Color.parse('#000000')
log(`bgcolor is ${Color.parse('#000000').toModel()}`)
}
})
},
layoutConfig: {
widthSpec: LayoutSpec.AT_MOST,
heightSpec: LayoutSpec.AT_MOST,
},
}),
]).also(it => {
it.layoutConfig = {
widthSpec: LayoutSpec.AT_MOST,
heightSpec: LayoutSpec.AT_MOST,
}
}))
}
}