Flutter列表管理插件bloc_list的使用

准备工作

一个灵活且可定制的列表小部件，用于使用BLoC模式进行状态管理的Flutter应用程序。它提供了动态数据加载、状态相关的渲染、自定义加载器支持以及错误处理，非常适合创建响应式和用户友好的列表视图。

使用方法

示例代码

void main() {
  runApp(MultiBlocProvider(
    providers: [
      BlocProvider(create: (_) => TodoBloc(DataService())),
    ],
    child: const MainApp(),
  ));
}

主页面构建

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
      appBar: AppBar(title: const Text('Todo List')),
      floatingActionButton: FloatingActionButton(
        shape: const CircleBorder(),
        onPressed: () => _addOrUpdateTodoItem(context),
        backgroundColor: Theme.of(context).primaryColor,
        child: const Icon(Icons.add, color: Colors.white),
      ),
      body: BlocList<TodoModel, TodoBloc, ListState>(
        emptyBuilder: (context, state) {
          return const Center(child: Text('请添加一个待办事项'));
        },
        loadBuilder: (context, state) {
          return const Center(
              child: CircularProgressIndicator(
            color: Colors.black,
          ));
        },
        onItemError: (errorType, item, errorMessage) {
          item.isBusy = false;
          _displaySnackBar(context, errorMessage);
        },
        onItemAdding: (addingItem) {
          addingItem.isBusy = true;
        },
        onItemDeleting: (deletingItem) {
          deletingItem.isBusy = true;
        },
        onItemUpdating: (newItem, oldItem) {
          oldItem.isBusy = true;
        },
        onItemDeleted: (deletedItem) {
          _displaySnackBar(context, "已删除 ${deletedItem.description}");
        },
        onItemUpdated: (newItem, oldItem) {
          _displaySnackBar(context,
              "更新了 ${oldItem.description} 为 ${newItem.description}");
        },
        onItemAdded: (addedItem) {
          addedItem.isBusy = false;
          _displaySnackBar(context, "添加了 ${addedItem.description}");
        },
        itemBuilder: (context, index, item) {

          var outputFormat = DateFormat('dd MMM yyyy HH:mm');
          var date = outputFormat.format(item.created);

          return ListTile(
            title: Text(
              item.description,
              style:
                  TextStyle(color: item.isBusy ? Colors.grey : Colors.black),
            ),
            trailing: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                IconButton(
                  icon: Icon(Icons.edit,
                      color: item.isBusy ? Colors.grey : Colors.black),
                  onPressed: () {
                    _addOrUpdateTodoItem(context, index: index, item: item);
                  },
                ),
                IconButton(
                  icon: Icon(Icons.delete,
                      color: item.isBusy ? Colors.grey : Colors.black),
                  onPressed: () {
                    _deleteDialog(context, () {
                      BlocProvider.of<TodoBloc>(context)
                          .add(DeleteDataEvent(item));
                    });
                  },
                ),
              ],
            ),
            subtitle: Padding(
              padding: const EdgeInsets.only(top: 5.0),
              child: Text(
                date,
                style: TextStyle(
                    color: item.isBusy ? Colors.grey : Colors.black54),
              ),
            ),
          );
        },
        loadData: () async {
          BlocProvider.of<TodoBloc>(context).add(LoadDataEvent());
        },
        stateCondition: (state) => state,
      ));
}

TodoBloc类定义

class TodoBloc extends ListBloc<TodoModel> {
  final DataService dataService;
  TodoBloc(this.dataService)
      : super(
          dataProvider: ([id]) => dataService.getTodoList(id),
          dataAdder: (item) => dataService.addTodo(item),
          dataDeleter: (item) => dataService.deleteTodo(item),
          dataSorter: (items, [compare]) =>
              items.sort((a, b) => b.created.compareTo(a.created)),
          dataUpdater: (item) => dataService.updateTodo(item),
        );
}

获取待办事项列表的方法

Future<BlocResponse<List<TodoModel>>> getTodoList([int? id]) async {
  final response = await http
      .get(Uri.parse('https://example.com/todos'));

  if (response.statusCode == 200) {
    List<TodoModel> todos = (jsonDecode(response.body) as List<dynamic>)
        .map((e) => TodoModel.fromJson(e as Map<String, dynamic>))
        .toList();

    return BlocResponse<List<TodoModel>>(success: true, data: todos);
  } else {
    return BlocResponse<List<TodoModel>>(
        success: false, message: "无法加载待办事项");
  }
}

示例演示

完整示例代码

import 'package:example/blocs/chat_bloc.dart';
import 'package:example/blocs/todo_bloc.dart';
import 'package:example/data/data_service.dart';
import 'package:example/screens/chat.dart';
import 'package:example/screens/home_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

void main() {
  runApp(MultiBlocProvider(
    providers: [
      BlocProvider(create: (_) => TodoBloc(DataService())),
      BlocProvider(create: (_) => ChatBloc(DataService())),
    ],
    child: const MainApp(),
  ));
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    // return const MaterialApp(home: TodoListPage());
    return const MaterialApp(home: HomePage());
  }
}