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

Posted 2023-02-23

【中文标题】Flutter - 来自 Firebase 的英雄小部件子图像 url

【英文标题】：Flutter - Hero widget child Image url from Firebase

【发布时间】：2021-04-08 22:10:36

【问题描述】：

我正在尝试创建一个具有子 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 吗？如果不是什么问题？

提前致谢。

【参考方案1】：

这是因为FutureBuilder 每次重建整个第一个小部件时都会获取数据。 为防止这种情况，请创建获取 headerPhoto 的新函数并更新第一个小部件的状态。在initState 中调用这个函数。这应该可以解决问题。