时间戳

首页 > 解决方案 > Flutter - 来自 Firebase 的英雄小部件子图像 url

firebase - Flutter - 来自 Firebase 的英雄小部件子图像 url

问题描述

我正在尝试创建一个具有子 Image.network() 的 Hero 小部件

Hero(
 tag: 'headerView',
 transitionOnUserGestures: true,
 child: Image.network(
   headerPhoto,
   fit: BoxFit.cover,
 ),
)

图片 url -headerPhoto- 是从 Firestore 异步获取的，因此，我假设我必须将这个 Hero 小部件放在 FutureBuilder 中。

FutureBuilder(
  builder: (context, snapshot) {
  ...
    if (snapshot.connectionState == ConnectionState.done) {
      if (snapshot.hasData) {
        String headerPhoto = snapshot.data['headerPhoto'];
        return Scaffold(
          body:GestureDetector(
            onTap: () {
              _showPage('headerView', headerPhoto);
            },
            child: Hero(
              tag: 'headerView',
              transitionOnUserGestures: true,
              child: Image.network(
                headerPhoto,
                width: MediaQuery.of(context).size.width,
                fit: BoxFit.cover,
              ),
            ),
          ),
        )
      } 
    }
    ...
  },
  future: _fetchHeaderPhoto(userData),
);

当我像上面一样在 FutureBuilder 中使用 Hero 小部件时，第一个动画会正常工作。但是当我从 PageView 导航回来时——其中只有 Hero 小部件——动画不起作用。另一方面，当我尝试使用带有硬编码字符串的 Hero 小部件时，例如：

Hero(
  tag: 'headerView',
  transitionOnUserGestures: true,
  child: Image.network(
    'https://picsum.photos/200/300',
    fit: BoxFit.cover,
  ),
)

第一个动画和第二个动画都完美地工作。出现这个问题是因为我使用 FutureBuilder 吗？如果不是什么问题？

提前致谢。

标签： firebaseflutterasynchronousgoogle-cloud-firestore

解决方案

这是因为FutureBuilder每次重建整个第一个小部件时都会获取数据。为了防止这种情况发生，请创建新函数来获取headerPhoto和更新第一个小部件的状态。在里面调用这个函数initState。这应该够了吧。

推荐阅读