2x 新版本

2025-11-04 13:25:29 +00:00 · 2025-01-12 12:10:11 +08:00
parent 27a48bd270
commit d92d2222a3
4 changed files with 1108 additions and 564 deletions
--- a/list-2x/assets/home/home.fire
+++ b/list-2x/assets/home/home.fire
@@ -73,18 +73,24 @@
      },
      {
        "__id__": 5
+      },
+      {
+        "__id__": 8
+      },
+      {
+        "__id__": 12
      }
    ],
    "_active": true,
    "_components": [
      {
-        "__id__": 8
+        "__id__": 16
      },
      {
-        "__id__": 9
+        "__id__": 17
      },
      {
-        "__id__": 10
+        "__id__": 18
      }
    ],
    "_prefab": null,
@@ -235,7 +241,7 @@
  },
  {
    "__type__": "cc.Node",
-    "_name": "list",
+    "_name": "list1",
    "_objFlags": 0,
    "_parent": {
      "__id__": 2
@@ -258,8 +264,102 @@
    },
    "_contentSize": {
      "__type__": "cc.Size",
-      "width": 400,
-      "height": 600
+      "width": 310,
+      "height": 640
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_trs": {
+      "__type__": "TypedArray",
+      "ctor": "Float64Array",
+      "array": [
+        -325,
+        0,
+        0,
+        0,
+        0,
+        0,
+        1,
+        1,
+        1,
+        1
+      ]
+    },
+    "_eulerAngles": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "_is3DNode": false,
+    "_groupIndex": 0,
+    "groupIndex": 0,
+    "_id": "37KB4+AFFHxrAaBW5L4Ycp"
+  },
+  {
+    "__type__": "62dc08kS7dIiIYJEawwSV8U",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 5
+    },
+    "_enabled": true,
+    "mask": true,
+    "scrollEnabled": true,
+    "wheelScrollEnabled": true,
+    "scrollDirection": 1,
+    "mode": 0,
+    "preloadNodesLimitPerFrame": 2,
+    "frameInterval": 1,
+    "recycleInterval": 1,
+    "registerCellForEditor": [
+      {
+        "__id__": 7
+      }
+    ],
+    "registerSupplementaryForEditor": [],
+    "_id": "d7ZzsT1NNNuKRUYTA6KIhf"
+  },
+  {
+    "__type__": "_yx_editor_register_element_info",
+    "prefab": {
+      "__uuid__": "8fa9c17d-2552-411c-9848-7b16bf0208a8"
+    },
+    "identifier": "cell",
+    "comp": ""
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "list2",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 2
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 9
+      }
+    ],
+    "_prefab": null,
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 310,
+      "height": 640
    },
    "_anchorPoint": {
      "__type__": "cc.Vec2",
@@ -293,14 +393,14 @@
    "_is3DNode": false,
    "_groupIndex": 0,
    "groupIndex": 0,
-    "_id": "0783nLyzRLIb74nyA86bgq"
+    "_id": "316iCgSztKvpYfUuRpjZpB"
  },
  {
    "__type__": "62dc08kS7dIiIYJEawwSV8U",
    "_name": "",
    "_objFlags": 0,
    "node": {
-      "__id__": 5
+      "__id__": 8
    },
    "_enabled": true,
    "mask": true,
@@ -313,19 +413,138 @@
    "recycleInterval": 1,
    "registerCellForEditor": [
      {
-        "__id__": 7
+        "__id__": 10
      }
    ],
-    "_id": "c6OeMxzjlE/okCBJxHaOEk"
+    "registerSupplementaryForEditor": [
+      {
+        "__id__": 11
+      }
+    ],
+    "_id": "6168pMrAdHy5egsiy1RWAl"
  },
  {
-    "__type__": "_yx_editor_register_cell_info",
+    "__type__": "_yx_editor_register_element_info",
    "prefab": {
      "__uuid__": "8fa9c17d-2552-411c-9848-7b16bf0208a8"
    },
    "identifier": "cell",
    "comp": ""
  },
