flutter - 为什么 AnimatedList 不使用 flutter 中的 bloc 状态列表来构建？

Question

我正在尝试使用 bloc 模式创建一个 AnimatedList，但遇到了一些问题。

当我将 AnimatedList 的 initialItemsCount 设置为 state.itemList.length 时，它不会构建。尽管当我在 BlocConsumer 的监听器中打印出 state.itemList(来自 ListBloc)时，它打印出 itemList.

那么，问题是为什么这不起作用？

我尝试用 ListView.builder 做同样的事情，它工作正常。我是不是遗漏了什么或者 AnimatedList 甚至不应该使用 bloc 工作？

这里有一些示例代码，对于这种情况来说非常简单:

MyApp 类:

class _MyAppState extends State<MyApp> {
  final key = GlobalKey<AnimatedListState>();

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => ListBloc()..add(LoadList()),
      child: MaterialApp(
        home: SafeArea(
          child: BlocConsumer<ListBloc, ListState>(
            listener: (_, state) {
              print(state.itemList);
            },
            builder: (context, state) => Scaffold(
              body: Column(
                children: [
                  Expanded(
                    child: AnimatedList(
                      key: key,
                      initialItemCount: state.itemList.length,
                      itemBuilder: (context, index, animation) {
                        return Item(
                            animation: animation,
                            index: index,
                            text: state.itemList[index],
                            onTap: () => removeItem(index, state.itemList));
                      },
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

  void removeItem(int index, List<String> items) {
    final item = items.removeAt(index);

    key.currentState?.removeItem(
        index,
        (context, animation) => Item(
            animation: animation,
            index: index,
            text: items[index],
            onTap: () => removeItem(index, items)));
  }
}

元素等级:

class Item extends StatelessWidget {
  final Animation<double> animation;
  final int index;
  final String text;
  final VoidCallback onTap;

  const Item(
      {required this.animation,
      required this.index,
      required this.text,
      required this.onTap,
      Key? key})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ScaleTransition(
      scale: animation,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: InkWell(
            onTap: onTap,
            child: Container(
              color: Colors.blue,
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(text),
              ),
            )),
      ),
    );
  }
}

Bloc :

class ListEvent extends Equatable {
  const ListEvent();

  @override
  List<Object> get props => [];
}

class LoadList extends ListEvent {}

class ListState extends Equatable {
  final List<String> itemList;

  const ListState({required this.itemList});

  @override
  List<Object> get props => [itemList];
}

class ListBloc extends Bloc<ListEvent, ListState> {
  ListBloc() : super(ListState(itemList: []));

  @override
  Stream<ListState> mapEventToState(ListEvent event) async* {
    if (event is LoadList) {
      var items = ['1', '2', '3', '4', '5', '6'];
      yield ListState(itemList: items);
    }
  }
}

谢谢!

Answer 1

在如何调用 itemBuilder 和重建列表方面，我遇到过与 AnimatedList 类似的情况。

如果您在 AnimatedList 小部件(即您的父 Expanded 小部件)上方和 itemBuilder 调用中设置一个断点，您可能会注意到在某些情况下 itemBuilder 正在执行而没有命中第一个断点.

这看起来是因为 AnimatedList 的动画特性导致 itemBuilder 作为框架页面刷新的一部分被直接调用(在包含的小部件之外，例如您的 BlocConsumer，因此您的状态尚未设置为您期望的).