Flutter下拉刷新插件xb_refresh的使用

在本教程中，我们将展示如何使用 xb_refresh 插件来实现 Flutter 应用程序中的下拉刷新功能。首先，我们需要将 xb_scaffold 包添加到项目中。

安装

flutter pub add xb_scaffold

使用

步骤1: 导入必要的包

确保你已经导入了 xb_scaffold 和 xb_refresh 相关的包。

// ignore_for_file: library_private_types_in_public_api

import 'package:flutter/material.dart';
import 'package:xb_scaffold/xb_scaffold.dart';
import 'xb_refresh.dart';
import 'xb_refresh_controller.dart';

步骤2: 创建一个带有刷新功能的页面

接下来，我们创建一个包含下拉刷新功能的页面。

class XBRefreshDemo extends StatefulWidget {
  const XBRefreshDemo({super.key});

  [@override](/user/override)
  _XBRefreshDemoState createState() => _XBRefreshDemoState();
}

class _XBRefreshDemoState extends State<XBRefreshDemo> {
  final ScrollController _controller = ScrollController();

  final XBRefreshController xbRefreshController = XBRefreshController();

  int _itemCount = 10;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("xb refresh demo"),
          actions: [
            XBButton(
                onTap: () {
                  xbRefreshController.refresh();
                },
                child: Container(
                  color: Colors.transparent,
                  child: const Padding(
                    padding: EdgeInsets.all(8.0),
                    child: Text("开始刷新"),
                  ),
                )),
          ],
        ),
        body: Container(
          height: screenH * 0.8,
          width: screenW * 0.8,
          color: colors.randColor,
          child: XBRefresh(
            controller: xbRefreshController,
            needLoadMore: true,
            needRefresh: true,
            initRefresh: true,
            // needShowComplete: true,
            // needShowHasMoreFooter: true,

            ///开始加载更多的回调
            onBeginLoadMore: () {
              Future.delayed(const Duration(seconds: 2), () {
                bool hasMore = false;
                if (_itemCount < 20) {
                  hasMore = true;
                  setState(() {
                    _itemCount += 2;
                  });
                }

                ///结束加载更多，传是否有新数据
                xbRefreshController.endLoadMore(hasMore);
              });
            },
            onBeginRefresh: () {
              Future.delayed(const Duration(seconds: 1), () {
                setState(() {
                  _itemCount = 10;
                });
                xbRefreshController.endRefresh();
              });
            },
            headerCompleteBuilder: (height) {
              return Container(
                height: height,
                color: Colors.red,
                child: const Center(
                  child: Text("完成刷新"),
                ),
              );
            },
            footerHasMoreBuilder: (height) {
              return Container(
                height: height,
                color: Colors.green,
                child: const Center(
                  child: Text("拉取新数据完成"),
                ),
              );
            },
            // child: CustomScrollView(
            //   controller: _controller,
            //   slivers: <Widget>[
            //     SliverList(
            //         delegate: SliverChildBuilderDelegate((ctx, index) {
            //       return Cell("$index", () {});
            //     }, childCount: _itemCount))
            //   ],
            // )
            // child: ListView.builder(
            //   controller: _controller,
            //   itemCount: _itemCount,
            //   itemBuilder: (context, index) {
            //     return Cell("$index", () {});
            //   },
            // ),
            child: Container(
              height: screenH * 0.5,
              color: colors.randColor,
            ),
          ),
        ));
  }

  [@override](/user/override)
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

步骤3: 创建单元格组件

为了展示数据，我们还需要创建一个简单的单元格组件。

class Cell extends StatelessWidget {
  static const height = 44.0;
  final String title;
  final VoidCallback onPressed;

  const Cell(this.title, this.onPressed, {super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPressed,
      child: Container(
        height: height,
        color: Colors.black38,
        alignment: Alignment.center,
        child: Column(
          children: <Widget>[
            Expanded(
                child: Center(
                    child: Text(title,
                        style: const TextStyle(color: Colors.white)))),
            Container(
              height: 1,
              color: Colors.white,
            )
          ],
        ),
      ),
    );
  }
}