Flutter中如何保存每个列表对象的状态

Question

我有一个网络套接字，它发送带有一些数据的图像，然后我将它们显示在 AnimatedList 中。问题是每个新数据都进来了，它会重新加载列表中的每一个项目，列表会重新加载每个图像。也因为图片是base64转换的，所以不能兑现。

有什么方法可以保留AnimatedList 中每个对象的状态，以便在添加新项目时不会重新加载列表中的所有其他对象/图像。

AnimatedList 样本：

AnimatedList(
  key: node.validListKey,
  controller: widget.scrollController,
  padding: EdgeInsets.fromLTRB(10, 10, 0, 10),
  initialItemCount: node.data.length,
  itemBuilder: (context, index, animation) {
    return FadeTransition(
      opacity: CurvedAnimation(
          parent: animation,
          curve: Interval(0, 0.2, curve: Curves.ease)),
      child: SizeTransition(
        sizeFactor:
            CurvedAnimation(parent: animation, curve: Curves.ease),
        child: DataContainer(data[index])
      ),
    );
  },
),

基本解码示例：

child: AspectRatio(
  aspectRatio: 1 / 1,
  child: ExtendedImage.memory(
    base64.decode(data.base),
    fit: BoxFit.cover,
    loadStateChanged: (state) {
      if (state.extendedImageLoadState ==
          LoadState.completed) {
        return ExtendedRawImage(
          image: state.extendedImageInfo?.image,
        );
      }
      return Center(child: CircularProgressIndicator());
    },
  ),
),

更新#1 似乎问题在于我如何在列表中插入项目。因为我在列表的开头插入了新项目，由于某种原因，它只为最后一个元素调用 init 状态，而不是最近添加的元素。当我在列表末尾插入时，问题就解决了。有什么办法可以强制为最近添加的项目而不是最后一个项目调用初始化状态？

插入项目示例：

array.add(data);
array.insert(0, data);
if (key.currentState != null)
  key.currentState.insertItem(0, duration: _insertDuation);

更新#2 因此，我能够通过将 AnimatedList 包裹在 SingleChildScrollView 中，添加 reverse: true、shrinkWrap: true 并在 initState 方法中添加 decode 来解决我的图像重新加载的第一个问题。

SingleChildScrollView(
  child : ListView.builer(
    shrinkWrap: true,
    reverse: true,
    physics: NeverScrollableScrollPhysics(),
    itemBuilder: (BuildContext context, int index) {
      ...
    },
  )
);

但现在问题出在remove 方法上。当我尝试从列表中删除项目时，基本小部件内容保持不变，但图像会更改一个索引。我已经尝试为每个小部件添加唯一键，但是在添加数据时会强制重新加载每个图像。

_data.removeAt(0);
if (_validListKey.currentState != null)
  _validListKey.currentState.removeItem(
      0, (context, animation) => Container(),
      duration: Duration.zero);

Answer 1

您应该在 initState 函数（或在 initState 中触发的异步函数）中执行 base64.decode(data.base) 并缓存结果。

您的构建函数不应触发此解码，或者不应运行任何具有副作用的代码。现在，在每次构建时，您都在进行解码并为ExtendedImage 提供不同的Uint8List 实例。如果ExtendedImage 被正确实现，当它在新的build() 调用中被赋予相同的引用时，它不应该做任何UI 更改。