Flutter 图像在 navigator pop 上再次下载

Posted 2023-03-28

【中文标题】Flutter 图像在 navigator pop 上再次下载

【英文标题】：Flutter images download again on navigator pop

【发布时间】：2021-08-22 18:15:04

【问题描述】：

您好，我在抖动图像流时遇到问题，当我执行 Navigator.push() 然后 Navigator.pop() 时，流的图像会重新加载。

我的类是带有 AutomaticKeepAliveClientMixin 的有状态小部件

When images gets donwloaded After a Navigator.push() and then Navigator.pop()

我使用 Riverpod 作为流和 Firebase 存储。

 Expanded(
                child: watch(userEventsFamilyStream(user.uid)).maybeWhen(
                    data: (events) 
                      if (events.isEmpty) 
                        return EmptyGrid(
                            onTap: () => context
                                .read(menuNotifier)
                                .currentIndex = 1);
                      
                      return Stack(
                        children: [
                          GridView.count(
                            crossAxisCount: 3,
                            children: [
                              ...events.map((event) 
                                return EventItem(
                                  uid: event.uid,
                                  imgUrl: event.imgUrl,
                                  onTap: () async 
                                    final result =
                                        await buildOptions(context);
                                    _handleResult(
                                        context, result, actions, event);
                                  ,
                                );
                              ).toList()
                            ],
                          ),
                          if (state.isSubmitting)
                            Container(
                                decoration: const BoxDecoration(
                                    color: Colors.black54),
                                width: MediaQuery.of(context).size.width,
                                child: const Center(
                                    child: CircularProgressIndicator())),
                        ],
                      );
                    ,
                    orElse: () =>
                        const Center(child: CircularProgressIndicator())),
              ),

我也用cached_network_image package

Hero(
    tag: '$uidprofile',
    child: FadeInImage(
      placeholder: const AssetImage('assets/img/transparent.png'),
      image: CachedNetworkImageProvider(imgUrl),
      fit: BoxFit.cover,
    ),
  ),

【参考方案1】：

如果你想保持页面的状态，你可以使用AutomaticKeepAliveClientMixin

class Foo extends StatefulWidget 
  @override
  FooState createState() 
    return new FooState();
  


class FooState extends State<Foo> with AutomaticKeepAliveClientMixin 
  @override
  Widget build(BuildContext context) 
    return Container();
  

  @override
  bool get wantKeepAlive => true;

【讨论】：

我的类是一个有状态的小部件，带有那个 mixin。

【参考方案2】：

我解决了：问题是图像的大小，如果图像太大，即使缓存也需要一些时间才能加载。