+  {
+    "__type__": "_yx_editor_register_element_info",
+    "prefab": {
+      "__uuid__": "8fa9c17d-2552-411c-9848-7b16bf0208a8"
+    },
+    "identifier": "supplementary",
+    "comp": ""
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "list3",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 2
+    },
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 13
+      }
+    ],
+    "_prefab": null,
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 310,
+      "height": 640
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_trs": {
+      "__type__": "TypedArray",
+      "ctor": "Float64Array",
+      "array": [
+        325,
+        0,
+        0,
+        0,
+        0,
+        0,
+        1,
+        1,
+        1,
+        1
+      ]
+    },
+    "_eulerAngles": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "_is3DNode": false,
+    "_groupIndex": 0,
+    "groupIndex": 0,
+    "_id": "99jY+AojdA0YZq4ysmw84S"
+  },
+  {
+    "__type__": "62dc08kS7dIiIYJEawwSV8U",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 12
+    },
+    "_enabled": true,
+    "mask": true,
+    "scrollEnabled": true,
+    "wheelScrollEnabled": true,
+    "scrollDirection": 1,
+    "mode": 0,
+    "preloadNodesLimitPerFrame": 2,
+    "frameInterval": 1,
+    "recycleInterval": 1,
+    "registerCellForEditor": [
+      {
+        "__id__": 14
+      }
+    ],
+    "registerSupplementaryForEditor": [
+      {
+        "__id__": 15
+      }
+    ],
+    "_id": "4bts8zampKvaCz5ILMmZJA"
+  },
+  {
+    "__type__": "_yx_editor_register_element_info",
+    "prefab": {
+      "__uuid__": "8fa9c17d-2552-411c-9848-7b16bf0208a8"
+    },
+    "identifier": "cell",
+    "comp": ""
+  },
+  {
+    "__type__": "_yx_editor_register_element_info",
+    "prefab": {
+      "__uuid__": "8fa9c17d-2552-411c-9848-7b16bf0208a8"
+    },
+    "identifier": "supplementary",
+    "comp": ""
+  },
  {
    "__type__": "cc.Canvas",
    "_name": "",
@@ -378,9 +597,6 @@
      "__id__": 2
    },
    "_enabled": true,
-    "listComp": {
-      "__id__": 6
-    },
    "_id": "560cKL+1lFIZFZSgoBz8At"
  }
 ]
--- a/list-2x/assets/home/home.ts
+++ b/list-2x/assets/home/home.ts
@@ -10,50 +10,115 @@ import { YXTableLayout } from "../lib/yx-table-layout";

 const { ccclass, property } = cc._decorator;

-class Data {
-    id: number
-}

