网络文章-v3 -下拉与加载更多

lib/net_article/views/article_content.dart

@@ -1,3 +1,6 @@
+import 'dart:async';
+
+import 'package:easy_refresh/easy_refresh.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_first_station/net_article/api/article_api.dart';
@@ -46,13 +49,39 @@ class _ArticleContentState extends State<ArticleContent> {
         ),
       );
     }
-    return ListView.builder(
-      itemExtent: 80,
-      itemCount: _articles.length,
-      itemBuilder: _buildItemByIndex,
+    return EasyRefresh(
+      header: const ClassicHeader(
+        dragText: "下拉加载",
+        armedText: "释放刷新",
+        readyText: "开始加载",
+        processingText: "正在加载",
+        processedText: "刷新成功",
+      ),
+      footer:const ClassicFooter(
+        processingText: "正在加载"
+      ),
+      onRefresh: _onRefresh,
+      onLoad: _onLoad,
+      child: ListView.builder(
+        itemExtent: 80,
+        itemCount: _articles.length,
+        itemBuilder: _buildItemByIndex,
+      ),
     );
   }
 
+  void _onRefresh() async{
+    _articles = await api.loadArticles(0);
+    setState(() {});
+  }
+
+  void _onLoad() async{
+    int nextPage = _articles.length%20;
+    List<Article> newArticles = await api.loadArticles(nextPage);
+    _articles = _articles + newArticles;
+    setState(() {});
+  }
+
   Widget _buildItemByIndex(BuildContext context, int index) {
     return ArticleItem(
       article: _articles[index],
@@ -67,6 +96,10 @@ class _ArticleContentState extends State<ArticleContent> {
       ),
     );
   }
+
+
+
+
 }
 
 class ArticleItem extends StatelessWidget {

pubspec.lock

@@ -121,6 +121,14 @@ packages:
       url: "https://pub.flutter-io.cn"
     source: hosted
     version: "5.1.2"
+  easy_refresh:
+    dependency: "direct main"
+    description:
+      name: easy_refresh
+      sha256: "6f4d222355a8294a72d600bcd7551e0559b6d96a98e8977c69796e0fb2f9e5ef"
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "3.3.1+2"
   fake_async:
     dependency: transitive
     description:
@@ -264,6 +272,22 @@ packages:
       url: "https://pub.flutter-io.cn"
     source: hosted
     version: "1.8.2"
+  path_drawing:
+    dependency: transitive
+    description:
+      name: path_drawing
+      sha256: bbb1934c0cbb03091af082a6389ca2080345291ef07a5fa6d6e078ba8682f977
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "1.0.1"
+  path_parsing:
+    dependency: transitive
+    description:
+      name: path_parsing
+      sha256: e3e67b1629e6f7e8100b367d3db6ba6af4b1f0bb80f64db18ef1fbabd2fa9ccf
+      url: "https://pub.flutter-io.cn"
+    source: hosted
+    version: "1.0.1"
   path_provider:
     dependency: transitive
     description:

pubspec.yaml

@@ -37,6 +37,7 @@ dependencies:
   sqflite: ^2.2.8+2
   dio: ^5.1.2
   webview_flutter: ^4.2.0
+  easy_refresh: ^3.3.1+2
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.
   cupertino_icons: ^1.0.2