鸿蒙开发：一个轻盈的上拉下拉革新组件

媒介


老早之前开源了一个革新组件，提供了很多常见的功能，也封装了List，Grid，WaterFlow，固然功能多，但也冗余比较多，随着时间的前去，袒露的问题就慢慢增多，固然我也提供了通用的RefrshLayout，奈何很多人仍然有许多问题，但大部分都是相关属性以及用法的问题，对于我来说也比较苦恼，既然如此，那就只封装一个革新加载，其它的本身实现好了，于是针对refresh的轻盈组件就剥离出来了。

因为它只是一个革新组件，也仅仅是提供革新能力，并不提供数据加载服务，这是和refrsh组件的不同之处，当然了，也是灵活之处，毕竟列表的组件是本身写的，须要什么样式更加灵活，但是在代码层次上也稍显冗余，不外有舍就有得。

现在已上传至了中央仓库，地址是：
https://ohpm.openharmony.cn/#/cn/detail/@abner%2Flithe_refresh

革新库功能结果一览


1、所有功能

2、各个功能结果

快速利用


方式一：在Terminal窗口中，执行如下下令安装三方包，DevEco Studio会自动在工程的oh-package.json5中自动添加三方包依赖。

建议：在利用的模块路径下进行执行下令。

1. ohpm install @abner/lithe_refresh

复制代码

方式二：在工程的oh-package.json5中设置三方包依赖，设置示比方下：

1. "dependencies": { "@abner/lithe_refresh": "^1.0.0"}

复制代码

利用留意


可以利用LitheRefresh组件，包裹想革新的任意组件，相对比较灵活，如果您想实现懒加载数据模式，建议团结提供的RefreshDataSource，可以让您实现更加方便。

有一点须要知道，如果是包裹的是可滑动组件，比如List，Grid，WaterFlow等，须要配合nestedScroll属性，来办理滑动之间的辩说。

代码案例


1、简单利用

1. controller: RefreshController = new RefreshController()
3. //任意组件，可以是List、Grid，WaterFlow ……
4. @Builder
5.   itemLayout() {
6.     Column() {
8.     }.width("100%")
9.       .height("100%")
10.       .backgroundColor(Color.Pink)
11.       .justifyContent(FlexAlign.Center)
12.   }
14. LitheRefresh({
15.   itemLayout: this.itemLayout,
16.   controller: this.controller,
17.   onRefresh: () => {
18.     //下拉刷新
19.     this.controller.finishRefresh()
20.   },
21.   onLoadMore: () => {
22.     //加载更多
23.     this.controller.finishLoadMore()
24.   }
25. })

复制代码

2、List利用

1. @Entry
2. @Component
3. struct ListUpAndDownPage {
4.   @State testArray: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
5.   scroller: Scroller = new Scroller()
6.   controller: RefreshController = new RefreshController()
8.   @Builder
9.   itemLayout(_this: ListUpAndDownPage) {
10.     List({ scroller: _this.scroller, space: 20 }) {
11.       ForEach(_this.testArray, (item: number) => {
12.         ListItem() {
13.           Text('' + item)
14.             .width('100%')
15.             .height(80)
16.             .fontSize(16)
17.             .textAlign(TextAlign.Center)
18.             .backgroundColor(0xFFFFFF)
19.             .border({ width: 2, color: Color.Pink })
20.         }
21.       }, (item: string, index: number) => JSON.stringify(item) + "_" + index)
22.     }
23.     .scrollBar(BarState.Off)
24.     .edgeEffect(EdgeEffect.None)
25.     .width("100%")
26.     .height("100%")
27.     .padding({ left: 20, right: 20 })
28.     .nestedScroll({
29.       scrollForward: NestedScrollMode.PARENT_FIRST,
30.       scrollBackward: NestedScrollMode.PARENT_FIRST
31.     })
32.   }
34.   build() {
35.     Column() {
36.       
37.       LitheRefresh({
38.         scroller: this.scroller,
39.         controller: this.controller,
40.         itemLayout: () => {
41.           this.itemLayout(this)
42.         },
43.         onRefresh: () => {
44.           //下拉刷新
45.           setTimeout(() => {
46.             this.controller.finishRefresh()
47.           }, 2000)
48.         },
49.         onLoadMore: () => {
50.           //上拉加载
51.           setTimeout(() => {
52.             this.testArray.push(13)
53.             this.testArray.push(14)
54.             this.controller.finishLoadMore()
55.           }, 2000)
56.         }
57.       })
58.     }
59.   }
60. }

复制代码

3、Grid利用