@ccclass
 export default class NewClass extends cc.Component {

-    @property(YXCollectionView)
-    listComp: YXCollectionView = null
-
-    testData: Data[] = []
-
    protected start(): void {
+        this.setup_list1()
+        this.setup_list2()
+        this.setup_list3()
+    }
+    
+    setup_list1() {
+        const listComp = this.node.getChildByName('list1').getComponent(YXCollectionView)

-        // 绑定数据源
-        this.listComp.numberOfItems = () => this.testData.length
-        this.listComp.cellForItemAt = (indexPath, collectionView) => {
-            const rowData = this.testData[indexPath.item]
+        listComp.numberOfItems = () => 10000
+        listComp.cellForItemAt = (indexPath, collectionView) => {
            const cell = collectionView.dequeueReusableCell(`cell`)
            cell.getChildByName('label').getComponent(cc.Label).string = `${indexPath}`
            return cell
        }

-        // 确定布局方案  
        let layout = new YXTableLayout()
        layout.spacing = 20
-        layout.itemSize = new cc.Size(400, 100)
-        this.listComp.layout = layout
+        layout.rowHeight = 100
+        listComp.layout = layout

-        this.receivedData()
+        listComp.reloadData()
    }

-    /**
-     * 模拟收到数据  
-     */
-    receivedData() {
-        this.testData = []
-        for (let index = 0; index < 1000; index++) {
-            let data = new Data()
-            data.id = index
-            this.testData.push(data)
+    setup_list2() {
+        const listComp = this.node.getChildByName('list2').getComponent(YXCollectionView)
+
+        listComp.numberOfSections = () => 100
+        listComp.supplementaryForItemAt = (indexPath, collectionView, kinds) => {
+            if (kinds === YXTableLayout.SupplementaryKinds.HEADER) {
+                const supplementary = collectionView.dequeueReusableSupplementary('supplementary')
+                supplementary.getChildByName('label').getComponent(cc.Label).string = `header  ${indexPath}`
+                const shape = supplementary.getChildByName('shape')
+                shape.color = new cc.Color(100, 100, 150)
+                return supplementary
+            }
+            if (kinds === YXTableLayout.SupplementaryKinds.FOOTER) {
+                const supplementary = collectionView.dequeueReusableSupplementary('supplementary')
+                supplementary.getChildByName('label').getComponent(cc.Label).string = `footer  ${indexPath}`
+                const shape = supplementary.getChildByName('shape')
+                shape.color = new cc.Color(150, 100, 100)
+                return supplementary
+            }
+            return null
        }

-        // 刷新列表
-        this.listComp.reloadData()
+        listComp.numberOfItems = () => 20
+        listComp.cellForItemAt = (indexPath, collectionView) => {
+            const cell = collectionView.dequeueReusableCell(`cell`)
+            cell.getChildByName('label').getComponent(cc.Label).string = `${indexPath}`
+            return cell
+        }
+
+        let layout = new YXTableLayout()
+        layout.spacing = 20
+        layout.top = 20
+        layout.bottom = 20
+        layout.rowHeight = 100
+        layout.sectionHeaderHeight = 120
+        layout.sectionFooterHeight = 120
+        listComp.layout = layout
+
+        listComp.reloadData()
+    }
+
+    setup_list3() {
+        const listComp = this.node.getChildByName('list3').getComponent(YXCollectionView)
+
+        listComp.numberOfSections = () => 100
+        listComp.supplementaryForItemAt = (indexPath, collectionView, kinds) => {
+            if (kinds === YXTableLayout.SupplementaryKinds.HEADER) {
+                const supplementary = collectionView.dequeueReusableSupplementary('supplementary')
+                supplementary.getChildByName('label').getComponent(cc.Label).string = `header  ${indexPath}`
+                const shape = supplementary.getChildByName('shape')
+                shape.color = new cc.Color(100, 100, 150)
+                return supplementary
+            }
+            if (kinds === YXTableLayout.SupplementaryKinds.FOOTER) {
+                const supplementary = collectionView.dequeueReusableSupplementary('supplementary')
+                supplementary.getChildByName('label').getComponent(cc.Label).string = `footer  ${indexPath}`
+                const shape = supplementary.getChildByName('shape')
+                shape.color = new cc.Color(150, 100, 100)
+                return supplementary
+            }
+            return null
+        }
+
+        listComp.numberOfItems = () => 20
+        listComp.cellForItemAt = (indexPath, collectionView) => {
+            const cell = collectionView.dequeueReusableCell(`cell`)
+            cell.getChildByName('label').getComponent(cc.Label).string = `${indexPath}`
+            return cell
+        }
+
+        let layout = new YXTableLayout()
+        layout.spacing = 20
+        layout.top = 20
+        layout.bottom = 20
+        layout.rowHeight = 100
+        layout.sectionHeaderHeight = 120
+        layout.sectionFooterHeight = 120
+        layout.sectionHeadersPinToVisibleBounds = true
+        layout.sectionFootersPinToVisibleBounds = true
+        listComp.layout = layout
+
+        listComp.reloadData()
    }
 }