Flutter下拉刷新功能插件refresh的使用

Flutter下拉刷新功能插件refresh的使用

基于<a href="https://pub.flutter-io.cn/packages/pull_to_refresh" rel="ugc">pull_to_refresh</a>插件，并针对Flutter3进行了修正。

示例代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:refresh/refresh.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这个小部件是你的应用的根。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 这是你的应用的主题。
        //
        // 尝试运行你的应用。你会看到应用有一个蓝色工具栏。然后，在不退出应用的情况下，尝试将primarySwatch更改为Colors.green并执行“热重载”（在控制台中按“r”，或直接保存更改以进行“热重载”）。请注意，计数器并没有重置为零；这是因为应用并没有重新启动。
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  // 这个小部件是你的应用的首页。它是一个有状态的小部件，意味着
  // 它有一个状态对象（定义在下面），该对象包含影响其外观的字段。
  // 这个类是状态的配置。它包含了由父级（在这个例子中是App小部件）提供的值（在这个例子中是标题），
  // 并且被构建方法使用。Widget子类中的字段总是标记为“final”。

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> items = ["1", "2", "3", "4","5","6","7","8","9"];
  RefreshController _refreshController = RefreshController(initialRefresh: false);

  void _onRefresh() async {
    // 监控网络请求
    await Future.delayed(Duration(milliseconds: 1000));
    // 如果失败了，使用refreshFailed()
    _refreshController.refreshCompleted();
  }

  void _onLoading() async {
    // 监控网络请求
    await Future.delayed(Duration(milliseconds: 1000));
    // 如果失败了，使用loadFailed()，如果没有数据返回，使用LoadNodata()
    items.add((items.length + 1).toString());
    if (mounted)
      setState(() {});
    _refreshController.loadComplete();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: SmartRefresher(
        controller: _refreshController,
        child: ListView.builder(
          itemBuilder: (c, i) => Card(child: Center(child: Text(items[i]))),
          itemExtent: 100.0,
          itemCount: items.length,
        ),
      ),
    );
  }
}

代码解释

• 初始化：

  void main() {
    runApp(const MyApp());
  }
  

  主函数，用于启动应用。

• MyApp类：

  class MyApp extends StatelessWidget {
    const MyApp({super.key});
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const MyHomePage(title: 'Flutter Demo Home Page'),
      );
    }
  }
  

  应用的根小部件，设置主题颜色和首页。

• MyHomePage类：

  class MyHomePage extends StatefulWidget {
    const MyHomePage({super.key, required this.title});
  
    final String title;
  
    @override
    State<MyHomePage> createState() => _MyHomePageState();
  }
  

  主页小部件，包含一个状态类 _MyHomePageState。

• _MyHomePageState类：

  class _MyHomePageState extends State<MyHomePage> {
    List<String> items = ["1", "2", "3", "4","5","6","7","8","9"];
    RefreshController _refreshController = RefreshController(initialRefresh: false);
  
    void _onRefresh() async {
      await Future.delayed(Duration(milliseconds: 1000));
      _refreshController.refreshCompleted();
    }
  
    void _onLoading() async {
      await Future.delayed(Duration(milliseconds: 1000));
      items.add((items.length + 1).toString());
      if (mounted)
        setState(() {});
      _refreshController.loadComplete();
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(),
        body: SmartRefresher(
          controller: _refreshController,
          child: ListView.builder(
            itemBuilder: (c, i) => Card(child: Center(child: Text(items[i]))),
            itemExtent: 100.0,
            itemCount: items.length,
          ),
        ),
      );
    }
  }