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

demo: update horizontal list demo

Browse Source
This commit is contained in:
王劲鹏
2022-08-23 15:41:25 +08:00
committed by osborn
parent e69465e203
commit c1edc1376b
3 changed files with 235 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
doric-demo/src/HorizontalListDemo.ts Normal file
View File

@@ -0,0 +1,176 @@
import { Group, text, HorizontalList, gravity, Color, LayoutSpec, log, vlayout, layoutConfig, ViewHolder, ViewModel, VMPanel, loge, modal, stack, horizontalList, horizontalListItem } from "doric";
interface ItemModel {
text: string
}
interface ListModel {
end: boolean
offset: number
data: ItemModel[]
}
async function loadData(offset: number): Promise<{
isEnd: boolean,
data: ItemModel[]
}> {
return new Promise<{
isEnd: boolean,
data: ItemModel[]
}>(resolve => {
setTimeout(() => {
resolve({
isEnd: offset > 100,
data: new Array(5).fill(offset).map((e, idx) => {
return { text: `Item: ${e + idx}` }
})
})
}, 1000)
})
}
class ListVH extends ViewHolder {
list!: HorizontalList
build(root: Group) {
vlayout(
[
text({
text: "HorizontalList Demo",
layoutConfig: {
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.JUST,
},
textSize: 30,
textColor: Color.parse("#535c68"),
backgroundColor: Color.parse("#dff9fb"),
textAlignment: gravity().center(),
height: 50,
}),
this.list = horizontalList({
itemCount: 0,
layoutConfig: {
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.JUST,
weight: 1
},
})
],
{
layoutConfig: layoutConfig().most(),
backgroundColor: Color.WHITE
}).in(root)
}
}
class ListVM extends ViewModel<ListModel, ListVH> {
onAttached(state: ListModel, vh: ListVH) {
vh.list.apply({
canDrag: true,
onDragging: (from, to) => {
log(`onDragging, from: ${from}, to: ${to}`)
},
onDragged: (from, to) => {
log(`onDragged, from: ${from}, to: ${to}`)
},
renderItem: (index) => {
const data = state.data[index]
return horizontalListItem(stack([
text({
text: data.text,
textSize: 20,
layoutConfig: {
widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.JUST,
alignment: gravity().center(),
margin: {
left: 10,
right: 10,
}
},
height: 50,
onClick: () => {
data.text += "1"
vh.list.reload(this.context)
},
})
], {
layoutConfig: layoutConfig().fitWidth().mostHeight(),
}), {
layoutConfig: {
widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.MOST,
},
border: {
width: 1,
color: Color.BLACK,
}
//onClick: () => { modal(context).alert("Item Clicked " + index) }
}).apply({
// actions: [
// {
// title: "First",
// backgroundColor: Color.RED,
// callback: () => {
// modal(context).alert("First action " + index)
// }
// },
// {
// title: "Second",
// backgroundColor: Color.BLUE,
// callback: () => {
// modal(context).alert("Second action " + index)
// }
// }
// ]
})
},
onLoadMore: async () => {
loge(`LoadMore,offset:${state.offset}`)
const ret = await loadData(state.offset)
this.updateState(state => {
state.end = ret.isEnd
state.data = state.data.concat(ret.data)
state.offset = state.data.length
})
},
onScrollEnd: async () => {
const ret = await vh.list.findCompletelyVisibleItems(context)
loge('completelyVisible Items is:', ret)
const ret2 = await vh.list.findVisibleItems(context)
loge('visible Items is:', ret2)
}
})
loadData(state.offset).then(ret => {
this.updateState(state => {
state.end = ret.isEnd
state.data = state.data.concat(ret.data)
state.offset = state.data.length
})
})
}
onBind(state: ListModel, vh: ListVH) {
vh.list.apply({
itemCount: state.data.length,
loadMore: !state.end
})
loge(`onBind,itemCount:${vh.list.itemCount}`)
}
}
@Entry
class ListPanel extends VMPanel<ListModel, ListVH> {
getViewModelClass() {
return ListVM
}
getViewHolderClass() {
return ListVH
}
getState() {
return {
end: true,
data: [],
offset: 0
}
}
}

58
doric-demo/src/HorizontalListInListDemo.ts Normal file
View File

@@ -0,0 +1,58 @@
import { Panel, Group, layoutConfig, stack, list, listItem, horizontalList, horizontalListItem } from "doric"
import { colors } from "./utils"
@Entry
class HorizontalListInListDemo extends Panel {
private data1 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
private data2 = [0, 1, 2, 3, 4, 5]
build(root: Group) {
stack([
list({
itemCount: this.data1.length,
renderItem: (index1) => {
if (index1 % 3 === 0) {
return listItem(
stack([
horizontalList({
itemCount: this.data2.length,
renderItem: (index2) => {
return horizontalListItem(
stack([]).apply({
layoutConfig: layoutConfig().just().configMargin({
left: 5,
right: 5,
}),
height: 80,
width: 160,
backgroundColor: colors[index1 % colors.length],
}),
)
},
layoutConfig: layoutConfig().most()
})
]).apply({
layoutConfig: layoutConfig().just(),
height: 80,
width: Environment.screenWidth,
}),
)
} else {
return listItem(
stack([]).apply({
layoutConfig: layoutConfig().just(),
height: 80,
width: Environment.screenWidth,
backgroundColor: colors[index1 % colors.length],
}),
)
}
},
layoutConfig: layoutConfig().most(),
})
], {
layoutConfig: layoutConfig().most()
}).in(root)
}
}

6
doric-demo/src/ScrollerInListDemo.ts
View File

@@ -1,4 +1,4 @@
import { Panel, Group, layoutConfig, Color, stack, list, listItem, text, loge, scroller, hlayout } from "doric" import { Panel, Group, layoutConfig, stack, list, listItem, scroller, hlayout } from "doric"
import { colors } from "./utils" import { colors } from "./utils"
@Entry @Entry
@@ -7,10 +7,6 @@ class ScrollerInListDemo extends Panel {
private data = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20] private data = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
build(root: Group) { build(root: Group) {
function insertAt(array: Array<any>, index: number, ...elements: Array<any>) {
array.splice(index, 0, ...elements);
}
stack( stack(
[ [
list({ list({