Flutter 图像在 navigator pop 上再次下载答案

【问题标题】：Flutter images download again on navigator popFlutter 图像在 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: '${uid}profile',
    child: FadeInImage(
      placeholder: const AssetImage('assets/img/transparent.png'),
      image: CachedNetworkImageProvider(imgUrl),
      fit: BoxFit.cover,
    ),
  ),

【问题讨论】：

标签： image flutter caching firebase-storage

【解决方案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】：

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

【讨论】：