在 Flutter 中使用 Provider 更新和动画化 AnimatedList

Question

当列表数据存储在拥有列表小部件的同一组件中时，我能够在 Flutter 中成功地为 AnimatedList 的内容制作动画（即，当列表数据发生更改时不会发生重建）。当我尝试使用 Provider 和 Consumer 从 ChangeNotifier 获取列表项目时遇到问题。

拥有AnimatedList 的组件，我们称之为ListPage，是用Consumer<ListItemService> 构建的。我的理解是，只要服务更新列表数据并调用notifyListeners()，就会重建ListPage。发生这种情况时，我不确定在ListPage 内的哪个位置我可以调用AnimatedListState.insertItem 来为列表设置动画，因为在build 期间，列表状态仍然是null。结果是一个不为其内容设置动画的列表。

我认为我的问题归结为“如果实时获取和更新内容，我如何管理此列表的状态？”，理想情况下，我想了解发生了什么，但我愿意接受建议如果这不是完成任务的最佳方式，我应该如何改变它。

下面是一些说明问题的代码：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider<AuthService>(
          create: (_) => AuthService(),
        ),
        ChangeNotifierProxyProvider<AuthService, ListItemService>(
          create: (_) => ListItemService(),
          update: (_, authService, listItemService) =>
              listItemService!..update(authService),
        ),
      ],
      child: MaterialApp(
        home: HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Consumer<ListItemService>(
      builder: (context, listItemService, _) =>
          ListPage(items: listItemService.items),
    );
  }
}

// Implementation details aren't really relevant, but
// this only updates if the user logs in or out.
class AuthService extends ChangeNotifier {}

class ListItemService extends ChangeNotifier {
  List<Item> _items = [];
  List<Item> get items => _items;

  Future<void> update(AuthService authService) async {
    // Method that subscribes to a Firestore snapshot
    // and calls notifyListeners() after updating _items.
  }
}

class Item {
  Item({required this.needsUpdate, required this.content});

  final String content;
  bool needsUpdate;
}

class ListPage extends StatefulWidget {
  const ListPage({Key? key, required this.items}) : super(key: key);

  final List<Item> items;

  @override
  _ListPageState createState() => _ListPageState();
}

class _ListPageState extends State<ListPage> {
  final GlobalKey<AnimatedListState> _listKey = GlobalKey();
  late int _initialItemCount;

  @override
  void initState() {
    _initialItemCount = widget.items.length;
    super.initState();
  }

  void _updateList() {
    for (int i = 0; i < widget.items.length; i++) {
      final item = widget.items[i];
      if (item.needsUpdate) {
        // _listKey.currentState is null here if called
        // from the build method.
        _listKey.currentState?.insertItem(i);
        item.needsUpdate = false;
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    _updateList();
    return AnimatedList(
      key: _listKey,
      initialItemCount: _initialItemCount,
      itemBuilder: (context, index, animation) => SizeTransition(
        sizeFactor: animation,
        child: Text(widget.items[index].content),
      ),
    );
  }
}

Answer 1

您可以使用didUpdateWidget 并检查新旧列表之间的差异。 “检查差异”意味着查看已删除和添加的内容。在您的情况下，Item 小部件应该有一些要识别的东西。例如，您可以使用Equatable，这样Items 之间的相等就是它们的属性之间的相等。

另一个重要方面是您正在处理一个列表，它是可变的，但小部件应该是不可变的。因此，无论何时修改列表，实际上都创建了一个新列表，这一点至关重要。

这里是实现细节，最有趣的部分当然是注释（虽然渲染也很有趣；））：

import 'dart:async';
import 'dart:math';

import 'package:equatable/equatable.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider<AuthService>(
          create: (_) => AuthService(),
        ),
        ChangeNotifierProxyProvider<AuthService, ListItemService>(
          create: (_) => ListItemService(),
          update: (_, authService, listItemService) => listItemService!..update(authService),
        ),
      ],
      child: MaterialApp(
        home: HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      child: SafeArea(
        child: Consumer<ListItemService>(
          builder: (context, listItemService, _) => ListPage(
            // List.from is very important because it creates a new list instead of
            // giving the old one mutated
            items: List.from(listItemService.items),
          ),
        ),
      ),
    );
  }
}

// Implementation details aren't really relevant, but
// this only updates if the user logs in or out.
class AuthService extends ChangeNotifier {}

class ListItemService extends ChangeNotifier {
  List<Item> _items = [];

  List<Item> get items => _items;

  Future<void> update(AuthService authService) async {
    // Every 5 seconds
    Timer.periodic(Duration(seconds: 5), (timer) {
      // Either create or delete an item randomly
      if (Random().nextDouble() > 0.5 && _items.isNotEmpty) {
        _items.removeAt(Random().nextInt(_items.length));
      } else {
        _items.add(
          Item(
            needsUpdate: true,
            content: 'This is item with random number ${Random().nextInt(10000)}',
          ),
        );
      }
      notifyListeners();
    });
  }
}

class Item extends Equatable {
  Item({required this.needsUpdate, required this.content});

  final String content;
  bool needsUpdate;

  @override
  List<Object?> get props => [content]; // Not sure you want to include needsUpdate?
}

class ListPage extends StatefulWidget {
  const ListPage({Key? key, required this.items}) : super(key: key);

  final List<Item> items;

  @override
  _ListPageState createState() => _ListPageState();
}

class _ListPageState extends State<ListPage> {
  final _listKey = GlobalKey<AnimatedListState>();

  // You can use widget if you use late
  late int _initialItemCount = widget.items.length;

  /// Handles any removal of [Item]
  _handleRemovedItems({
    required List<Item> oldItems,
    required List<Item> newItems,
  }) {
    // If an [Item] was in the old but is not in the new, it has
    // been removed
    for (var i = 0; i < oldItems.length; i++) {
      final _oldItem = oldItems[i];
      // Here the equality checks use [content] thanks to Equatable
      if (!newItems.contains(_oldItem)) {
        _listKey.currentState?.removeItem(
          i,
          (context, animation) => SizeTransition(
            sizeFactor: animation,
            child: Text(oldItems[i].content),
          ),
        );
      }
    }
  }

  /// Handles any added [Item]
  _handleAddedItems({
    required List<Item> oldItems,
    required List<Item> newItems,
  }) {
    // If an [Item] is in the new but was not in the old, it has
    // been added
    for (var i = 0; i < newItems.length; i++) {
      // Here the equality checks use [content] thanks to Equatable
      if (!oldItems.contains(newItems[i])) {
        _listKey.currentState?.insertItem(i);
      }
    }
  }

  // Here you can check any update
  @override
  void didUpdateWidget(covariant ListPage oldWidget) {
    super.didUpdateWidget(oldWidget);
    _handleAddedItems(oldItems: oldWidget.items, newItems: widget.items);
    _handleRemovedItems(oldItems: oldWidget.items, newItems: widget.items);
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedList(
      key: _listKey,
      initialItemCount: _initialItemCount,
      itemBuilder: (context, index, animation) => SizeTransition(
        sizeFactor: animation,
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(widget.items[index].content),
        ),
      ),
    );
  }
}