Flutter

Question

假设我有一个 ProductCard() 小部件和 ProductDetails() 小部件。在我的主屏幕上，我想显示当天的交易和本周的交易。当我用 Hero() 小部件包装 ProductCard() 时，我将 product.id 作为键。现在，当同一产品出现在两个类别中时就会出现问题：当天的交易和本周的交易，因为存在键冲突。请问这种情况怎么解决，或者这种情况不能使用Hero()？

Answer 1

假设，第一个屏幕是 MainScreen，第二个屏幕是 DetailScreen

class MainScreen extends StatelessWidget {
String type = 'weekly/daily chose one';
..rest code...
    child: Hero(
      tag: 'imageHero$type', //assign the key including type weekly or daily etc
      child: .. content widget ...
    ),
    onTap: () {
      Navigator.push(context, MaterialPageRoute(builder: (_) {
        return DetailScreen(type:type); //pass the type as parameter to constructor
      }));
    },
  ...rest code...

在详细信息屏幕上将密钥中的 type 消耗为

class DetailScreen extends StatelessWidget {
  ... rest code ...
      child: Hero(
        tag: 'imageHero${widget.type}', // user the passed type here as included in the key
        child: ... your widgets ...
      ),
    ),
    onTap: () {
      Navigator.pop(context);
    },
  ... rest code ...

编辑： 我假设你已经实现了 product.id as a key assignment

Flutter - Hero 小部件 - 2 个具有相同键的英雄？

Flutter - Hero widget - 2 hero with same key?

flutter-animation