Flutter粘性刷新插件refresh_sticky的使用

Flutter粘性刷新插件refresh_sticky的使用

RefreshSticky 是一个 Flutter 小部件，它提供了一个粘性的刷新指示器，可以用于刷新滚动小部件的内容。

特性

  • 粘性刷新指示器：刷新指示器即使用户滚动过去也会保持可见，提供更流畅的用户体验。
  • 可定制化：您可以更改刷新指示器的大小、颜色和加载动画。
  • 易于使用：只需将您的滚动小部件包裹在 RefreshSticky 中，并提供 onRefresh 回调以处理刷新逻辑。

使用方法

以下是一个完整的示例，展示了如何使用 RefreshSticky 插件。

import 'package:flutter/material.dart';
import 'package:refresh_sticky/refresh_sticky.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  final _scrollController = ScrollController();
  final _items = <String>[];

  @override
  void initState() {
    super.initState();
    for (var i = 0; i < 20; i++) {
      _items.add('Item $i');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Refresh Sticky Example'),
      ),
      body: RefreshSticky(
        axis: Axis.vertical,
        controller: _scrollController,
        onRefresh: () async {
          // 模拟网络请求以获取新数据
          await Future.delayed(const Duration(seconds: 1));

          // 更新状态以添加新项目
          setState(() {
            for (var i = 0; i < 5; i++) {
              _items.add('Item ${_items.length}');
            }
          });
        },
        builder: (context, controller) {
          return ListView.builder(
            // 确保始终可以拉动刷新
            physics: const AlwaysScrollableScrollPhysics(
              parent: BouncingScrollPhysics(),
            ),
            controller: controller,
            itemCount: _items.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(_items[index]),
              );
            },
          );
        },
        loadingBuilder: (context) => const Center(
          child: CircularProgressIndicator(),
        ),
        preLoadingBuilder: (context) => const Center(
          child: Text('Pull to refresh'),
        ),
      ),
    );
  }
}

属性

属性名 类型 描述
builder Widget Function(BuildContext context, ScrollController controller) 创建滚动小部件内容的构建函数。
onRefresh Future<void> Function() 用户刷新内容时调用的回调函数。
size double 刷新指示器的大小，默认为 50。
loadingBuilder WidgetBuilder? 创建刷新指示器加载动画的构建函数。
preLoadingBuilder WidgetBuilder? 创建刷新指示器预加载动画的构建函数。
controller ScrollController? 用于管理滚动小部件滚动位置的滚动控制器。
moveToFirstAfterComplete bool 是否在刷新完成后移动到顶部，默认为 false。
reverse bool 是否将刷新指示器放置在滚动小部件底部，默认为 false。
scaleLoadingIcon double 加载图标的比例，默认为 1.2。
axis Axis 滚动小部件的轴，默认为 Axis.vertical。

安装

要在项目中使用 RefreshSticky 小部件，请将以下依赖项添加到您的 pubspec.yaml 文件中：

dependencies:
  refresh_sticky: ^0.1.1+1

更多关于Flutter粘性刷新插件refresh_sticky的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter粘性刷新插件refresh_sticky的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter项目中使用refresh_sticky插件来实现粘性刷新功能的代码示例。refresh_sticky插件允许你在列表顶部创建一个粘性头部，该头部在刷新时会保持可见并可以进行自定义动画。

首先，确保你的pubspec.yaml文件中已经添加了refresh_sticky依赖：

dependencies:
  flutter:
    sdk: flutter
  refresh_sticky: ^x.y.z  # 替换为最新版本号

然后运行flutter pub get来安装依赖。

接下来是一个完整的示例代码，展示如何使用refresh_sticky来实现粘性刷新：

import 'package:flutter/material.dart';
import 'package:refresh_sticky/refresh_sticky.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Refresh Sticky Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with AutomaticKeepAliveClientMixin {
  final RefreshController _refreshController = RefreshController();
  final List<String> _items = List.generate(20, (index) => "Item $index");

  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('Refresh Sticky Demo'),
      ),
      body: RefreshStickyHeader(
        controller: _refreshController,
        onRefresh: () async {
          // 模拟网络请求或数据处理
          await Future.delayed(Duration(seconds: 2));
          // 刷新完成后调用此方法
          _refreshController.refreshCompleted();
          // 可以在这里添加新的数据到_items列表中
          setState(() {
            _items.insert(0, "New Item");
          });
        },
        header: Container(
          height: 60.0,
          color: Colors.blue,
          alignment: Alignment.center,
          child: Text(
            'Pull to Refresh',
            style: TextStyle(color: Colors.white, fontSize: 18),
          ),
        ),
        child: ListView.builder(
          itemCount: _items.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(_items[index]),
            );
          },
        ),
      ),
    );
  }

  @override
  void dispose() {
    _refreshController.dispose();
    super.dispose();
  }
}

代码说明

  1. 依赖导入：确保pubspec.yaml中包含了refresh_sticky依赖。

  2. RefreshController：创建了一个RefreshController实例来控制刷新逻辑。

  3. RefreshStickyHeader：

    • controller：绑定到RefreshController实例。
    • onRefresh：定义了刷新时的逻辑，这里模拟了一个2秒的延迟，然后调用_refreshController.refreshCompleted()来结束刷新。
    • header：自定义的粘性头部，这里是一个简单的蓝色容器。
    • child：列表视图，使用ListView.builder来动态构建列表项。

  4. 自动保持活跃：with AutomaticKeepAliveClientMixin和bool get wantKeepAlive => true;用于在导航回此页面时保持状态。

  5. dispose方法：在组件销毁时释放RefreshController资源。

这个示例展示了如何使用refresh_sticky插件在Flutter应用中实现粘性头部刷新功能。你可以根据实际需求进一步自定义头部视图和刷新逻辑。

回到顶部