长列表布局的设计与实现-如何使用ListView下拉刷新和上拉加载更多？

2023-10-15 21:55:32

前言

在现实开发中，长列表布局几乎是所有APP的标配，几乎你所使用的任何一款app都能找到长列表的身影。而在长列表中，必不可少的操作肯定是下拉刷新和上拉加载更多。在原生Android中，我们一般使用RecyclerView配合support.v4包下面的SwipeRefreshLayout来完成下拉刷新和上拉加载的操作。而在Flutter中，我们也可以使用ListView来实现类似的功能。

ListView的下拉刷新

ListView的下拉刷新非常简单，我们可以使用RefreshIndicator组件来实现。RefreshIndicator组件是一个可刷新的指示器，它可以放在ListView的头部，当用户下拉时，该组件会显示一个刷新图标，并触发一个刷新事件。

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

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

class _MyHomePageState extends State<MyHomePage> {
  // 用于保存列表的数据
  final List<String> items = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter ListView下拉刷新'),
      ),
      body: RefreshIndicator(
        // 下拉刷新触发的回调函数
        onRefresh: () async {
          // 模拟网络请求获取数据
          await Future.delayed(const Duration(seconds: 1));

          // 更新列表数据
          setState(() {
            items.addAll(['Item ${items.length + 1}', 'Item ${items.length + 2}']);
          });
        },
        child: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(items[index]),
            );
          },
        ),
      ),
    );
  }
}

ListView的上拉加载更多

ListView的上拉加载更多也比较简单，我们可以使用ListView.builder的loadMore回调函数来实现。loadMore回调函数会在滚动到列表底部时触发，此时我们可以加载更多的列表数据。

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

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

class _MyHomePageState extends State<MyHomePage> {
  // 用于保存列表的数据
  final List<String> items = [];

  // 是否正在加载更多
  bool isLoadingMore = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter ListView上拉加载更多'),
      ),
      body: ListView.builder(
        itemCount: items.length + 1,
        itemBuilder: (context, index) {
          if (index == items.length) {
            // 加载更多
            _loadMore();

            return const Center(
              child: CircularProgressIndicator(),
            );
          } else {
            return ListTile(
              title: Text(items[index]),
            );
          }
        },
        // 当滚动到列表底部时触发的回调函数
        loadMore: _loadMore,
      ),
    );
  }

  void _loadMore() async {
    if (!isLoadingMore) {
      isLoadingMore = true;

      // 模拟网络请求获取数据
      await Future.delayed(const Duration(seconds: 1));

      // 更新列表数据
      setState(() {
        items.addAll(['Item ${items.length + 1}', 'Item ${items.length + 2}']);
        isLoadingMore = false;
      });
    }
  }
}