Flutter无限滚动列表插件better_infinite_list的使用

在本指南中，我们将展示如何使用 better_infinite_list 插件来实现一个无限滚动列表。此插件非常适合处理大量数据的情况，例如社交媒体应用中的动态列表或电商应用中的商品列表。

功能

功能将在后续版本中更新 😅

开始使用

本示例使用了Bloc来管理状态。

使用方法

以下是一个完整的示例，展示了如何使用 better_infinite_list 插件来创建一个无限滚动列表。

import 'package:flutter/material.dart';
import 'package:better_infinite_list/better_infinite_list.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

// 假设你有一个RickyMortyCubit类用于管理状态
class RickyMortyCubit {
  // 增加页码并加载更多数据
  void increaseAndLoad() {
    // 实现加载更多数据的逻辑
  }

  // 加载数据
  void loadData(int page) {
    // 实现加载指定页码数据的逻辑
  }
}

// 假设你有一个RickyMortyState类来表示当前的状态
class RickyMortyState {
  final CharacterResponse? characterResponse;
  final int currentPage;
  final Status status;

  RickyMortyState({required this.characterResponse, required this.currentPage, required this.status});
}

// 假设你有一个CharacterResponse类来表示字符响应
class CharacterResponse {
  final List<Character> characters;

  CharacterResponse({required this.characters});
}

// 假设你有一个Character类来表示字符
class Character {
  final String name;
  final String image;

  Character({required this.name, required this.image});
}

class Status {
  static const failed = 'failed';
  static const initial = 'initial';
  static const loading = 'loading';
  static const loaded = 'loaded';
}

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

  @override
  Widget build(BuildContext context) {
    final cubit = RickyMortyCubit();
    return BlocBuilder<RickyMortyCubit, RickyMortyState>(
      bloc: cubit,
      builder: (context, state) {
        return BetterInfiniteList(
          // 列表项数量
          itemCount: state.characterResponse?.characters.length ?? 0,
          // 创建每个列表项
          itemBuilder: (context, index) {
            final currentItem = state.characterResponse!.characters[index];
            return ListTile(
              // 显示字符名称
              title: Text(currentItem.name),
              // 显示字符图像
              leading: Image.network(
                currentItem.image,
                width: 50,
                height: 60,
              ),
            );
          },
          // 当达到列表底部时触发的加载更多数据的方法
          fetchMore: () {
            cubit.increaseAndLoad();
          },
          // 列表项之间的间距
          sepratorSpacing: 10,

          // 根据状态设置BetterInfiniteList的状态
          status: switch (state.status) {
            Status.failed => BetterInfiniteStatus.error,
            Status.initial => BetterInfiniteStatus.idle,
            Status.loading => BetterInfiniteStatus.loading,
            Status.loaded => BetterInfiniteStatus.idle,
          },
          // 错误视图
          errorWidget: (context) => ListTile(
            title: const Text("Error Loading"),
            trailing: ElevatedButton(
                onPressed: () {
                  cubit.loadData(state.currentPage);
                },
                child: const Text("Retry")),
          ),
        );
      },
    );
  }
}

代码解释

1. 导入必要的包：

   import 'package:flutter/material.dart';
   import 'package:better_infinite_list/better_infinite_list.dart';
   import 'package:flutter_bloc/flutter_bloc.dart';
   

2. 定义RickyMortyCubit类：

   class RickyMortyCubit {
     void increaseAndLoad() {
       // 实现加载更多数据的逻辑
     }
   
     void loadData(int page) {
       // 实现加载指定页码数据的逻辑
     }
   }
   

3. 定义RickyMortyState类：

   class RickyMortyState {
     final CharacterResponse? characterResponse;
     final int currentPage;
     final Status status;
   
     RickyMortyState({required this.characterResponse, required this.currentPage, required this.status});
   }
   

4. 定义CharacterResponse类：

   class CharacterResponse {
     final List<Character> characters;
   
     CharacterResponse({required this.characters});
   }
   

5. 定义Character类：

   class Character {
     final String name;
     final String image;
   
     Character({required this.name, required this.image});
   }
   

6. 定义Status枚举：

   class Status {
     static const failed = 'failed';
     static const initial = 'initial';
     static const loading = 'loading';
     static const loaded = 'loaded';
   }
   

7. 定义TestWidget类：

   class TestWidget extends StatelessWidget {
     const TestWidget({
       super.key,
     });
   
     @override
     Widget build(BuildContext context) {
       final cubit = RickyMortyCubit();
       return BlocBuilder<RickyMortyCubit, RickyMortyState>(
         bloc: cubit,
         builder: (context, state) {
           return BetterInfiniteList(
             itemCount: state.characterResponse?.characters.length ?? 0,
             itemBuilder: (context, index) {
               final currentItem = state.characterResponse!.characters[index];
               return ListTile(
                 title: Text(currentItem.name),
                 leading: Image.network(
                   currentItem.image,
                   width: 50,
                   height: 60,
                 ),
               );
             },
             fetchMore: () {
               cubit.increaseAndLoad();
             },
             sepratorSpacing: 10,
             status: switch (state.status) {
               Status.failed => BetterInfiniteStatus.error,
               Status.initial => BetterInfiniteStatus.idle,
               Status.loading => BetterInfiniteStatus.loading,
               Status.loaded => BetterInfiniteStatus.idle,
             },
             errorWidget: (context) => ListTile(
               title: const Text("Error Loading"),
               trailing: ElevatedButton(
                   onPressed: () {
                     cubit.loadData(state.currentPage);
                   },
                   child: const Text("Retry")),
             ),
           );
         },
       );
     }
   }