Question

我正在做一个扑朔迷离的学校项目，其中有卡片的列表视图。该卡具有一张图像，该图像存储在地图中。映射是此Map<String,Image> _imgMap，键是_objectList（动态列表）上的name属性。我将图像传递给另一个名为Loader的类，该类是一个有状态的小部件，在图像加载时返回带有circleProgress指示器的容器，并在完成后返回图像。

ListView.builder(
 itemCount: _objectList.length,
 itemBuilder: (context,index){
  return Card(
  ...
  Row(
   children<Widget>[
     Container(child: Loader(image: _imgMap[_objectList[index].name]))
    ]
  ...

Loader Class:

class Loader extends StatefulWidget {

  Image image;
  Loader({Key key,this.image}) : super(key : key);

   @override
  _LoaderState createState() => _LoaderState(image);
}

class _LoaderState extends State<Loader> {
  Image _image;
  bool wait=true;
  _LoaderState(this._image);

  void initState(){
    _image.image.resolve(ImageConfiguration()).addListener(
      ImageStreamListener(
            (info, call) {
          setState(() {
            wait = false;
          });
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return wait ?CircleAvatar(
      backgroundColor: Colors.transparent,
      radius: 50,
      child: simpleCircleLoading() //this is the circleprogress widget,
    ): Image(image: _image.image);
  }

}

第一次运行良好，显示正确的图像。但是，在添加了一种搜索功能之后，该功能允许用户按名称搜索，然后仅使用匹配的列表更新列表，结果图像是错误的。

void search(String value) {
   if(value.isNotEmpty){
     List<dynamic> result = List<dynamic>();
     _backUp.forEach((obj) { //_backup is the complete list of objects, will not change
       if(obj.name.toLowerCase().contains(value.toLowerCase())) {
         result.add(obj);
       }
     });
     setState(() {
       _objectList = result;
     });
   }else {
     setState(() {
       _objectList = _backUp;
     });
   }
 }

示例：

The initial list

Search result

如您所见，卡上的信息正在更新，但图像未更新。问题是我认为是加载器类中的某个地方，因为用Image小部件替换了列表视图中的加载器可修复错误，但我想显示一个加载程序。

Answer 1

发现错误，我必须将UniqueKey传递给Loader类。

颤振：图像未更新

1 个答案: