Flutter Widget 之HeroMode

Hero转换是种简易实用的方式，能在两个页面间提供简单的切换效果。但如果不想使用怎么办？

这时请用HeroMode来启用或禁用Hero

首先在代码中找到Hero再以HeroMode加以包装,然后再利用enabled属性，便可设置这个Hero是否执行动画的能力

HeroMode(
    child: Hero(
        child: Container(),
        tag: "my_hero"
    ),
    enabled: false,
)

这方面可做动态调整,视变化需要来启用或禁用Hero，例如以小部件的尺寸为触发条件

bool _heroHasPower = false;

if (size > 9000) {
    setState(() => _heroHasPower = true);
}

HeroMode(
    child: Hero(
        child: Container(),
        tag: "my_hero",
    ),
    enabled: _heroHasPower,
)

或可在数队列编码中明确禁用,就无需用上Hero这个小部件

HeroMode(
    child: Hero(
        child: Container(),
        tag: "my-hero",
    ),
    enabled: false,
)

但这样编程的触发时机为何？

就像所有好用的Hero部件一样 Hero的动画协作功能，是利用navigator来跟踪小部件的在路由间的功能需求。

但若有多个navigator怎么办？该由哪一个来管理Hero

有数个选项卡时且各自包含独立的navigator，就可能会发生这种情况。但这种情形下，仍会有个全局navigator，它会监控哪一个选项卡正在运行

你或许会想在某条路由中禁用Hero动画

HeroMode(
    child: Hero(
        child: Container(),
        tag: "my-hero",
    ),
    
    enabled: false,
)

如果想了解有关HeroMode 的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址