Flutter 零基础入门（三十九）：Pull-to-Refresh 与列表分页 —— 完整列表交互实战

LarryLan

发布于 2026-03-03 15:46:01

330

Pull-to-Refresh 与列表分页 —— 完整列表交互实战

到目前为止，你已经掌握了：

网络请求获取列表数据（http / dio）
异步更新 UI（Future / async / await）
动态页面刷新（StatefulWidget + setState）

但是一个真实的 App 列表通常需要：

下拉刷新数据
上拉加载更多（分页）
错误处理与加载提示

本篇，我们将把这些功能整合成 完整的列表交互示例。

一、下拉刷新 RefreshIndicator

1️⃣ 基础用法

RefreshIndicator(
  onRefresh: _refreshData,
  child: ListView.builder(
    itemCount: _items.length,
    itemBuilder: (context, index) {
      return ListTile(title: Text(_items[index]));
    },
  ),
)

📌 功能：

用户下拉 → 调用 _refreshData
刷新数据后自动结束刷新动画

2️⃣ refreshData 示例

Future<void> _refreshData() async {
  await Future.delayed(Duration(seconds: 2)); // 模拟网络请求
  setState(() {
    _items = List.generate(20, (index) => '刷新数据 $index');
  });
}

📌 RefreshIndicator 只能包裹可滚动组件（ListView / GridView / SingleChildScrollView）

二、列表分页（上拉加载更多）

1️⃣ 使用 ScrollController

ScrollController _controller = ScrollController();

@override
void initState() {
  super.initState();
  _controller.addListener(() {
    if (_controller.position.pixels == _controller.position.maxScrollExtent) {
      _loadMore();
    }
  });
  _refreshData();
}

📌 当滚动到最底部 → 调用 _loadMore() 加载更多数据

2️⃣ 加载更多方法

Future<void> _loadMore() async {
  await Future.delayed(Duration(seconds: 2));
  setState(() {
    int currentLength = _items.length;
    _items.addAll(List.generate(10, (index) => '更多数据 ${currentLength + index}'));
  });
}

📌 简单模拟分页加载，真实项目中可结合 page 参数请求 API

三、完整示例：下拉刷新 + 上拉加载

class PullLoadListPage extends StatefulWidget {
  @override
  _PullLoadListPageState createState() => _PullLoadListPageState();
}

class _PullLoadListPageState extends State<PullLoadListPage> {
  List<String> _items = [];
  ScrollController _controller = ScrollController();

  @override
  void initState() {
    super.initState();
    _controller.addListener(() {
      if (_controller.position.pixels == _controller.position.maxScrollExtent) {
        _loadMore();
      }
    });
    _refreshData();
  }

  Future<void> _refreshData() async {
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      _items = List.generate(20, (index) => '刷新数据 $index');
    });
  }

  Future<void> _loadMore() async {
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      int currentLength = _items.length;
      _items.addAll(List.generate(10, (index) => '更多数据 ${currentLength + index}'));
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('列表分页示例')),
      body: RefreshIndicator(
        onRefresh: _refreshData,
        child: ListView.builder(
          controller: _controller,
          itemCount: _items.length,
          itemBuilder: (context, index) {
            return ListTile(title: Text(_items[index]));
          },
        ),
      ),
    );
  }
}

📌 功能总结：