1. @Entry
2. @Component
3. struct GridUpAndDownPage {
4.   @State testArray: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
5.   scroller: Scroller = new Scroller()
6.   controller: RefreshController = new RefreshController()
8.   @Builder
9.   itemLayout(_this: GridUpAndDownPage) {
10.     Grid(_this.scroller) {
11.       ForEach(_this.testArray, (item: number) => {
12.         GridItem() {
13.           Text('' + item)
14.             .width('100%')
15.             .height(80)
16.             .fontSize(16)
17.             .textAlign(TextAlign.Center)
18.             .backgroundColor(0xFFFFFF)
19.             .border({ width: 2, color: Color.Pink })
20.         }
21.       }, (item: string, index: number) => JSON.stringify(item) + "_" + index)
22.     }
23.     .columnsTemplate("1fr 1fr")
24.     .columnsGap(10)
25.     .rowsGap(10)
26.     .scrollBar(BarState.Off)
27.     .edgeEffect(EdgeEffect.None)
28.     .width("100%")
29.     .height("100%")
30.     .padding({ left: 20, right: 20 })
31.     .nestedScroll({
32.       scrollForward: NestedScrollMode.PARENT_FIRST,
33.       scrollBackward: NestedScrollMode.PARENT_FIRST
34.     })
35.   }
37.   build() {
38.     Column() {
40.       ActionBar({
41.         title: "Grid组件刷新",
42.         barBackgroundColor: Color.Red,
43.         leftText: "返回",
44.         onLeftClick: () => {
45.           router.back()
46.         },
47.       })
49.       LitheRefresh({
50.         scroller: this.scroller,
51.         controller: this.controller,
52.         itemLayout: () => {
53.           this.itemLayout(this)
54.         },
55.         onRefresh: () => {
56.           //下拉刷新
57.           setTimeout(() => {
58.             this.controller.finishRefresh()
59.           }, 2000)
60.         },
61.         onLoadMore: () => {
62.           //上拉加载
63.           setTimeout(() => {
64.             this.testArray.push(13)
65.             this.testArray.push(14)
66.             this.controller.finishLoadMore()
67.           }, 2000)
68.         }
69.       })
70.     }
71.   }
72. }

复制代码

3、WaterFlow利用


这里没有利用提供RefreshDataSource，以是懒加载方式比较冗余，为了简便代码，建议利用我提供的RefreshDataSource，可以让您的服从极大提升。

详细RefreshDataSource利用方式，可以查看Demo中LazyDataOperationPage页面。

1. @Entry
2.   @Component
3.   struct WaterFlowUpAndDownPage {
4.     scroller: Scroller = new Scroller()
5.     controller: RefreshController = new RefreshController()
7.     @Builder
8.     itemLayout(_this: WaterFlowUpAndDownPage) {
9.       WaterFlowView({
10.         scroller: _this.scroller
11.       })
12.     }
14.     build() {
15.       Column() {
17.         LitheRefresh({
18.           scroller: this.scroller,
19.           controller: this.controller,
20.           itemLayout: () => {
21.             this.itemLayout(this)
22.           },
23.           onRefresh: () => {
24.             //下拉刷新
25.             setTimeout(() => {
26.               this.controller.finishRefresh()
27.             }, 2000)
28.           },
29.           onLoadMore: () => {
30.             //上拉加载
31.             setTimeout(() => {
32.               this.controller.finishLoadMore()
33.             }, 2000)
34.           }
35.         })
36.       }
37.     }
38.   }
40. @Component
41.   struct WaterFlowView {
42.     @State minSize: number = 80
43.     @State maxSize: number = 180
44.     @State fontSize: number = 24
45.     @State colors: number[] = [0xFFC0CB, 0xDA70D6, 0x6B8E23, 0x6A5ACD, 0x00FFFF, 0x00FF7F]
46.     scroller: Scroller = new Scroller()
47.     dataSource: WaterFlowDataSource = new WaterFlowDataSource()
48.     private itemWidthArray: number[] = []
49.     private itemHeightArray: number[] = []
51.     // 计算FlowItem宽/高
52.     getSize() {
53.       let ret = Math.floor(Math.random() * this.maxSize)
54.       return (ret > this.minSize ? ret : this.minSize)
55.     }
57.     // 设置FlowItem的宽/高数组
58.     setItemSizeArray() {
59.       for (let i = 0; i < 30; i++) {
60.         this.itemWidthArray.push(this.getSize())
61.         this.itemHeightArray.push(this.getSize())
62.       }
63.     }
65.     aboutToAppear() {
66.       this.setItemSizeArray()
67.     }
69.     build() {
70.       WaterFlow({ scroller: this.scroller }) {
71.         LazyForEach(this.dataSource, (item: number) => {
72.           FlowItem() {
73.             Column() {
74.               Text("N" + item).fontSize(12).height('16')
75.             }
76.           }
77.           .width('100%')
78.                     .height(this.itemHeightArray[item % 30])
79.                     .backgroundColor(this.colors[item % 5])
80.                     }, (item: string) => item)
81.       }
82.       .columnsTemplate("1fr 1fr")
83.         .columnsGap(10)
84.         .rowsGap(5)
85.         .backgroundColor(0xFAEEE0)
86.         .width('100%')
87.         .height('100%')
88.         .nestedScroll({
89.           scrollForward: NestedScrollMode.PARENT_FIRST,
90.           scrollBackward: NestedScrollMode.PARENT_FIRST
91.         })
92.     }
93.   }
95. // 实现IDataSource接口的对象，用于瀑布流组件加载数据
96. export class WaterFlowDataSource implements IDataSource {
97.   private dataArray: number[] = []
98.   private listeners: DataChangeListener[] = []
100.   constructor() {
101.     for (let i = 0; i < 30; i++) {
102.       this.dataArray.push(i)
103.     }
104.   }
106.   // 获取索引对应的数据
107.   public getData(index: number): number {
108.     return this.dataArray[index]
109.   }
111.   // 通知控制器数据重新加载
112.   notifyDataReload(): void {
113.     this.listeners.forEach(listener => {
114.       listener.onDataReloaded()
115.     })
116.   }
118.   // 通知控制器数据增加
119.   notifyDataAdd(index: number): void {
120.     this.listeners.forEach(listener => {
121.       listener.onDataAdd(index)
122.     })
123.   }
125.   // 通知控制器数据变化
126.   notifyDataChange(index: number): void {
127.     this.listeners.forEach(listener => {
128.       listener.onDataChange(index)
129.     })
130.   }
132.   // 通知控制器数据删除
133.   notifyDataDelete(index: number): void {
134.     this.listeners.forEach(listener => {
135.       listener.onDataDelete(index)
136.     })
137.   }
139.   // 通知控制器数据位置变化
140.   notifyDataMove(from: number, to: number): void {
141.     this.listeners.forEach(listener => {
142.       listener.onDataMove(from, to)
143.     })
144.   }
146.   //通知控制器数据批量修改
147.   notifyDatasetChange(operations: DataOperation[]): void {
148.     this.listeners.forEach(listener => {
149.       listener.onDatasetChange(operations);
150.     })
151.   }
153.   // 获取数据总数
154.   public totalCount(): number {
155.     return this.dataArray.length
156.   }
158.   // 注册改变数据的控制器
159.   registerDataChangeListener(listener: DataChangeListener): void {
160.     if (this.listeners.indexOf(listener) < 0) {
161.       this.listeners.push(listener)
162.     }
163.   }
165.   // 注销改变数据的控制器
166.   unregisterDataChangeListener(listener: DataChangeListener): void {
167.     const pos = this.listeners.indexOf(listener)
168.     if (pos >= 0) {
169.       this.listeners.splice(pos, 1)
170.     }
171.   }
173.   // 增加数据
174.   public add1stItem(): void {
175.     this.dataArray.splice(0, 0, this.dataArray.length)
176.     this.notifyDataAdd(0)
177.   }
179.   // 在数据尾部增加一个元素
180.   public addLastItem(): void {
181.     this.dataArray.splice(this.dataArray.length, 0, this.dataArray.length)
182.     this.notifyDataAdd(this.dataArray.length - 1)
183.   }
185.   // 在指定索引位置增加一个元素
186.   public addItem(index: number): void {
187.     this.dataArray.splice(index, 0, this.dataArray.length)
188.     this.notifyDataAdd(index)
189.   }
191.   // 删除第一个元素
192.   public delete1stItem(): void {
193.     this.dataArray.splice(0, 1)
194.     this.notifyDataDelete(0)
195.   }
197.   // 删除第二个元素
198.   public delete2ndItem(): void {
199.     this.dataArray.splice(1, 1)
200.     this.notifyDataDelete(1)
201.   }
203.   // 删除最后一个元素
204.   public deleteLastItem(): void {
205.     this.dataArray.splice(-1, 1)
206.     this.notifyDataDelete(this.dataArray.length)
207.   }
209.   // 在指定索引位置删除一个元素
210.   public deleteItem(index: number): void {
211.     this.dataArray.splice(index, 1)
212.     this.notifyDataDelete(index)
213.   }
215.   // 重新加载数据
216.   public reload(): void {
217.     this.dataArray.splice(1, 1)
218.     this.dataArray.splice(3, 2)
219.     this.notifyDataReload()
220.   }
221. }

复制代码

利用总结


在和可滑动组件利用的时候，记得肯定要和nestedScroll属性配合利用，用于办理滑动辩说，除此之外，还须要转达滑动组件的scroller属性，用于手势操作。